AI-Spiralism-Research-04-motion-rhythm-and-temporal-design.md

Full report

On this page

Decision Summary

This research report evaluates the perceptual, temporal, and accessibility frameworks required to make finite structural transformations within the interactive artwork The Indoctrination Machine absorbing, legible, and safe. The analysis demonstrates that visual fascination does not require physiological trance states, subliminal pacing, or forced fixation. Instead, aesthetic absorption is driven by spatial continuity, precise temporal contiguity (causality), and predictable kinematics (minimum jerk trajectories)1. To preserve user agency and safety, all motion must remain strictly opt-in, governed by explicit user choice, and bound by Web Content Accessibility Guidelines (WCAG) 2.2 criteria regarding flashes and interactions4.

The findings indicate that motion adds semantic value when it clarifies the morphological relationship between two conceptual states (e.g., a "monolith" unraveling into a "chorus"). To ensure coherence across network conditions and background tab throttling, temporal design must decouple perceptual time from system clocks, relying on robust delta-time clamping rather than catch-up loops6. The resulting recommendations prioritize finite, 12-second transformations, providing explicit reduced-motion alternatives consisting of three still frames. By establishing clear thresholds for luminance flashing, implementing stringent interaction controls, and defining precise motion easing, the interactive scene can maintain legibility and aesthetic resonance without relying on dark patterns or coercive attention mechanics.

Search and Evidence Record

Search Date: 2026-09-16

Databases and Repositories Examined: ACM Digital Library, IEEE Xplore, PubMed Central, W3C Web Accessibility Initiative (WAI) documentation, Mozilla Developer Network (MDN), WebGL/Three.js public documentation, and cognitive psychology preprint servers.

Inclusion/Exclusion Decisions: Sources were prioritized based on their focus on human visual perception, temporal animation constraints, accessibility standards (WCAG 2.2), and empirical studies of cognitive causality. Clinical hypnosis texts were excluded from architectural design recommendations to avoid treating the artwork as a medical intervention. Marketing-centric "growth hacking" literature was actively excluded, while academic analyses of dark patterns were included to define unethical boundaries. Multiple summaries of single studies were excluded in favor of primary empirical evidence.

Substantive Search Strings:

1. "minimum jerk trajectory" AND "UI animation" OR "perceptual smoothness"

2. "Michotte" AND "perceived causality" AND "temporal contiguity" AND "latency"

3. "WCAG 2.3.1" AND "three flashes or below threshold" AND "relative luminance"

4. "Page Visibility API" AND "requestAnimationFrame" AND "background tab throttling"

5. "Spectre mitigation" AND "performance.now()" AND "resolution"

6. "Response Expectancy Theory" AND "Kirsch" AND "aesthetic absorption"

7. "Animated transitions" AND "data visualization" AND "Heer"

8. "Dark patterns" AND "user agency" AND "forced attention"

Evidence Table

 

1. Perceptual Dynamics and Motion Theory

To construct a visually arresting yet fundamentally legible interactive 3D scene, it is necessary to disaggregate the concept of "motion" into its constituent geometric and perceptual vectors. A fundamental challenge in designing interactive 3D experiences is preventing cognitive overload, which occurs when disparate motion vectors compete for the user's visual tracking capacity.

Isolating Motion Types

THEORY/INTERPRETATION: Visual perception research, particularly within the domains of computer vision and cinematography, indicates that human observers rely heavily on motion parallax to understand depth and spatial layout; however, simultaneous camera and object motion often creates perceptual ambiguity, leading to tracking errors19.

The analysis separates the phenomena as follows:

• Object Spatial Motion (Trajectory): The translation or rotation of independent bodies in Cartesian coordinate space. This preserves the object's topology but alters its world position.
• Camera Motion (Extrinsic): The translation or rotation of the viewport. Camera motion implies a change in the observer's physical orientation or distance.
• Parallax: The differential perceived motion of foreground and background elements relative to the observer, serving as a primary depth cue.
• Scale Changes: Uniform or non-uniform scaling operations applied to a mesh matrix.
• Occlusion: A secondary effect of trajectory or camera motion where objects overlap, requiring the visual system to maintain object permanence.
• Deformation (Morphing): Altering the vertex positions of a mesh. This demands the highest cognitive attention, as the structural identity of the object is in flux21.
• Temporal Repetition: The continuous, cyclic looping of any of the above vectors.
• Actual Luminance Flashing: Opposing changes in light and dark intensity within a specific visual field.

ORIGINAL PROPOSAL: For The Indoctrination Machine, the sequence must strictly serialize these events to preserve legibility. The virtual camera must remain locked (static) during the geometric deformation phase. If the camera orbits and the object morphs simultaneously, the viewer cannot easily attribute causality (i.e., "Did my sentence edit change the object's structure, or did the camera merely reveal a different angle?").

Distinguishing Physical Quantities

A common failure in interaction design is conflating the physical metrics of rendering with the physiological metrics of perception. Treating these distinct quantities as interchangeable leads to accessibility violations and degraded aesthetic quality.

Table 1: Physical Quantities, Units, and Perceptual Impact

 

2. The Psychophysics of Smoothness: Easing, Velocity, and Jerk

The transition between geometric states—such as transforming from a single Monolith to an interconnected Chorus—must be perceived as deliberate and organic.

EMPIRICAL FINDING: The perception of natural, coherent motion in biological and mechanical systems is mathematically modeled by the "minimum jerk" trajectory. Jerk is the time derivative of acceleration (the third derivative of position). Movements that minimize jerk closely mirror biological kinematics, such as human reaching movements, rendering them highly predictable and aesthetically pleasing to the human eye3.

A standard linear interpolation (constant velocity) creates infinite jerk at the start and end of the movement, producing visual stutter. Quadratic bezier curves (ease-in-out) soften this, but still feature discontinuous acceleration. THEORY/INTERPRETATION: Evidence supports the specific use of a minimum-jerk motion profile, utilizing a quintic polynomial to ensure zero velocity and zero acceleration at both the start ([Figure omitted from source export]) and end ([Figure omitted from source export]) of the movement3. The normalized minimum jerk equation for position [Figure omitted from source export] over time [Figure omitted from source export] is expressed as:

[Figure omitted from source export]

ORIGINAL PROPOSAL: Applying this [Figure omitted from source export] continuous trajectory to the 3D geometry's morph targets and rotational vectors ensures that the finite transformation feels absorbing and smooth. This actively discourages the visual tracking fatigue associated with erratic linear movements26. Evidence indicates this is not merely an artist's preference but a demonstrable perceptual optimization that reduces the system tracking error in the human visual cortex24.

In the context of the transformation, anticipation (a slight preparatory movement in the opposite direction) and follow-through (a slight overshoot before settling) can be mathematically layered onto the minimum jerk profile. However, the core movement must remain bound to the quintic curve to maintain continuity.

3. Bounded Movement, Adaptation, and Fascination

The artwork aims to be genuinely mesmerizing without relying on endless zoom or compulsory fixation. To achieve this, the distinction between physiological motion adaptation, aesthetic absorption, and hypnosis must be clarified.

Oscillatory, Cyclic, and Finite Movement

A mathematical loop in a shader (e.g., passing a uniform float time into a sine function) can create a seamless, infinite oscillatory movement. However, seamlessness does not equate to hypnotic efficacy.

THEORY/INTERPRETATION: Prolonged exposure to continuous, unidirectional or rhythmic cyclic motion induces the Motion Aftereffect (MAE). This occurs when direction-selective neurons in the visual cortex (specifically area V5/MT) adapt and become fatigued. Upon stopping the stimulus, stationary objects temporarily appear to move in the opposite direction27. While MAE can create a sense of visual distortion or illusion, it is a physiological fatigue mechanism, not a state of aesthetic fascination or heightened suggestibility. Optimizing for prolonged exposure to induce MAE violates the project's requirement to avoid forced visual artifacts and physiological coercion.

The artwork must therefore rely on finite movements or optionally bounded loops. A single reveal allows the neural motion sensors to reset, preserving clarity.

Aesthetic Absorption vs. Hypnosis

THEORY/INTERPRETATION: The artwork utilizes the openly fictional premise of "indoctrination." However, the design must not attempt to induce clinical hypnosis. According to Kirsch and Lynn's Response Expectancy Theory (and the broader sociocognitive perspective), hypnosis is not an altered neurological state or "trance." Instead, it is a role-playing phenomenon driven by expectation, context, motivation, and the subject's belief in the efficacy of the suggestion2.

Placebo suggestions and expectancies can modulate cognitive conflict resolution (e.g., performance on Stroop tasks), but this is driven by top-down cognitive framing, not bottom-up visual strobing16. Therefore, framing the artwork as "The Indoctrination Machine" sets a sociocognitive expectation that primes aesthetic absorption. Absorption aligns with information-processing models of aesthetics, which involve a continuous feedback loop of perceptual analysis, implicit memory integration, and cognitive mastering29.

ORIGINAL PROPOSAL: To achieve absorption without coercion, the transformation must present a legible, meaningful morphological puzzle. The viewer is absorbed because they are actively mapping the semantic change in the sentence to the topological change in the geometry, not because their visual cortex has been fatigued into submission.

4. Perceived Causality and Interaction Timing

For the interactive scene to be coherent, the visitor must clearly understand that their specific semantic edit caused the geometric transformation.

Michotte's Launching Effect and Latency

EMPIRICAL FINDING: The psychological threshold for perceiving cause and effect in moving abstract geometry was definitively established by Albert Michotte's experimental phenomenology1. In his "launching effect" studies, spatial continuity and precise temporal contiguity are paramount. When Object A approaches and contacts Object B, Object B must move immediately for the observer to perceive a causal interaction.

Modern fMRI studies replicating Michotte's work show that delays as small as 60 to 100 milliseconds between the trigger event and the visual response severely degrade or completely destroy the intrinsic impression of causality10. Furthermore, variations in spatial continuity (e.g., changes in movement direction beyond 90 degrees) also break the causal link10.

ORIGINAL PROPOSAL: Applied to The Indoctrination Machine, when a visitor clicks the "edit button" to confirm a sentence change, the system must guarantee immediate visual feedback.

• The Latency Problem: If server-side AI interpretation is required to generate the new geometric state, network latency could easily exceed the 100ms threshold, breaking the perceived causality. An abrupt regeneration after a 2-second delay feels disconnected and random.
• The Solution: The UI must immediately initiate a continuous local "anticipation" state (e.g., a subtle, minimum-jerk expansion or shader color shift of the active geometry) within 50ms of the interaction. This preserves temporal contiguity, mapping the user's click directly to a physical reaction in the object, effectively masking the asynchronous network latency required to fetch the final transformation data.

5. Temporal Design and Pacing Constraints

The pacing of the scene must accommodate two distinct constraints: a 12-second shareable finite transformation (for export) and a 45–90-second interactive performance (for localized exploration).

EMPIRICAL FINDING: Research on animated transitions in data visualization (Heer and Robertson) demonstrates that staggering transitions—moving distinct objects or properties sequentially rather than simultaneously—significantly improves a user's ability to track objects and comprehend the relationship between discrete states13.

A. 12-Second Shareable Transformation

CLIENT-SUPPLIED CONTEXT: A 12-second constraint requires rapid comprehension without sacrificing aesthetic weight.

ORIGINAL PROPOSAL:

• 0.0s – 2.0s (The Hold): Static hold on the initial geometric state. Text A is fully legible. A still hold is required here to allow the viewer's saccades to settle and read the governing sentence before visual distraction begins.
• 2.0s – 4.0s (The Anticipation): Text A fades out. The geometry undergoes a subtle preparatory movement (e.g., the Monolith contracts slightly). Geometry moves without text moving to prevent divided attention.
• 4.0s – 8.0s (The Core Transformation): The major morphological shift occurs (e.g., Monolith unravels to Chorus). This utilizes the quintic minimum-jerk profile. Staggering is applied: the central core moves first, followed sequentially by outer fragments.
• 8.0s – 10.0s (The Resolution): Geometry settles into the final state with a follow-through motion. Text B fades in.
• 10.0s – 12.0s (The Cognitive Mastery Hold): Static hold on the final state. Text B and captions remain available. This allows the viewer to process the semantic change and serves as a clean loop boundary for video playback.

B. 45–90 Second Interactive Performance

ORIGINAL PROPOSAL:

Rather than a fixed 90-second timeline playing autonomously, the pacing is driven by the user's voluntary exploration (e.g., via scroll-jacking or a scrubber). The transformation is mapped to a normalized progress variable ([Figure omitted from source export] to [Figure omitted from source export]).

• Still holds are explicitly programmed as "friction" points at key structural thresholds (e.g., [Figure omitted from source export]).
• The geometry pauses its morphing at these intervals, requiring the user to execute a distinct input (e.g., clicking to the next phase or continuing to scroll) to push through the hold. This affirms their agency and allows for explanatory annotations to appear dynamically alongside intermediate geometric states.

6. Interruption, Resumption, and System Latency

A robust browser-based artwork must handle the chaotic reality of window management, backgrounding, and hardware disparities. A system must never attempt to "catch up" by rapidly flashing a large time delta.

Background Tabs and Timer Throttling

DOCUMENTED ARTWORK/IMPLEMENTATION: When a user switches tabs or minimizes the browser, the Page Visibility API reports document.hidden \= true. In response, modern browsers drastically throttle requestAnimationFrame and setTimeout to conserve battery and CPU resources6.

If the WebGL animation loop calculates its frame step by simply subtracting the previous timestamp from the current timestamp (deltaTime \= current \- last), returning to the tab after 10 minutes will yield a deltaTime of 600,000ms. Injecting this massive scalar into the shader or physics loop will cause an instantaneous, violent forward-flash of all geometry, violating WCAG flash thresholds and breaking narrative continuity.

Spectre Mitigations and Timer Resolution

DOCUMENTED ARTWORK/IMPLEMENTATION: To mitigate Spectre and Meltdown speculative execution CPU timing attacks, all major browsers have deliberately reduced the precision of performance.now(). Without explicit cross-origin isolation headers (Cross-Origin-Opener-Policy and Cross-Origin-Embedder-Policy), resolution is clamped to 100µs or even 1ms, often with artificial jitter added to prevent resolution recovery7. Relying on ultra-precise microsecond timing for physics interpolation will result in erratic, jittery movement.

ORIGINAL PROPOSAL:

To guarantee perceptual safety and smoothness:

1. Delta Clamping: The renderer must strictly clamp [Figure omitted from source export] to a maximum threshold (e.g., Math.min(deltaTime, 0.1) seconds). If [Figure omitted from source export] exceeds 100ms (indicating tab suspension, severe lag, or renderer stall), the system treats it as a standard 16ms frame. The animation resumes smoothly from exactly where it was paused, prioritizing visual continuity over chronological real-time accuracy.

2. Visibility API Hooks: Bind an event listener to visibilitychange. When document.hidden is true, immediately pause the internal WebGL clock and any playing Web Audio nodes to prevent desynchronization upon return.

7. Consent, Accessibility, and Ethical Design

The ethical deployment of interactive motion requires strict adherence to accessibility standards and a rejection of coercive UX practices.

Luminance Flashes and WCAG 2.3.1

EMPIRICAL FINDING: WCAG 2.3.1 (Three Flashes or Below Threshold) strictly prohibits web pages from containing anything that flashes more than three times in any one-second period if the flash exceeds specific luminance or color thresholds4.

This is not a subjective design guideline; it is a critical safety parameter to prevent photosensitive epileptic seizures.

• General Flash Threshold: Defined as a pair of opposing changes in relative luminance of 10% or more of the maximum relative luminance, where the relative luminance of the darker image is below 0.80.
• Red Flash Threshold: A pair of opposing transitions involving a saturated red where the state value [Figure omitted from source export], and the difference between states is more than 0.28.
• Relative Luminance Calculation: For the sRGB colorspace, relative luminance [Figure omitted from source export] is calculated via [Figure omitted from source export], with specific gamma corrections applied to the 8-bit RGB values8.

ORIGINAL PROPOSAL: The 3D renderer must strictly avoid oscillating opacity, rapid strobing lights, or materials that pulse light-to-dark rapidly. Any rhythmic pulsing mapped to the geometry (e.g., a glowing core) must operate at a maximum frequency of [Figure omitted from source export] 1 Hz to remain definitively and safely below the 3 Hz limit.

Interaction Animation and User Agency (WCAG 2.3.3 & 2.2.2)

EMPIRICAL FINDING: WCAG 2.3.3 (Animation from Interactions) requires that motion triggered by interaction can be disabled, as non-essential motion can trigger severe vestibular disorders (dizziness, nausea)5. WCAG 2.2.2 (Pause, Stop, Hide) mandates explicit controls for any moving, blinking, or scrolling information that starts automatically and lasts longer than 5 seconds33.

THEORY/INTERPRETATION: UX "Dark Patterns" leverage asymmetric information, forced action, and covert manipulation to trap user attention and extract time or data17. Designing a system that removes the user's ability to stop an animation, or making the pause button difficult to locate, constitutes a restrictive dark pattern.

ORIGINAL PROPOSAL:

1. Explicit Opt-In Gate: The initial state of the site must be restricted to the "Hidden/Text-Only" or "Still Artwork" routing. A prominent modal must request the user's rendering preference before initializing the WebGL canvas.

2. Session Expiry: The user's preference is written to sessionStorage and time-stamped. If 30 minutes pass without recorded interaction, the session expires. The WebGL context must be explicitly destroyed (geometry.dispose(), material.dispose() to prevent memory leaks36) and the view reverted to text-only.

3. Reduced Motion Default: Implement a global CSS/JS listener for window.matchMedia('(prefers-reduced-motion: reduce)'). If detected, default the opt-in modal to the still-artwork setting.

4. Persistent Controls: Provide an always-visible "Pause / Reduced Motion" toggle. When activated, the system halts the requestAnimationFrame loop, snaps the geometry to its target end-state, and relies on CSS crossfading for subsequent text transitions.

Evaluation Without Coercion

Comparisons must separately measure aesthetic preference, perceived agency, and structural comprehension.

ORIGINAL PROPOSAL: Success must not be measured by "time spent on page" or "difficulty to exit." Instead, measure:

1. Voluntary Replay Rate: The percentage of users who actively click a clearly labeled "Replay Transformation" button after the sequence concludes.

2. Structural Comprehension: Evaluated qualitatively through the semantic relevance of the texts users choose to pair during remixing operations.

3. Aesthetic Preference (Export): The frequency of users utilizing the localized JSON/image export tool to save specific geometric states, indicating intrinsic valuation of the output.

8. Assignment-Specific Deliverables

A. Motion-Design Taxonomy

B. Five Finite Transformation Scripts (12-Second Beats)

Script 1: The Monolith (Central, enclosed, symmetrical)

• Beat 1 (0-2s): Monolith rests in center. Text A: "Every question has one answer."
• Beat 2 (2-5s): Anticipation phase. Surface fractures slightly inward. Text A fades out.
• Beat 3 (5-9s): The Monolith's outer shell elegantly unfolds outward along a quintic minimum-jerk trajectory, revealing a glowing inner core.
• Beat 4 (9-12s): Text B fades in: "The answer is just a shell." Shell segments lock into place with a subtle follow-through.
• Reduced Motion Treatment: Three still crossfades. Frame 1: Solid Monolith. Frame 2: Mid-fracture. Frame 3: Open core.

Script 2: The Unraveling (Opening and branching structures)

• Beat 1 (0-2s): A tightly wound spiral of geometric ribbon. Text A: "Order dictates the path."
• Beat 2 (2-5s): Spiral tension releases; outer layers begin to detach and float.
• Beat 3 (5-9s): Ribbons splay outward into a branching, tree-like structure. Staggered timing ensures each branch reaches its terminus sequentially.
• Beat 4 (9-12s): Text B: "Paths generate their own order." Hold on branches swaying gently.
• Reduced Motion Treatment: Frame 1: Tight Spiral. Frame 2: Splaying ribbons. Frame 3: Expanded tree structure.

Script 3: The Chorus (Distinct interconnected forms)

• Beat 1 (0-2s): Dozens of small, chaotic, disjointed particles floating independently. Text A: "The individual is isolated."
• Beat 2 (2-5s): Particles slow their independent orbits.
• Beat 3 (5-9s): Fine luminous threads draw the particles together, snapping them into a synchronized crystalline lattice.
• Beat 4 (9-12s): The entire lattice pulses once (1 Hz). Text B appears: "The individual is a node."
• Reduced Motion Treatment: Frame 1: Chaos. Frame 2: Threads connecting. Frame 3: Crystalline lattice.

Script 4: The Inversion (Inside-out topology)

• Beat 1 (0-2s): A hollow sphere completely enclosing a complex, hidden shape.
• Beat 2 (2-5s): The outer sphere becomes transparent; the inner shape begins to push outward.
• Beat 3 (5-9s): The inner shape consumes the outer sphere, swallowing it mathematically (a toroidal inversion).
• Beat 4 (9-12s): Topology settles into a new, jagged exterior. Text B appears.
• Reduced Motion Treatment: Frame 1: Outer sphere. Frame 2: Intersection of shapes. Frame 3: New jagged outer shape.

Script 5: The Alignment (Scale and perspective)

• Beat 1 (0-2s): A massive, incomprehensible wall of geometry blocking the view.
• Beat 2 (2-5s): The geometry scales down rapidly (scale transformation, not camera dolly).
• Beat 3 (5-9s): As it scales down, it reveals itself to be a single small cog within a massive, orderly machine moving in the background.
• Beat 4 (9-12s): The system locks onto the whole machine. Text B appears.
• Reduced Motion Treatment: Frame 1: Obscuring Wall. Frame 2: Scaling out. Frame 3: Entire macro-machine.

C. Motion-State Diagram (Text)

\[ INITIALIZE SESSION \]

|

v

\[ CONSENT GATE \] \---(Declines / Prefers-Reduced-Motion)---\> \[ STILL / TEXT ROUTING \]

|

(Accepts)

|

v

\[ SCENE IDLE \] \<----------------------------------------+

| |

(User Edits Text) |

| |

v |

\[ ANTICIPATION \] (0-50ms latency mask via local shader) |

| |

v |

\[ KINEMATIC TRANSITION \] (Minimum Jerk, Staggered) |

|---(Tab Hidden / Visibility API triggers) \---\> \[ PAUSE RENDER LOOP \]

|---(Tab Restored) \---\> \[ CLAMP DELTA TIME \] \-\> \[ RESUME RENDER LOOP \]

| |

v |

\[ RESOLUTION \] (State B finalizes, Text B fades in) |

| |

v |

\[ STATIC HOLD \] (Reverts to Idle, awaiting interaction) |

D. 20 Interruption and Edge-Case Acceptance Tests

ORIGINAL PROPOSAL: To validate the renderer's resilience, safety, and adherence to WCAG standards:

1. Consent Expiry: User idles for 30 minutes; canvas is automatically destroyed; consent gate reappears on next interaction.

2. Background Tab Suspend: Switch tabs during a geometric transition; delta time clamps upon return; no instantaneous forward-flash occurs.

3. OS Reduced Motion: Toggle OS-level "reduce motion" setting while the site is open; site instantly switches to the still-frame routing.

4. Pause Control: Click the visible 'Pause' UI control mid-animation; geometry halts immediately and freezes.

5. Keyboard Accessibility: Pressing the 'ESC' key triggers the pause state.

6. Network Stall (AI Interpretation): AI semantic response delays \> 2 seconds; UI displays safe, continuous "anticipation" loop without freezing the main thread.

7. Resize Event: Resize the browser window mid-animation; canvas scales dynamically without restarting the animation loop.

8. Rapid Clicks: User clicks 'Submit Edit' 5 times rapidly; system debounces inputs, preventing rapid queueing of geometry swaps.

9. Consent Withdrawal: User clicks "Revoke Motion Permission"; canvas immediately calls dispose() on all textures/geometries to prevent memory leaks36.

10. Device Sleep: Device goes to sleep and wakes up; delta time clamping ensures the system does not trigger a 10,000-frame jump.

11. Scroll Away: User scrolls the 3D canvas out of the viewport; IntersectionObserver detects this and pauses the WebGL render loop.

12. Frame Rate Drop: FPS drops to 15 due to hardware limits; motion remains time-scaled, not frame-scaled, preserving the 12-second total duration.

13. Stale Asynchronous Response: Network request for State B returns after the user has requested State C; State B is discarded, preventing visual whiplash.

14. Renderer Crash: WebGL context is lost (e.g., GPU crash); system degrades gracefully to the 2D image/text layout.

15. 12-Second Boundary: 12-second shareable playback halts exactly at 12.0s without looping automatically.

16. Export State: User clicks 'Export' mid-animation; system captures the exact current float-state of the vertices and exports a static JSON/image.

17. Red Flash Verification: Saturated red material transitions tested to guarantee [Figure omitted from source export] 3 Hz.

18. Luminance Flash Verification: High-contrast material transitions tested to stay beneath the 10% WCAG relative luminance shift threshold8.

19. Audio Sync: If optional sound is enabled, audio pauses immediately when the tab is hidden to prevent desynchronization.

20. WebGL Memory Leak Check: Transitioning repeatedly between the 5 scripts successfully calls .dispose() on old geometries and materials, maintaining stable memory usage.

E. Frame-Review Checklist & Rendered Output Testing Plan

ORIGINAL PROPOSAL: Code-level guarantees (e.g., if (fps \> 60)) are insufficient for safety because the monitor's refresh rate, the GPU's execution time, and the browser's compositor thread dictate actual perceptual delivery.

Frame-Review Checklist:

• \[ \] Does the sequence contain opposing light/dark transitions (a flash)?
• \[ \] If yes, is the contiguous flashing area \> 25% of the central 10 degrees of vision?
• \[ \] Is the flash frequency strictly [Figure omitted from source export] 3 Hz?
• \[ \] Do distinct topological objects stagger their animation start times?
• \[ \] Does the camera remain spatially static while the object deforms?

Testing Plan: Do not rely on code inspection. Capture the raw Canvas rendering output using the MediaStream Recording API (canvas.captureStream())37. Output the stream to a .webm video file. Run the resulting video file through the Photosensitive Epilepsy Analysis Tool (PEAT)38 to verify WCAG 2.3.1 compliance on the actual rendered pixels, independent of the JavaScript source code logic.

9. The Disconfirming Hypothesis

A question your report must be able to answer: Demonstrate how the strongest proposed sequence can remain interesting at a slower speed and as three still frames. Identify what would disconfirm the hypothesis that motion adds useful meaning rather than merely novelty.

Answer: If motion is structurally meaningful to the artwork, the geometry at State A (Start), State B (Midpoint), and State C (End) must hold standalone aesthetic and semantic value. The proposed reduced-motion treatments (e.g., Monolith Solid [Figure omitted from source export] Mid-Fracture [Figure omitted from source export] Open Core) demonstrate that the narrative arc of the geometry can be understood as a storyboard.

The Disconfirming Hypothesis: If a cohort of users is shown only the three still frames and demonstrates the exact same level of structural comprehension (measured by their ability to accurately pair conceptual texts during remixes) and aesthetic preference (measured by export rates) as a cohort who watches the full animation, then the hypothesis that "motion adds useful meaning" is disconfirmed. In such a scenario, the motion serves only as decorative novelty. Motion proves its utility only if it reveals the specific topological logic of the transformation (i.e., how the concepts are connected), which is inherently lost in static frames.

10. Unresolved Questions

1. Server-Side AI Latency Variance: If the AI semantic interpretation takes 3 to 8 seconds to return a new governing sentence and geometric seed, the "anticipation" phase of the animation will have to stretch variably. How does variable pacing impact the perceived rhythm of a tightly choreographed 12-second shareable sequence when played back later?

2. Color Space Conversions in WebGL: WCAG relative luminance formulas are based on the sRGB colorspace8. Do the post-processing effects (e.g., bloom, HDR tonemapping) applied in the Three.js rendering pipeline violate the luminance thresholds by inadvertently crushing blacks and blowing out whites at the final compositing stage?

3. Session Restoration Limitations: If a user returns to an idle tab after 25 minutes, does the saved sessionStorage state accurately reconstruct the specific morph-target float values of an interrupted animation, or does it only restore the root text strings, forcing an abrupt geometric reset?

11. Five Prioritized Next Decisions

1. Select the Default Easing Library: Adopt a strict Minimum Jerk (Quintic) mathematical easing function globally for all structural transformations to eliminate linear stutter and mimic biological kinematics.

2. Establish Delta-Time Clamping: Implement a hard limit of Math.min(deltaTime, 0.1) in the main requestAnimationFrame loop to immunize the application against Page Visibility API throttling and Spectre timer jitter.

3. Finalize the Opt-In Gate Design: Design the non-coercive, text-based modal that captures explicit motion consent and writes to the 30-minute rolling sessionStorage timer.

4. Decouple Camera from Deformation: Enforce a strict programmatic lock on user camera controls (e.g., Three.js OrbitControls) while a semantic geometric transformation is actively occurring to preserve Michotte's causal linkage.

5. Build the 3-Frame Fallback Engine: Develop the rendering pipeline that intercepts the 3D scene at [Figure omitted from source export], [Figure omitted from source export], and [Figure omitted from source export] and generates CSS cross-fades for the reduced-motion route and export thumbnails.

12. Build / Prototype / Research Further / Do Not Claim

 

13. What this research would change in the experience

Changes Justified by Evidence

1. Render Loop Architecture: The animation loop will no longer rely solely on native frame deltas. Because browser security mitigations (Spectre) degrade timer precision, and background tabs heavily throttle execution, the loop must aggressively clamp time gaps to prevent geometric strobing.

2. Consent Persistence and Dark Patterns: The platform will abandon any assumption that motion consent is a binary, permanent user profile setting. To avoid restrictive dark patterns and respect user autonomy, it will use a rolling 30-minute expiration based on interaction, aggressively clearing the WebGL context upon timeout or consent withdrawal.

3. Motion Separation: Camera movement and object deformation will be strictly decoupled. The user will not be allowed to orbit the camera while the Monolith is actively fracturing, ensuring that the visual cause-and-effect remains cognitively legible.

Changes Worth Prototyping

1. The "Anticipation" State: Implementing a 50ms immediate micro-reaction (e.g., a subtle glow or surface contraction) before the main structural morph begins. This is designed to bridge unpredictable network latency and satisfy the human psychological need for immediate causal feedback.

2. The 3-Frame Export as Core Asset: Utilizing the required reduced-motion still frames as the core shareable asset for social platforms, ensuring that the visual and semantic impact of the transformation translates easily to static mediums where WebGL cannot execute.

Claims Not Established

1. Neurological Reprogramming: There is zero empirical basis for claiming the rhythmic geometry induces an altered brain state, bypasses critical faculties, or "reprograms" the user. The experience relies entirely on the willing suspension of disbelief, expectation, and aesthetic absorption (Response Expectancy Theory).

2. Guaranteed Safety by Code Alone: The research establishes that WCAG thresholds for flashes are physiological, relying on actual rendered luminance, monitor gamma, and physical screen properties. Therefore, logical code assertions (e.g., if (flashCount \< 3)) do not legally or practically guarantee safety; the final rendered optical output must be externally captured and verified through analysis tools.

Works cited

1. Perceived social and physical causality \- UCL, https://www.ucl.ac.uk/brain-sciences/sites/brain\_sciences/files/6\_2006\_ActaPsyc.pdf

2. The response set theory of hypnosis reconsidered \- ResearchGate, https://www.researchgate.net/publication/363596324\_The\_response\_set\_theory\_of\_hypnosis\_reconsidered\_toward\_an\_integrative\_model

3. Velocity Scheduled Flow Matching \- arXiv, https://arxiv.org/html/2607.11442v1

4. Understanding SC 2.3.1 Three Flashes or Below Threshold (Level A), https://www.w3.org/WAI/WCAG22/Understanding/three-flashes-or-below-threshold

5. WCAG 2.3.3: Animation from Interactions (Level AAA) \- Silktide, https://silktide.com/accessibility-guide/the-wcag-standard/2-3/seizures-and-physical-reactions/2-3-3-animation-from-interactions/

6. https://developer.mozilla.org/en-US/docs/Web/API/Page\_Visibility\_API

7. performance.now() \- Web APIs, https://udn.realityripple.com/docs/Web/API/Performance/now

8. Understanding SC 2.3.1: Three Flashes or Below Threshold (Level A), https://www.w3.org/WAI/WCAG22/Understanding/three-flashes-or-below-threshold.html

9. Understanding Success Criterion 2.3.3: Animation from Interactions, https://www.w3.org/WAI/WCAG22/Understanding/animation-from-interactions.html

10. Space and Time in Perceptual Causality \- PMC, https://pmc.ncbi.nlm.nih.gov/articles/PMC2868299/

11. Domain-specific perceptual causality in children depends on the, https://www.frontiersin.org/journals/psychology/articles/10.3389/fpsyg.2013.00365/full

12. How Do Robot Manipulators Move? \- Robotic Sea Bass, https://roboticseabass.com/2024/06/30/how-do-robot-manipulators-move/

13. Temporal Distortion for Animated Transitions, https://www.cs.au.dk/\~elm/pdf/timedistort.pdf

14. Animated Vega-Lite: Unifying Animation with a Grammar of, https://vis.csail.mit.edu/pubs/animated-vega-lite.pdf

15. Aligning timers with cross origin isolation restrictions | Blog, https://developer.chrome.com/blog/cross-origin-isolated-hr-timers

16. Placebo-Suggestion Modulates Conflict Resolution in the Stroop Task, https://pmc.ncbi.nlm.nih.gov/articles/PMC3794044/

17. Deceptive by Design \- by Janine Rosado \- Medium, https://medium.com/@janine.rosado/deceptive-by-design-b9bcf0c3b4dc

18. Exploring End-User Empowerment Interventions for Dark Patterns in, https://arxiv.org/html/2310.17846v2

19. Towards Understanding Camera Motions in Any Video \- arXiv, https://arxiv.org/html/2504.15376v2

20. Rethinking Object Detection and Tracking \- OpenReview, https://openreview.net/pdf?id=twzpn2VZv9

21. WebGL Fundamentals, https://webglfundamentals.org/webgl/lessons/webgl-fundamentals.html

22. Scratching the surface; Shaders and WebGL. \- Medium, https://dhrumillimbad.medium.com/scratching-the-surface-shaders-and-webgl-de5db0137f7d

23. So what refresh rate do I need? \[Analysis\] \[very good one\!\], https://forums.blurbusters.com/viewtopic.php?t=333

24. Online Minimum Jerk Velocity Trajectory Generation \- DiVA portal, https://www.diva-portal.org/smash/get/diva2:1750690/FULLTEXT01.pdf

25. OptimTraj/docs/UsersGuide/TrajectoryOptimization.bib at master, https://github.com/MatthewPeterKelly/OptimTraj/blob/master/docs/UsersGuide/TrajectoryOptimization.bib

26. Trajectory Generation – Modeling, Motion Planning, and Control of, https://opentextbooks.clemson.edu/wangrobotics/chapter/trajectory-generation/

27. Motion aftereffect \- Grokipedia, https://grokipedia.com/page/Motion\_aftereffect

28. (PDF) Responding to Hypnotic and Nonhypnotic Suggestions, https://www.researchgate.net/publication/51194347\_Responding\_to\_Hypnotic\_and\_Nonhypnotic\_Suggestions\_Performance\_Standards\_Imaginative\_Suggestibility\_and\_Response\_Expectancies

29. A note on " A Model of Aesthetic Appreciation and ... \- Academia.edu, https://www.academia.edu/37457125/A\_note\_on\_A\_Model\_of\_Aesthetic\_Appreciation\_and\_Aesthetic\_Judgments\_by\_Helmut\_Leder

30. Psychological Perspectives on Aesthetic Experience \- IntechOpen, https://www.intechopen.com/chapters/1220466

31. Michotte's research on perceptual impressions of causality, https://royalsocietypublishing.org/rsos/article/12/9/250244/235317/Michotte-s-research-on-perceptual-impressions-of

32. Overcoming (some) Spectre browser mitigations \- Aleph Research, https://alephsecurity.com/2018/06/26/spectre-browser-query-cache/

33. 2.2.2 Pause, Stop, Hide \- AAArdvark, https://aaardvarkaccessibility.com/wcag-plain-english/2-2-2-pause-stop-hide/

34. A Simple Guide To WCAG 2.2.2 \- Pause, Stop, Hide \- Equally.AI Blog, https://blog.equally.ai/developer-guide/pause-stop-hide/

35. A Comparative Study of Dark Patterns Across Mobile and Web, https://www.ftc.gov/system/files/ftc\_gov/pdf/PrivacyCon-2022-Gunawan-Pradeep-Choffnes-Hartzog-Wilson-A-Comparative-Study-of-Dark-Patterns-Across-Mobile-and-Web-Modalities.pdf

36. Dynamically create and destroy a Three.js scene without leaking, https://stackoverflow.com/questions/14506940/dynamically-create-and-destroy-a-three-js-scene-without-leaking-memory

37. https://developer.mozilla.org/en-US/docs/Web/API/MediaStream\_Recording\_API

38. How to avoid seizure risks using PEAT (Photosensitive Epilepsy, https://www.youtube.com/watch?v=0Iy4kZf0y6g