Architectural and Psychological Framework for Interactive Narrative: The Indoctrination Machine

Full report

On this page

Introduction to the Interface of Suggestion

The intersection of human-computer interaction (HCI), psycholinguistics, and advanced real-time browser rendering presents a unique frontier for interactive narrative. In digital environments where narrative architecture intersects with spatial geometry, the psychological state of the user becomes a central design parameter. The project under analysis, operating under the thematic framework of "The Indoctrination Machine" (AI-Spiralism), leverages these intersecting disciplines to create an environment of voluntary cognitive absorption. By combining kinetic typography, WebGL-based geometry, client-side video processing, and structured narrative exports, the application interrogates the boundaries of user agency, technological persuasion, and psychological reactance.

The linguistic mechanisms of hypnotism and mesmerism rely less on a mystical "bypass of the critical mind" and more on expectancy, voluntary imaginative involvement, and semantic framing1. This research audit of clinical hypnosis, kinetic typography, and linguistic suggestion demonstrates that the theatrical power of the interactive narrative does not require covert persuasion. Instead, it thrives on clear, stark contrasts: the machine speaks in absolute, rhythmic certainty, representing the fiction, while the interface provides undeniable, transparent control to the visitor, representing the reality. By leveraging the aesthetics of authoritative language—repetition, declarative statements, and spatial pacing—without deceptive choice architecture, the artwork invites visitors to willingly suspend disbelief.

The Psychology of Linguistic Suggestion and Expectancy

The foundational premise of the interactive experience relies on the aesthetics of clinical hypnosis and authoritarian persuasion. However, empirical analysis of suggestibility reveals that the efficacy of these aesthetics does not stem from a subversion of the user's critical faculties, but rather from the structured management of expectation and voluntary imaginative involvement.

Deconstructing the Trance and Response Expectancy Theory

Historically, hypnotic induction has been mischaracterized as a state that subverts the critical mind, forcing compliance through specialized linguistic patterns, a concept often attributed to early practitioners like Dave Elman. Cognitive neuroscience demonstrates that while hypnosis alters functional connectivity within the executive control network, it does not achieve a total cognitive bypass2. Subjects remain entirely capable of breaking immersion and rejecting suggestions that violate core personal morals. The effectiveness of hypnotic suggestion is more accurately explained by Response Expectancy Theory, pioneered by Kirsch, which posits that a subject's belief in the efficacy of the intervention—their expectancy—is one of the strongest predictors of responsiveness1.

Response expectancies are anticipations of automatic, non-volitional reactions to situational cues1. Unlike outcome expectancies, which involve the belief that a specific voluntary action will yield a result, response expectancies directly generate the anticipated subjective experience3. When a user enters a digital environment framed as an indoctrinating entity, the overt contextual cues establish a powerful expectancy of influence. By adopting an authoritative, absolute tone, the machine sets a specific response expectancy wherein the user anticipates a feeling of being directed. The application thrives on the tension between this expectation of control and the undeniable presence of the user's interface controls.

The Efficacy of Direct Suggestion in Digital Interfaces

A persistent myth within clinical and stage hypnosis is that indirect, permissive language (e.g., "You might notice your arm feeling heavy") is superior to direct suggestion because it supposedly evades psychological resistance. Meta-analytic reviews of suggestibility contradict this, demonstrating that direct suggestion (e.g., "Your arm is heavy") is frequently as effective, if not slightly more effective, in yielding overt responses in clinical populations4. Direct suggestion involves unhidden influence, forcing the subject to actively process and respond to the declarative reality being proposed4.

In the context of the interactive narrative, the digital entity utilizes absolute, declarative syntax devoid of filler words. This directness serves a dual purpose. Aesthetically, it fulfills the role of the authoritative machine. Psychologically, it creates a rigid cognitive structure for the user to confront. By avoiding deceptive choice architecture—such as Ericksonian double binds or Neuro-Linguistic Programming (NLP) predicates, which lack robust empirical support for behavioral change—the system ensures transparency5. Exposure to specific terminology may create semantic priming, temporarily speeding up the recognition of related words, but this effect decays rapidly in milliseconds and does not create long-term behavioral directives. Overloading the working memory with complex, ambiguous syntax to create a "confusion induction" primarily works only on subjects who have already consented to the process and are actively seeking a resolution to the disorientation.

Voice-and-Copy Style Guidelines

The narrative relies heavily on a distinct separation of voices, defined by the client-supplied context: "It has a doctrine. You have an edit button." This separation is crucial for maintaining the boundary between the immersive fiction and the user's actual agency.

The Fictional Machine (The Doctrine)

The digital entity assumes a tone that is absolute, declarative, slightly archaic, and unyielding. The mechanical delivery utilizes definitive verbs—such as "is," "must," and "will"—while strictly avoiding filler words. It employs rhythmic repetition to induce a state of imaginative absorption. Provocative, yet honest, phrases are utilized to establish dominance, such as "This is the architecture of your thought," "Observe the pattern," or "I dictate the geometry of this space." Crucially, the doctrine avoids deceptive phrases like "Your subconscious is reprogramming" or "You cannot resist." These phrases make unmeasured clinical claims, violate the required transparency of the artwork, and fail the empirical audit of suggestibility.

The Real Interface (The Edit Button)

In stark contrast, the interface provided to the user maintains a tone that is neutral, clear, empowering, and unambiguous. It utilizes standard user interface conventions and distinct typography—specifically, a sans-serif, system font—to separate it visually and psychologically from the stylized, kinetic voice of the Machine. The interface handles all consent and boundary parameters cleanly, displaying straightforward prompts such as "Motion enabled. \[Disable\]" or "Session expires in 30:00." Evidence indicates that drawing clear boundaries between the hypnotic, theatrical space and the control space enhances voluntary absorption because the user feels intrinsically safe.

Psychological Reactance and the Architecture of Agency

When an individual perceives that their freedom of choice or behavioral autonomy is threatened, they experience an aversive motivational state known as psychological reactance6. First proposed by Jack W. Brehm in 1966, Reactance Theory dictates that this motivational state drives the individual to restore the lost or threatened freedom, often resulting in them doing the opposite of what they feel pressured to do8.

The Boomerang Effect as an Interactive Mechanic

In traditional user interface design, forced actions, intrusive prompts, limited choices, and ambiguous navigation consistently trigger psychological reactance, leading to user frustration and abandonment6. However, the proposed narrative deliberately weaponizes reactance to drive engagement. By broadcasting rigid, absolutist declarations, the digital entity artificially threatens the user's cognitive freedom.

This overt threat arouses reactance, which predictably manifests as the "boomerang effect"—a direct pushback where the subject adopts an attitude contrary to the one being forced upon them9. The interactive architecture resolves this induced tension by providing an explicit edit opportunity. The interface channels the user's natural psychological reactance into a structured subversion of the narrative. The cycle ensures that disagreement is not just allowed, but is the central interactive mechanic.

Measuring Need Satisfaction and Immersion

To quantify the success of this interaction loop, evaluation metrics must measure both the depth of immersion and the fulfillment of user agency. The Player Experience of Need Satisfaction (PENS) scale, derived from Self-Determination Theory (SDT), evaluates video game and interactive media experiences based on the fulfillment of intrinsic psychological needs: autonomy, competence, and relatedness10. The application's design heavily targets the Autonomy subscale. Providing a highly visible, responsive edit interface guarantees that the user perceives their actions as self-endorsed, despite the restrictive narrative framing11.

Simultaneously, the depth of user engagement can be assessed using modified constructs from the Tellegen Absorption Scale (TAS)12. The TAS measures an individual's dispositional tendency to become deeply engrossed in sensory, imaginative, and experiential states, temporarily excluding external stimuli13. High trait absorption correlates positively with hypnotic suggestibility14. The integration of dynamic geometry, sound design, and stark typography aims to induce a state of high absorption, mimicking the focused attention of a hypnotic state without making clinical claims. A modified 5-item version of the TAS will be deployed to evaluate if users report higher immersive flow during the kinetic typography sequences.

The Aesthetics of Authority: Kinetic Typography in WebGL

The delivery of the machine's doctrine relies entirely on the visual presentation of text. While static text conveys information, animated, rhythmic text—kinetic typography—conveys emotion, tone, and volume16.

Emotional Impact of Kinetic Typography

Research demonstrates that predefined kinetic effects significantly alter the perceived emotional intent of textual messages16. By manipulating variables such as scaling, pacing, motion blur, and spatial placement, kinetic typography can simulate the prosody of human speech. In the context of an authoritative digital entity, text that pulses rhythmically or scales aggressively toward the camera mimics the paternal, commanding cadence of a traditional hypnotic induction17. Prototyping the speed of the machine's text based on this research simulates the pacing of an authoritative induction, separating it entirely from a standard web-page loading experience.

Signed Distance Fields and Vector-Based Text Rendering

Traditional HTML Document Object Model (DOM) typography and 2D Canvas rendering are insufficient for complex 3D transformations, depth sorting, and real-time lighting. Furthermore, standard Three.js implementations that tessellate font outlines into dense triangle meshes result in prohibitive polygon counts, which degrade performance heavily in text-rich scenes18.

The optimal architectural solution utilizes Signed Distance Fields (SDF) or Multi-channel Signed Distance Fields (MSDF). SDF algorithms encode the distance from any given pixel to the nearest edge of a character, allowing fragment shaders to render mathematically exact, infinitely scalable curves without pixelation19. The implementation relies on libraries such as troika-three-text, which parses standard font files directly in a web worker20.

By offloading glyph generation, ligature resolution, and layout algorithms to a separate background thread, the main thread avoids frame drops, maintaining the high performance necessary for fluid environments21. Furthermore, troika-three-text injects custom GLSL code into standard Three.js materials20. This permits the text to interact with scene lighting, cast shadows, and undergo complex vertex displacement.

Vertex Displacement and Geometric Consequences

When the user edits a declaration, the narrative dictates a geometric consequence. These transitions are achieved via custom GLSL vertex shaders22. By passing dynamic data via uniforms, the positions of the SDF text vertices, or the underlying geometric primitives representing the doctrine, can be manipulated in real-time24. The transition from the machine's rigid structure to the user's subverted geometry frequently utilizes 3D simplex noise to calculate vertex displacement directly on the Graphics Processing Unit (GPU)24. This approach ensures that the geometric deformation occurs entirely within the shader, avoiding expensive JavaScript-side Central Processing Unit (CPU) calculations and guaranteeing a consistent render loop.

Narrative Topologies: Arcs and Scene Exchanges

The structural framework of the experience is built upon alternative narrative arcs that dictate the overarching visual and thematic progression. The primary art direction must select one of these arcs for the initial launch to focus rendering efforts effectively.

Alternative Narrative Arcs

The Twelve Original Scene Exchanges

The moment-to-moment interaction is driven by a series of twelve short scene exchanges. Each exchange follows the established cycle of a stylized declaration, a plain-UI edit opportunity, a resulting geometric consequence, and the logging of the transcript.

Accessibility, Safety Boundaries, and the Consent Gate

The potent combination of kinetic typography, vertex shaders, and immersive environments introduces significant accessibility risks. Vestibular disorders—conditions affecting the inner ear and brain that control balance and eye movements—can be severely aggravated by non-essential motion, parallax scrolling, and rapid zooming25.

Mitigating Vestibular Risks via WCAG 2.3.3

The Web Content Accessibility Guidelines (WCAG) 2.2 Success Criterion 2.3.3, titled "Animation from Interactions," mandates that motion animation triggered by user interaction must be disableable unless the animation is essential to the functionality or the information being conveyed25. The interactive narrative relies heavily on motion as a visual consequence of user input, directly intersecting with this criterion.

To comply with Level AAA standards and ensure user safety, the architecture incorporates two distinct fallback mechanisms. First, the application actively queries the CSS media feature @media (prefers-reduced-motion: reduce)28. If the user's operating system signals a preference for reduced motion, WebGL animations are immediately throttled, removed, or replaced with simple opacity transitions30.

Second, because not all users are aware of OS-level settings, the application utilizes a forced-choice consent gate UI prior to initializing the WebGL canvas26. The experience will no longer load directly into the artwork. It requires an explicit, un-bypassable choice between "Motion," "Still" (rendering static geometry), or "Text-Only" (bypassing the WebGL renderer entirely) to protect photosensitive users and ensure accessibility.

Context Loss and the 30-Minute Session Timeout

Prolonged exposure to highly absorptive, motion-heavy digital environments requires temporal boundaries. To prevent endless looping of hypnotic aesthetics, the system enforces a strict 30-minute session expiration. Upon reaching this limit, the application does not merely hide the canvas via CSS; it actively terminates the GPU processes to prevent resource leakage and ensure a definitive break in immersion.

This is executed using the WebGL API's WEBGL\_lose\_context extension31. By calling gl.getExtension('WEBGL\_lose\_context').loseContext(), the application forcefully simulates a context lost event, purging the GPU memory associated with the application32. Simultaneously, all local and session storage variables pertaining to the user's narrative progress are wiped. Should the user attempt to reload the environment, the application requires them to pass through the consent gate once more. Standard device-loss recovery handling is implemented so that if context is lost organically—such as the operating system suspending the GPU due to memory limits—the application fails gracefully to the text-only fallback without causing the browser tab to crash33.

High-Performance Client-Side Video Export

A critical component of the interactive narrative is the user's ability to export a 12-second artifact of their subversion—a video depicting the geometric transformation triggered by their textual edit. Generating high-quality, frame-accurate video entirely on the client side circumvents prohibitive server rendering costs, eliminates upload latency, and preserves absolute user privacy.

The Limitations of the MediaRecorder API

Initial approaches to client-side video capture often rely on the MediaRecorder API combined with canvas.captureStream(). While trivial to implement, this architecture is fundamentally flawed for rendering high-fidelity, frame-accurate video exports35.

MediaRecorder captures frames in real-time as they are presented to the screen. If the rendering engine drops a frame due to high computational load or complex shader execution, that frame is permanently lost in the resulting video, leading to jittery playback36. Furthermore, when a browser tab loses focus, modern browsers aggressively throttle requestAnimationFrame and canvas rendering to conserve battery and CPU resources36. Consequently, a video recorded via MediaRecorder in a background tab will frequently exhibit severe stuttering, variable frame rates, or complete visual blackouts. Finally, MediaRecorder offers minimal control over codec configuration, keyframe intervals, and bitrates, severely limiting the optimization of the final file38.

The WebCodecs and OffscreenCanvas Architecture

To guarantee a pristine, frame-accurate export at 60 frames-per-second regardless of the host device's real-time rendering capabilities, the application utilizes the WebCodecs API combined with Web Workers and OffscreenCanvas39. WebCodecs provides low-level access to the media encoders built into the browser, giving developers fine-grained control over individual video frames35.

The export pipeline follows a strict asynchronous pattern to prevent blocking the main UI thread:

1. Worker Initialization: A Web Worker is spawned, completely isolating the heavy encoding process from the main thread's event loop36.

2. OffscreenCanvas Transfer: A secondary canvas is created, and its control is transferred to the Web Worker via transferControlToOffscreen()41.

3. Deterministic Rendering: A deterministic version of the WebGL scene—advancing by exactly [Figure omitted from source export] of a second per iteration—renders sequentially to the OffscreenCanvas. This decoupling means that even if a single frame takes half a second to render on a slow GPU, it will still represent exactly [Figure omitted from source export] milliseconds of video time35.

4. Zero-Copy Frame Creation: A VideoFrame is instantiated directly from the canvas. This is a highly efficient zero-copy operation, as the pixel data remains entirely within GPU memory42.

5. Encoding and Keyframes: The VideoFrame is passed to the VideoEncoder.encode() method. To optimize file size and playback compatibility, the system explicitly forces a keyframe at regular intervals (e.g., encoder.encode(frame, { keyFrame: framesSent % 60 \=== 0 }))39.

6. Explicit Memory Management: Immediately after passing the frame to the encoder, frame.close() is strictly invoked. VideoFrame objects hold direct references to unmanaged GPU memory; failing to manually close them results in catastrophic GPU memory leaks and rapid tab crashes35.

7. Muxing: The VideoEncoder produces raw EncodedVideoChunk objects. Because WebCodecs does not inherently wrap these chunks in a media container format (such as .mp4 or .webm), a client-side muxer library processes the chunks, prepends the necessary codec metadata (like SPS and PPS headers for H.264), and outputs a finalized playable Blob36.

This robust architecture ensures that the transition state between the machine's doctrine and the user's edit is captured flawlessly, resulting in an exportable artifact that proves the user's agency.

Narrative State Management and JSON Schema Architecture

The interactive structure of the environment revolves around a series of binary exchanges. To construct an exportable transcript of this ideological negotiation, the application relies on a highly structured data schema.

Structuring the Transcript via Draft-2020-12

The narrative state is tracked chronologically, logging the original dogma, the user's specific intervention, and the resulting visual state. To ensure the structural integrity of this transcript—especially if the data is aggregated anonymously for artistic exhibition or utilized in subsequent generative outputs—the application defines the data model using JSON Schema (application/schema+json)45.

JSON Schema provides a declarative format for documenting, annotating, and validating JSON structures45. By utilizing Draft-2020-12 specifications, the architecture supports complex data validation, conditional requirements, and strict typing45. The schema enforces that the machine\_declaration field must match a predefined enumeration of the twelve scripted scenes, while the user\_edit field must be a sanitized string limited by a specific maxLength to prevent buffer overruns or injection attacks in the renderer47.

This decoupled schema approach guarantees that the content model exists independently of the front-end implementation48. Should the project expand into multi-user collaborative environments or different WebXR platforms, the core narrative data remains portable, conflict-resilient, and programmatically verifiable48.

Fallback Renderings and Text-Only Accessibility

Furthermore, the schema serves a direct accessibility function. When defining the text-only fallback, users who opt out of the WebGL renderer at the consent gate are presented with an HTML interpretation of this exact JSON state. By mapping the schema properties to semantic HTML elements and utilizing Accessible Rich Internet Applications (ARIA) live regions, the system ensures that screen-reader users experience the narrative subversion seamlessly. Specifically, the use of aria-live="polite" queues the announcement of the user's geometric transformation until the screen reader finishes its current sentence, providing a fluid, responsive document without encountering the visual overload of the WebGL canvas50.

Empirical Testing and Future Design Implications

To validate the psychological impact and usability of the narrative architecture, a rigorous testing protocol and a set of prioritized development decisions have been established.

Comprehension and Consent Verification

To verify consent and understanding without breaking immersion, users will be presented with a series of integrated comprehension questions. These questions evaluate if the user understands who controls the final meaning of the sentence on the screen, how to stop the motion if it becomes overwhelming, what occurs if the browser remains inactive for 30 minutes, whether the machine is adapting to hidden thoughts or only typed inputs, where the history of edits can be viewed, and whether saving an image saves the motion permissions.

Proposed A/B Test Protocol

An A/B test of the "Indoctrination" sequence is proposed to separate aesthetic outcomes from pure interactivity. Group A receives the standard declarative kinetic typography, representing the Machine Voice. Group B receives plain-text, non-animated prompts.

The evaluation measures include:

• Interest: Time spent on site and the number of edits made, tracked via basic event telemetry.
• Recall: A post-visit questionnaire evaluating the ability to recall the first phrase edited.
• Agency: A Likert scale (1-5) evaluating the statement, "I felt in control of the visual environment."
• Hypnosis/Absorption: The deployment of the modified 5-item Tellegen Absorption Scale to determine if Group A reports higher immersive flow compared to Group B, explicitly without linking the experience to clinical trance.

Priority Decisions and Validation Strategy

Several unresolved questions and priority decisions dictate the next phases of development. The transition state between the machine's doctrine and the user's edit in the 12-second video export must be carefully timed within the WebCodecs pipeline. If a user selects the hidden text-only option, the narrative of the geometric transformation must be conveyed through highly descriptive textual prose.

The five prioritized next decisions include: defining the text-only fallback prose, finalizing the consent gate UI to force the Still/Motion/Hidden choice before rendering, implementing the 30-minute timeout logic, drafting the finalized JSON transcript schema for easy sharing, and selecting the primary art direction (Monolith, Unraveling, or Chorus) for the initial launch.

Conclusion

The architectural design of "The Indoctrination Machine" demonstrates a profound synthesis of behavioral psychology, high-performance web graphics, and rigorous accessibility standards. By discarding unverified clinical claims regarding subconscious programming in favor of Response Expectancy Theory, the artwork respectfully borrows the aesthetics of hypnotic suggestion without violating user trust. The spatial pacing of kinetic typography establishes an authoritative baseline, artificially inducing a state of psychological reactance.

The application resolves this induced tension by providing an explicit mechanism for user agency. Through advanced GLSL vertex displacement and SDF rendering, the user's textual defiance is instantly manifested as geometric collapse and rebirth, fulfilling intrinsic psychological needs for autonomy as defined by the PENS framework.

Crucially, the architecture does not sacrifice safety for spectacle. The strict implementation of WCAG 2.3.3 protocols, WebGL context timeouts, and distinct consent gates establish a secure boundary for vestibular and photosensitive safety. Finally, the integration of Web Workers, OffscreenCanvas, and the WebCodecs API guarantees that the user's subversion can be captured, encoded, and exported as a high-fidelity video artifact entirely on the edge, proving that complex, frame-accurate media generation is fully viable within the modern browser ecosystem. The result is an interactive narrative that is as technically resilient as it is psychologically compelling.

Works cited

1. hypnosis in psychotherapy: efficacy and mechanisms \- BSCAH, https://bscah.co.uk/wp-content/uploads/2024/03/HYPNOSIS-IN-PSYCHOTHERAPY-EFFICACY-AND-MECHANISMS.pdf

2. Study on resting-state functional connectivity characteristics under, https://pmc.ncbi.nlm.nih.gov/articles/PMC12178158/

3. RESPONSE EXPECTANCIES: A PSYCHOLOGICAL MECHANISM, https://bscah.co.uk/wp-content/uploads/2024/03/RESPONSE-EXPECTANCIES-A-PSYCHOLOGICAL-MECHANISM-OF-SUGGESTED-PLACEBO-ANALGESIA-262-part-4.pdf

4. Factor structure of suggestibility revisited: new evidence for direct, https://cipp.ug.edu.pl/Factor-structure-of-suggestibility-revisited-new-evidence-for-direct-and-indirect,63096,0,2.html

5. How hypnotic suggestions work \- A systematic review of prominent, https://www.researchgate.net/publication/382446187\_How\_hypnotic\_suggestions\_work\_-\_A\_systematic\_review\_of\_prominent\_theories\_of\_hypnosis

6. The Psychological Reactance: Definition, Theory, And Examples, https://octet.design/journal/psychological-reactance/

7. Reactance Theory \- The Decision Lab, https://thedecisionlab.com/reference-guide/psychology/reactance-theory

8. Reactance Theory Explained: A Psychological Perspective, https://psychologyfanatic.com/reactance-theory/

9. Psychological Reactance: Brehm's 1966 Freedom-Threat Theory, https://yukaichou.com/behavioral-analysis/reactance-theory-brehm-freedom-threat/

10. Player Experience of Need Satisfaction Scale, PENS \- PsyTests, https://psytests.org/cyber/pensen.html

11. Self-determination theory in Video Games \- Nick Ballou, https://nickballou.com/blog/sdt-in-video-games-basic-needs-misunderstandings/

12. Tellegen Absorption Scale, TAS, https://psytests.org/trait/telasen.html

13. Tellegen Absorption: Master the Art of Deep Focus, https://encyclopedia.arabpsychology.com/tellegen-absorption-scale-tas/

14. (PDF) The Modified Tellegen Absorption Scale: a clearer window on, https://www.researchgate.net/publication/262451610\_The\_Modified\_Tellegen\_Absorption\_Scale\_a\_clearer\_window\_on\_the\_structure\_and\_meaning\_of\_absorption

15. Tellegen Absorption Scale, https://www.ocf.berkeley.edu/\~jfkihlstrom/TAS.htm

16. (PDF) Using kinetic typography to convey emotion in text-based, https://www.researchgate.net/publication/221441498\_Using\_kinetic\_typography\_to\_convey\_emotion\_in\_text-based\_interpersonal\_communication

17. Using Kinetic Typography to Convey Emotion in Text-Based, https://www.cs.cmu.edu/\~joonhwan/documents/p41-lee.pdf

18. GPU vector text rendering via the Slug algorithm \- GitHub, https://github.com/mrdoob/three.js/issues/33215

19. From Bitmap to Vector: Implementing MSDF Text in Three.js \- Medium, https://medium.com/@brianbawuah/from-bitmap-to-vector-implementing-msdf-text-in-three-js-d63b1d6ef6d9

20. troika-three-text \- NPM, https://www.npmjs.com/package/troika-three-text

21. Troika-3d-text: library for SDF text rendering \- three.js forum, https://discourse.threejs.org/t/troika-3d-text-library-for-sdf-text-rendering/15111

22. How To Convert GLSL Shaders to TSL \- Three.js Roadmap, https://threejsroadmap.com/blog/how-to-convert-glsl-shaders-to-tsl

23. Animating Letters with Shaders: Interactive Text Effect with Three.js, https://tympanus.net/codrops/2025/03/24/animating-letters-with-shaders-interactive-text-effect-with-three-js-glsl/

24. 3D Morphing Geometry Prompt \- Promter, https://promter.dev/prompts/3d-morphing/

25. WCAG Animation from Interactions Explained, https://www.getstark.co/wcag-explained/operable/seizures-and-physical-reactions/animation-from-interactions/

26. Understanding Success Criterion 2.3.3: Animation from Interactions, https://www.w3.org/WAI/WCAG21/Understanding/animation-from-interactions

27. 2.3.3 Animation from Interactions \- AAArdvark, https://aaardvarkaccessibility.com/wcag-plain-english/2-3-3-animation-from-interactions/

28. 2.3.3 Animation from Interactions \- WCAG 2.2 \- Calling All Minds, https://callingallminds.com/resources/wcag/2.3.3-animation-from-interactions

29. Animated Content and Timing \- Usability & Digital Accessibility, https://usability.yale.edu/digital-accessibility/accessibility-resources/accessibility-articles/animated-content-and-timing

30. What is "reduced motion" in prefers-reduced-motion? \- GitHub Gist, https://gist.github.com/robertpenner/19812c7c6e51cdefee8e55c231090ed6

31. WEBGL\_lose\_context: restoreContext() method \- Web APIs | MDN, https://developer.mozilla.org/en-US/docs/Web/API/WEBGL\_lose\_context/restoreContext

32. Handling Lost Context in WebGL \- ProgrammingTIL \#149 ... \- YouTube, https://www.youtube.com/watch?v=4K9YUSDiggc

33. WebGPU \- W3C, https://www.w3.org/TR/webgpu/

34. Bevy should recover from WebGL Context Lost or WebGPU Device, https://github.com/bevyengine/bevy/issues/10456

35. Integrating WebCodecs and Video Processing Pipelines for Browser, https://beeweb.dev/blog/post.php?slug=beyond-the-canvas-integrating-webcodecs-and-video-processing-pipelines-for-browser-based-video-editing-tools\&lang=de

36. How To Recorded Canvas in React Without Browser Throttling, https://medium.com/@chemsabd/how-to-recorded-canvas-in-react-without-browser-throttling-using-web-workers-and-webcodecs-792446d21f10

37. Record at constant fps with CanvasCaptureMediaStream even on, https://stackoverflow.com/questions/58907270/record-at-constant-fps-with-canvascapturemediastream-even-on-slow-computers

38. Changing quality of MediaRecorder and canvas.captureStream?, https://stackoverflow.com/questions/52371970/changing-quality-of-mediarecorder-and-canvas-capturestream

39. VideoEncoder \- WebCodecs Fundamentals, https://webcodecsfundamentals.org/basics/encoder/

40. How to Render and Export Video in the Browser with WebCodecs, https://dev.to/nareshipme/how-to-render-and-export-video-in-the-browser-with-webcodecs-offscreencanvas-and-a-web-worker-mm3

41. OffscreenCanvas—speed up your canvas operations with a web, https://web.dev/articles/offscreen-canvas

42. WebCodecs API in Practice: Low-Latency… | Tools Ku, https://www.toolsku.com/en/blog/web-codecs-api/

43. Using the WebCodecs API \- MDN Web Docs, https://developer.mozilla.org/en-US/docs/Web/API/WebCodecs\_API/Using\_the\_WebCodecs\_API

44. WebCodecs \> VideoEncoder: Create video from encoded frames, https://stackoverflow.com/questions/70313774/webcodecs-videoencoder-create-video-from-encoded-frames

45. A Media Type for Describing JSON Documents \- JSON Schema, https://json-schema.org/draft/2020-12/json-schema-core

46. Five Ways JSON Schema Can Help You Create Better APIs | Stoplight, https://blog.stoplight.io/five-ways-json-schema-can-help-you-create-better-apis

47. How to design JSON Schema for an Adaptive Form core components?, https://experienceleague.adobe.com/en/docs/experience-manager-cloud-service/content/forms/adaptive-forms-authoring/authoring-adaptive-forms-core-components/create-an-adaptive-form-on-forms-cs/adaptive-form-core-components-json-schema-form-model

48. Using JSON Schema for content models and design systems, https://storyneedle.com/using-json-schema-for-content-models-and-design-systems/

49. I Built a Conflict-Resilient JSON Editor to Solve Collaborative, https://dev.to/emily\_chen\_80108/i-built-a-conflict-resilient-json-editor-to-solve-collaborative-nightmares-and-here-is-the-1ai3

50. Use ARIA to announce updates and messaging, https://universaldesign.ie/communications-digital/web-and-mobile-accessibility/web-accessibility-techniques/developers-introduction-and-index/use-aria-appropriately/use-aria-to-announce-updates-and-messaging

51. ARIA live regions \- Module 11 \- ESDC / IT Accessibility office, https://bati-itao.github.io/learning/esdc-self-paced-web-accessibility-course/module11/aria-live.html