Engineering Hypnotic Phenomena: 3D Spirals, Psychophysics, and Advanced Three.js Rendering

Full report

On this page

Introduction to Visuo-Cognitive Manipulation in WebGL

The intersection of three-dimensional computer graphics and visual psychophysics represents a highly specialized domain where mathematical geometry directly interfaces with human neurology. Among the most potent and historically studied geometric motifs utilized in this intersection is the spiral. When parameterized mathematically and animated continuously, structures such as logarithmic, Archimedean, and generalized spherical spirals have the profound capacity to induce deep alterations in human visual perception. These alterations range from transient motion aftereffects that distort spatial reality to direct cortical entrainment that synchronizes the brain’s electrical activity with the refresh rate of a digital display.

The modern web browser, equipped with hardware-accelerated rendering APIs such as WebGL and the emerging WebGPU standard, serves as an immensely powerful medium for delivering these visuo-cognitive experiences. By leveraging the Three.js library alongside custom OpenGL Shading Language (GLSL) fragment shaders and the highly optimized Three.js Shading Language (TSL), graphics engineers can synthesize complex hypnotic visuals that respond in real-time to external stimuli, such as high-frequency audio data. However, the precise engineering of these digital environments demands significantly more than graphical expertise. It requires a nuanced understanding of neurological responses to optic flow, the mitigation of rendering bottlenecks through advanced instancing and anti-aliasing techniques, and a strict adherence to accessibility standards to prevent adverse physiological reactions. The following exhaustive analysis explores the psychological mechanics, mathematical foundations, rendering paradigms, and safety protocols necessary for constructing advanced 3D hypnotic spiral environments in the browser.

The Neurobiology and Psychophysics of Motion Perception

To engineer effective hypnotic visuals, one must fundamentally understand the neurobiological mechanisms that govern human motion perception and spatial orientation. Visual phenomena such as the spiral aftereffect demonstrate the profound ways in which patterned, rhythmic light stimulation can modulate and temporarily rewire cortical activity.

The Motion Aftereffect and Cortical Fatigue

The foundational psychological principle behind hypnotic spiral illusions is the Motion Aftereffect (MAE), a powerful sensory distortion where prolonged exposure to a moving stimulus alters the perception of subsequent stationary stimuli1. The most famous historical manifestation of this phenomenon is the waterfall illusion. This was first formally documented by Robert Addams in 1834 after observing the rapid descent of the Falls of Foyers in Scotland, though historical accounts of the illusion date as far back as Aristotle2. When an observer stares at a downward-moving waterfall and subsequently shifts their gaze to adjacent stationary rocks, the rocks appear to drift upwards, defying physical reality1.

In the context of hypnotic geometric imagery, this effect is engineered as the spiral aftereffect, a phenomenon first detailed mathematically and perceptually by Joseph Plateau in 18493. When an observer fixates on the center of a spiral rotating continuously in a clockwise direction, the pattern invariably appears to collapse or contract inward. Upon the cessation of movement, or when the observer shifts their gaze to a stationary object—such as a human face or a blank wall—the stationary object will dramatically appear to expand and swirl in the opposite direction4. Magician and optical illusionist Jerry Andrus later expanded on this by creating a three-part spiral that many observers find even more compelling due to its conflicting directional velocity gradients3.

Neurologically, this illusion originates deep within the visual cortex, specifically within the motion-sensitive extrastriate area known as MT/V51. Visual motion is not encoded by single omnipotent neurons but by distinct neural populations that respond preferentially to highly specific speeds and directions2. During the prolonged adaptation phase of viewing a rotating spiral, the specific neurons tuned to the observed direction of motion experience a reduction in responsiveness. This is frequently characterized in neurological literature as neural fatigue, though it may also represent a highly evolved form of error-correction or neural coding optimization1. When the rotating stimulus abruptly stops, the competitive interaction between opposing direction-sensitive neural populations becomes temporarily unbalanced1. The non-fatigued neurons that encode the opposite direction of motion fire at a relatively higher basal rate, generating a false motion signal that the brain explicitly interprets as genuine physical movement1. Functional magnetic resonance imaging (fMRI) studies conducted in 1995 confirm that area MT/V5 exhibits increased metabolic activity during the subjective experience of the motion aftereffect, proving that the brain responds to the illusion exactly as if it were observing real physical motion2. Furthermore, transcranial magnetic stimulation (TMS) studies have demonstrated that artificially disrupting area MT/V5 actively degrades both the perception and the short-term storage of the motion aftereffect2.

The efficacy of this illusion is highly dependent on visual fixation. Keeping the gaze locked on a central marker concentrates the sensory adaptation within a highly consistent retinal region. If the eyes are permitted to follow the moving spiral stripes, the stimulus shifts chaotically across the retina, and the localized neural adaptation becomes significantly less stable, resulting in a weakened or disorganized aftereffect2. This location-specific adaptation is precisely why well-designed hypnotic digital interfaces force the user to focus on a central anchor point.

Anomalous Spiral Aftereffects

While the standard spiral aftereffect is a direct inverse of the adapting motion, sophisticated psychophysical research has revealed the existence of anomalous spiral aftereffects. In a pivotal 1992 study, researchers discovered that when subjects inspected rotating sectored disks that contained absolutely no perceptible components of radial motion, subsequent viewing of stationary spirals caused those spirals to appear to rotate and expand or contract radially6.

Crucially, the relative directions of the illusory rotation and radial motion observed in these specific instances were geometrically "impossible" under the stimulus constraints normally imposed by the mathematics of a spiral under standard physical rotation. The stationary spirals appeared to expand or contract in directions completely opposite to those normally observed under physical rotation6. This suggests that the visual system's detectors for rotational motion and radial motion (expansion/contraction) are intricately coupled in ways that can be exploited by carefully constructed 3D shader patterns that decouple these visual cues.

Higher-Order Visual Motion Priming

Beyond simple localized neural fatigue, complex rotating spirals can engage higher-order sequence-learning mechanisms in the brain. Recent psychophysical research has identified advanced forms of visual motion priming, including positive motion priming and rebounding motion priming, which rely on the brain's encoding of "visual inertia"5. Positive motion priming occurs when a slow, discrete adapting motion (happening in short bursts) causes the observer to perceive subsequent ambiguous motion in the exact same direction, operating on the neurological assumption that objects in motion will remain in motion unless impeded5. Rebounding motion priming occurs when alternating sequences (such as up-down-up-down) prime the observer to continue seeing the rebounding pattern5.

Furthermore, complex repeating geometric patterns can induce a newly discovered phenomenon known as staircase motion priming. In this scenario, the visual system utilizes short-term memory to keep track of sequential motion steps presented at right angles across multiple animation frames (e.g., up-right-up-right)5. Research indicates that this specific type of priming requires the sequence element to be presented at least twice—meaning a minimum of four priming frames is necessary to establish the neurological pattern5. By engineering WebGL spirals with modulated rotational speeds or discrete angular shifts that form staircase sequences, developers can tap directly into these sequence-learning mechanisms, creating a hypnotic effect that feels highly unpredictable yet rhythmically structured to the subconscious visual system.

Optic Flow and the Kinetic Depth Effect

The hypnotic power of a 2D rotating spiral rendered on a flat computer monitor is exponentially amplified by the human visual system's innate propensity to infer 3D spatial structure from 2D motion, a phenomenon formally known as the Kinetic Depth Effect (KDE)7. When spiral elements move with continuous velocity gradients across a screen, they perfectly simulate the optic flow experienced during physical forward locomotion through a three-dimensional environment9.

Pioneering studies on the physiological locus of the spiral aftereffect by Freud in 1964 established that rotating an Archimedes spiral produces an illusory motion of three-dimensional swelling or shrinking, highly dependent on the direction of rotation11. Modern psychophysical experiments have expanded on this, demonstrating that depth perception achieved through the circular motion of dots is as highly effective as depth perception achieved through explicit expansion or spiral motion9.

For decades, an influential idea in neurobiology suggested that human spatial navigation is achieved by decomposing optic flow into three separate and discrete mathematical channels: expansion/contraction, rotation, and translation9. However, neurophysiological testing of cells in the dorsal division of the medial superior temporal area (MSTd)—which possesses large receptive fields responsive to these motions—revealed that these cells do not perform a simple three-channel decomposition. Instead, many MSTd cells are preferentially selective for intermediate spiral motions that inextricably combine both expansion/contraction and rotation components9. This indicates that there is a continuous perceptual spectrum of patterns to which MSTd cells are selective, meaning that expansion-contraction, spiral, and circular motions form a unified continuum in the brain in terms of producing deep spatial depth effects9.

The extraction of this 3D surface structure from dynamic 2D stimuli relies heavily on first-order (Fourier-energy) motion detectors rather than second-order (non-Fourier) motion detectors13. Experiments utilizing stimuli composed of luminous tokens moving on a less luminous background have shown that whenever first-order motion energy is impaired (such as by alternating the contrast polarity of tokens frame-to-frame), 3D shape identification is correspondingly impaired13. Remarkably, the human KDE computation of surface shape requires only two sequential views to operate effectively, proving that the brain does not require mathematical knowledge of acceleration to perceive an infinite hypnotic tunnel13.

When simulating motion parallax in these environments, two specific sources of depth information are available: the relative motion of texture elements (the expansion-compression optic flow component) and the dynamic covering and uncovering of parts of a farther texture (the accretion-deletion component)14. Research isolating these variables demonstrates that expansion-compression cues contribute massively to depth perception across a broad range of simulated depths, particularly at smaller depths, whereas accretion-deletion cues contribute primarily at larger depths and only effectively when relative motion is already present14. Therefore, a highly effective hypnotic Three.js scene must prioritize smooth expansion-compression velocity gradients over complex geometry occlusion.

Cortical Entrainment via Steady-State Visual Evoked Potentials

While the motion aftereffect and the kinetic depth effect manipulate perceptual interpretation and depth inference, the continuous presentation of rotating, high-contrast spirals can directly entrain the electrical activity of the human brain. This profound physiological phenomenon is known as Steady-State Visual Evoked Potentials (SSVEPs)15. SSVEPs are highly robust oscillatory brain responses elicited in the electroencephalogram (EEG) that perfectly match the temporal frequency, as well as its specific harmonics and subharmonics, of a repetitive visual stimulus15.

When an observer fixates on a high-frequency hypnotic spiral, the SSVEP signal does not remain localized. Source localization analyses using low-resolution brain electromagnetic tomography (sLORETA) reveal that the primary cortical sources involved in generating the SSVEP response reside deep within the primary visual cortex, specifically within the Cuneus in Brodmann area 19, alongside significant contributions from V1 (Brodmann area 17\) and V2 (Brodmann area 18\)18. From these primary occipital sites, the SSVEP propagates anteriorly as a sweeping traveling wave across the parieto-occipital sites. This wave exhibits a rapid phase velocity of approximately 8 to 14 meters per second and a spatial wavelength ranging between 21 and 24 centimeters18. The spatial properties of this wave are highly sensitive to the input frequency; higher stimulation frequencies actively generate faster propagation speeds across the cortex18.

The precise frequency of the visual stimulation drastically alters both the subjective experience of the user and the stability of the neural entrainment. The relationship between SSVEP amplitude and stimulation frequency generally exhibits three distinct maxima, each corresponding to different neural pathways and psychological states.

 

The temporal dynamics of these responses dictate how a digital hypnotic experience should be paced. Sustained stimulation at a static 15 Hz or 20 Hz frequency will initially captivate the user, but the SSVEP amplitude will undergo a fast exponential decline due to severe neural habituation16. Consequently, to maintain deep hypnotic fascination and prevent perceptual burnout, a digital spiral engineered in Three.js must dynamically modulate its rotational frequency rather than maintaining a static speed throughout the experience.

Furthermore, traditional Brain-Computer Interfaces (BCIs) have historically relied on harsh flickering stimuli to evoke SSVEPs, leading to severe visual fatigue and discomfort19. Recent advancements in neuroergonomics have demonstrated that utilizing continuously spinning or rotating icons—such as a smooth hypnotic spiral rotating around its vertical axis—evokes highly reliable SSVEPs that perform equally well in terms of classification accuracy while appearing vastly more natural and significantly less stressful to the human eye20. This proves that smooth geometric rotation is a vastly superior mechanism for cortical entrainment compared to aggressive stroboscopic flashing.

Interestingly, the amplitude of the SSVEP is also modulated by the user's cognitive state, specifically their level of mental engagement. Research utilizing the Sustained Attention to Response Task (SART) has shown that the SSVEP evoked by flickering visual stimuli successfully distinguishes between "sticky" off-task thinking (where a participant is completely absorbed in task-unrelated thoughts, such as deep worries or hypnotic absorption) and less sticky thinking21. The SSVEP is highly sensitive to states where the brain is strongly perceptually decoupled from the immediate external environment, making it an excellent biomarker for the depth of a digitally induced trance21.

Mathematical Construction and Geometry in Three.js

Translating these complex psychophysical and neurobiological phenomena into tangible digital artifacts requires mapping continuous mathematical functions into discrete 3D geometries. The Three.js library provides a highly robust set of mathematical classes and geometry generators necessary for constructing these forms.

Mathematical Parameterization of the Spiral

To generate an effective hypnotic environment, one must select the appropriate mathematical foundation. The most common curves utilized are the Archimedean spiral (where the radius grows linearly with the angle) and the logarithmic spiral (where the radius grows exponentially).

The logarithmic spiral is characterized by the unique property that the angle between the tangent and the radial line at any point remains perfectly constant. In standard polar coordinates [Figure omitted from source export], it is defined simply as:

[Figure omitted from source export]

Where [Figure omitted from source export] controls the initial starting radius and [Figure omitted from source export] controls the exponential rate of expansion. When extended into three-dimensional space for advanced WebGL applications, generalized logarithmic spirals can be decoupled into in-plane and out-of-plane motions. This mathematical decoupling yields trajectories that maintain the generalized energy and angular momentum integrals found in planar problems22.

Depending strictly on the sign of the constant of the generalized energy, these 3D spirals bifurcate into three distinct subfamilies22:

1. Elliptic Spirals: These are entirely bounded, symmetric, and never escape to infinity, making them ideal for closed-loop hypnotic structures22.

2. Parabolic Spirals: These are mathematically equivalent to standard continuous logarithmic spirals22.

3. Hyperbolic Spirals: These feature one or two extreme asymptotes, allowing for the generation of violent, rapid visual exits from the hypnotic tunnel22.

Path Generation with THREE.Curve

In Three.js, developers define continuous 3D mathematical paths by extending the core THREE.Curve class and overriding the internal getPoint(t) method. The parameter [Figure omitted from source export] is a normalized float strictly bounded between [Figure omitted from source export] and [Figure omitted from source export], representing the progression along the total length of the curve23.

To implement a custom 3D logarithmic spiral curve, the mathematical parameterization is explicitly mapped to Cartesian space [Figure omitted from source export]:

 

 

 

JavaScript

class HypnoticLogarithmicSpiral extends THREE.Curve {     constructor(revolutions \= 5, radiusSpread \= 10, heightSpread \= 20) {         super();         this.revolutions \= revolutions;         this.radiusSpread \= radiusSpread;         this.heightSpread \= heightSpread;     }

    getPoint(t, optionalTarget \= new THREE.Vector3()) {         const theta \= t \ this.revolutions \ Math.PI \ 2;         // Exponential radius mapping for true logarithmic feel         const currentRadius \= Math.exp(t \ 2) \ (this.radiusSpread / Math.exp(2));                  const x \= Math.cos(theta) \ currentRadius;         const y \= (t \- 0.5) \ this.heightSpread; // Linear progression along the Y depth axis         const z \= Math.sin(theta) \ currentRadius;

        return optionalTarget.set(x, y, z);     } }

Alternatively, if a spiral is defined by a discrete set of procedurally generated anchor points (perhaps derived from a dataset or an external audio array), developers can utilize THREE.CatmullRomCurve3. This built-in class performs complex spline interpolation across an array of THREE.Vector3 objects25. The behavior of this curve is highly dependent on its constructor arguments. The curve type should generally be set to centripetal or chordal rather than the default catmullrom, as these types actively prevent the self-intersection loops and harsh geometric kinks common in uniform splines25. Furthermore, adjusting the tension parameter (e.g., passing 0.025 instead of higher values) ensures a smooth, sweeping hypnotic traversal path that does not induce jagged visual artifacts27.

Meshing with THREE.TubeGeometry and the Frenet Frame Problem

Once the mathematical path is firmly defined in memory, physical volume is added to the scene using THREE.TubeGeometry(path, tubularSegments, radius, radialSegments, closed)23. This specific geometry class extrudes a circular cross-section repeatedly along the evaluated path of the curve23.

A critical and mathematically notorious challenge in generating procedural 3D spirals via TubeGeometry is managing the Frenet-Serret frame. The Frenet frame relies on continuously calculating the curve's tangent, normal, and binormal vectors to properly orient the tube's cross-section at every segment. In steeply winding 3D spirals, standard parallel transport algorithms frequently suffer from gimbal lock or sudden axis flipping, causing the resulting geometry to pinch, flatten, or twist violently by 90 degrees24.

This specific flipping occurs when the evaluated tangent of the curve aligns precisely with the world UP vector. When this alignment happens, the cross-product utilized to calculate the initial normal evaluates to zero, catastrophically inverting the coordinate space. To circumvent this in complex Three.js applications, developers often have to manually override the initialNormal3() calculation within the Three.js source code (e.g., forcing the normal to lock to the Z-axis by commenting out the X and Y conditional checks), or carefully restrict the mathematical parameterization of the spiral such that the tangent never perfectly coincides with the secondary reference axis24.

Furthermore, to ensure high visual fidelity and prevent the illusion from breaking, it is critical to set the tubularSegments parameter sufficiently high. While a default of 64 segments might suffice for a simple path, a dense hypnotic spiral often requires 300 to 500 segments to prevent the visual appearance of sharp, un-hypnotic polygons at the curve's control vertices23.

Performance Optimization via Instancing and Curve Modifiers

Rendering massive arrays of complex spiral geometry can quickly bottleneck the CPU through excessive draw calls. To optimize performance, particularly when multiple overlapping spirals are required for a deep visual trance, developers must leverage instancing. The Three.js CurveModifier and InstancedFlow modules allow a single complex mesh (such as a highly detailed text geometry or an intricate shard) to be instanced and animated seamlessly along a mathematical curve28.

By defining an InstancedFlow object and passing the number of instances and the total number of curves (e.g., 8 instances traveling across 4 separate curves), the entire complex scene is reduced to a single, highly performant WebGL draw call28. Individual instances can be offset along the curve randomly using flow.moveIndividualAlongCurve(), and their base colors can be dynamically altered using flow.object3D.setColorAt(), ensuring that the hypnotic effect remains visually dense without compromising the strict 60 frames-per-second requirement vital for maintaining cortical entrainment28.

Pixel-Level Procedural Rendering via GLSL Fragment Shaders

While generating spirals via discrete polygon geometry is effective, a far more performant and visually pristine method involves mathematical procedural generation directly at the pixel level. By bypassing the standard vertex triangulation pipeline entirely and utilizing custom OpenGL Shading Language (GLSL) fragment shaders applied to screen-filling quads, developers can evaluate infinite, perfectly smooth spirals via raymarching and 2D signed distance fields (SDFs).

Cartesian to Polar Coordinate Transformations

The fundamental mathematical technique for generating procedural spiral shaders requires transforming the normalized Cartesian screen coordinates [Figure omitted from source export] or [Figure omitted from source export] into polar coordinates [Figure omitted from source export]. In GLSL, the default fragment coordinate system (gl\_FragCoord.xy) is inherently rectangular, strictly bounded by the viewport resolution31.

To effectively map the fragment coordinate to the center of the screen and calculate its true polar representation, the following vector math is executed per-pixel:

 

 

 

OpenGL Shading Language

// Normalize pixel coordinates to a \[0.0, 1.0\] range vec2 uv \= gl\_FragCoord.xy / u\_resolution.xy; // Shift the origin from the bottom-left to the exact center (0,0) uv \= uv \ 2.0 \- 1.0;  // Correct the aspect ratio to prevent elliptical distortion uv.x \= u\_resolution.x / u\_resolution.y; 

// Cartesian to Polar conversion float r \= length(uv); float theta \= atan(uv.y, uv.x);

The native GLSL atan(y, x) function (which operates identically to atan2 in other mathematical libraries) calculates the precise angle relative to the positive x-axis, returning a value securely in the interval [Figure omitted from source export]33. To make the math easier to manipulate, this angle is frequently normalized to a [Figure omitted from source export] or [Figure omitted from source export] range by dividing it by [Figure omitted from source export] (often defined globally via a \#define TAU 6.28318 macro)31.

Constructing Procedural Logarithmic Spirals

With a robust polar coordinate system established, generating a hypnotic spiral becomes an exercise in mathematical modulo operations and logarithmic scaling. A highly effective base equation for a shader-driven logarithmic spiral connects the radius [Figure omitted from source export] to the angle [Figure omitted from source export]. To generate the endlessly repeating "arms" of the spiral, the fractional component of the combined polar coordinates is extracted using fract() or mod()31.

An elegant logarithmic spiral formulation relies on applying a modulus to the natural logarithm of the radius, heavily offset by time to simulate continuous, infinite inward or outward motion36:

 

 

 

OpenGL Shading Language

float arms \= 6.0; float speed \= 0.4; float s \= 0.5; // Controls spiral tightness and frequency

// Logarithmic spiral domain repetition float r\_log \= log(r); float spiralValue \= mod(r\_log \- u\_time \ speed, s) \- 0.5 \ s;

By explicitly binding the u\_time uniform (continuously fed from the JavaScript requestAnimationFrame loop) to the mathematical function, the visual cortex of the observer is subjected to continuous velocity gradients. This mathematical motion reliably triggers the kinetic depth effect and the motion aftereffect simultaneously, coercing the brain into perceiving immense 3D depth from a perfectly flat 2D shader8.

For even deeper hypnotic fascination, developers can incorporate complex number arithmetic directly into the GLSL shader to generate infinite fractal spirals, such as the Mandelbrot set. By taking a complex number [Figure omitted from source export] corresponding to the screen coordinates, squaring the previous sequence value, and adding [Figure omitted from source export] recursively until the point escapes a defined radius, shaders can generate micro-spirals that exhibit infinite self-similarity37.

Anti-Aliasing via Smoothstep and Standard Derivatives

A pervasive and visually destructive issue with procedural high-frequency spiral shaders is aliasing. Because the spiral mathematical function is evaluated independently per-pixel, dense areas of the spiral—particularly near the origin where the spiral arms converge infinitely toward the singularity—will exhibit severe moiré patterns, jagged pixelation, and visual noise.

To resolve this, naive binary thresholding operations (such as the step(edge, x) function, which returns a hard 0.0 or 1.0) must be aggressively replaced with smooth Hermite interpolation using the native GLSL hardware-accelerated smoothstep(edge0, edge1, x) function38. The smoothstep function returns 0.0 if [Figure omitted from source export], 1.0 if [Figure omitted from source export], and performs a mathematically smooth [Figure omitted from source export] interpolation for values falling in between the edges35.

 

For ultimate rendering precision, advanced graphics programmers completely abandon manual edge definitions and employ standard derivatives (dFdx, dFdy, or the combined fwidth) via the GL\_OES\_standard\_derivatives extension. This extension allows the GPU to dynamically calculate the necessary width of the smoothstep edge based entirely on the local pixel density and the mathematical slope of the fragment41. By utilizing an anti-aliased step function (such as the open-source aastep utility), the threshold is evaluated across the exact physical width of a single fragment. This ensures that the spiral remains perfectly sharp yet completely free of jagged artifacts at any level of magnification or depth41.

Next-Generation Paradigms: Three.js Shading Language (TSL) and WebGPU

The traditional paradigm of injecting string-based GLSL snippets into standard Three.js materials via the precarious onBeforeCompile hook is being aggressively phased out in favor of the Three.js Shading Language (TSL) and the newly stabilized WebGPU renderer43. TSL represents a massive architectural paradigm shift: it is a robust, node-based shader abstraction written entirely in JavaScript and TypeScript, allowing developers to construct modular, type-safe shader graphs without ever touching raw GLSL strings43.

Instead of concatenating fragile GLSL macros, a hypnotic procedural material is built using THREE.MeshStandardNodeMaterial and imported TSL functions like uv(), texture(), timerLocal(), and Fn()43. TSL compiles these Abstract Syntax Tree (AST) node graphs automatically into WGSL (for modern WebGPU contexts) or GLSL (as a fallback for WebGL). Crucially, the compiler simultaneously performs aggressive internal optimizations—such as eliminating redundant mathematical expressions, automatically reusing uniforms, and dynamically converting varying variables43.

An equivalent TSL snippet designed to generate a time-animated procedural coordinate distortion for a hypnotic material might look like:

 

 

 

JavaScript

import { Fn, uv, timerLocal, vec2, length, atan2, sin, cos, texture } from 'three/tsl';

const generateSpiralUV \= Fn(() \=\> {     const st \= uv().sub(0.5).mul(2.0); // Center the coordinates     const r \= length(st);     const theta \= atan2(st.y, st.x);          // Add aggressive time-based rotation for the kinetic depth effect     const animatedTheta \= theta.add(timerLocal().mul(2.5));          // Reconstruct Cartesian space for the final texture mapping     const finalX \= r.mul(cos(animatedTheta));     const finalY \= r.mul(sin(animatedTheta));          return vec2(finalX, finalY).add(0.5); });

const material \= new THREE.MeshBasicNodeMaterial(); material.colorNode \= texture(hypnoticTexture, generateSpiralUV());

This modern architecture drastically simplifies the integration of complex procedural mathematics with standard physically-based rendering (PBR) pipelines. By utilizing TSL, the hypnotic spiral geometry can interact seamlessly with scene lighting, soft shadows, and environment maps without the developer needing to meticulously rewire the internal shader logic43. Furthermore, TSL provides unprecedented access to internal renderer buffers through functions like viewportSharedTexture() and viewportLinearDepth(), allowing for advanced depth-based blending and post-processing directly within the material node graph43.

Multisensory Augmentation: Post-Processing and Audio Reactivity

A bare procedural spiral or floating tube geometry is visually interesting, but achieving a truly immersive "hypnotic" trance state requires multi-sensory synchronization and the application of advanced optical glow effects.

UnrealBloomPass and Emissive Thresholding

To create the signature ethereal glow strongly associated with digital hypnosis, developers utilize the Three.js EffectComposer pipeline. The most critical and frequently deployed post-processing node in this pipeline is the UnrealBloomPass, which artificially simulates the way intense light scatters inside a real-world camera lens or the human eye46.

The standard bloom effect is achieved by rendering the entire scene, isolating the brightest pixels that exceed a defined limit, downsampling those pixels through a series of escalating Gaussian blurs, and finally additively blending them back onto the original high-resolution render47. The precise visual impact is explicitly controlled via three primary constructor arguments: resolution, strength, and radius, along with the crucial threshold property50.

By default, bloom can look overly washed out. If the threshold is explicitly set to 1.0 (assuming internal tone mapping is disabled), standard PBR materials bounded strictly in the [Figure omitted from source export] color space will not trigger the bloom51. By selectively setting the emissive values of specific spiral rings to push far beyond 1.0 (e.g., passing a hyper-illuminated THREE.Color(2.0, 5.0, 2.0)), the UnrealBloomPass will selectively glow only those specific high-intensity bands, creating a stunning neon contrast46. Because bloom is heavily reliant on processing multiple render targets, it is a massive performance sink. Lowering the internal resolution of the bloom render target (e.g., passing new THREE.Vector2(window.innerWidth / 2, window.innerHeight / 2)) significantly improves rendering performance on mobile devices without drastically degrading the aesthetic quality of the soft, blurred glow52.

Furthermore, developers often interlace the bloom pass with a custom ShaderPass executing chromatic aberration. By mathematically offsetting the Red, Green, and Blue texture sampling coordinates based on the pixel's distance from the center—often utilizing the Cauchy spectral Index of Refraction (IOR) where red ([Figure omitted from source export]) is [Figure omitted from source export], green ([Figure omitted from source export]) is [Figure omitted from source export], and blue ([Figure omitted from source export]) is [Figure omitted from source export]—the edges of the spiral gain a prismatic, dispersive color fringe47. This brilliantly mimics the optical distortion of a thick glass lens, heavily disorienting the observer's peripheral depth perception54.

Real-Time Audio Cortical Synchronization

The entrainment of the visual cortex via SSVEPs is exponentially magnified when perfectly synchronized with rhythmic auditory stimuli. The browser's native Web Audio API provides the robust infrastructure required to link the geometric and shader parameters of the Three.js scene directly to the frequency spectrum of a playing audio track in real-time57.

By routing an HTML \<audio\> element or a live microphone input through a standard AudioContext and into an AnalyserNode, developers can extract high-fidelity frequency data using the getByteFrequencyData(array) method59. This array contains amplitude values (ranging from 0 to 255\) distributed across the entire human hearing spectrum resulting from a Fast Fourier Transform (FFT).

Advanced audio-reactive algorithms segment this massive data array into distinct, manageable frequency bins:

• Bass Frequencies: Typically extracted from the lowest indices (e.g., dataArray.slice(0, 10)), the bass average is mapped directly to the global scale of the scene or the camera zoom, creating a visceral, pulsing heartbeat effect57.
• Mid-Range Frequencies: Mapped to the structural deformation of the spiral vertices, creating wave-like organic movements across the geometry57.
• Treble Frequencies: Extracted from the higher spectrum (e.g., dataArray.slice(128, 256)), the treble average is mapped to high-frequency color shifts or random jitter vectors, violently altering the chromatic aberration intensity during cymbal crashes or high synths57.

These calculated frequency averages are passed directly into the GLSL or TSL shaders as dynamic uniforms on every single frame59. To prevent the visualizer from appearing overly chaotic and inducing severe eye strain, the extracted raw audio forces must be smoothed using mathematical interpolation (such as a localized lerp) or damped physics constraints before they are permitted to aggressively influence the geometry positions57.

Neurological Safety, Accessibility, and WCAG Compliance

The engineering of potent hypnotic visuals carries a severe ethical and technical responsibility. The precise neurological mechanisms that make these 3D spirals visually compelling—high contrast, rapid geometric flashing, and continuous patterned motion—are the exact clinical triggers for Photosensitive Epilepsy (PSE) and severe vestibular disorders61.

Photosensitive Triggers and the WCAG 2.3.1 Threshold

The Web Content Accessibility Guidelines (WCAG) dictate extremely strict safety thresholds designed to prevent visually induced seizures on the web. Under WCAG Success Criterion 2.3.1 (Three Flashes or Below Threshold, Level A), a web page must not contain any content that flashes more than three times per second (3 Hz)63.

Following extensive research, the Epilepsy Foundation of America established that a visual flash becomes a critical health hazard if it meets all three of the following environmental conditions simultaneously61:

1. Luminance: Occurs with a severe luminance change of at least [Figure omitted from source export].

2. Frequency: Flashes at a rapid frequency of [Figure omitted from source export].

3. Spatial Area: Occupies a solid visual angle of [Figure omitted from source export] (which equates to roughly 10% of the user's central visual field when viewed on a standard desktop monitor).

Because a hypnotic spiral inherently occupies the vast majority of the user's central visual field by design, alternating high-contrast spiral arms (such as stark black and white bands) passing rapidly over the retina easily surpass the spatial area threshold. If the rotational speed of the shader or geometry results in alternating light and dark bands crossing the fovea at rates exceeding 3 Hz, the Three.js application actively risks triggering a grand mal seizure in susceptible individuals61. Additionally, when overlaying UI elements on top of these intense WebGL backgrounds, developers must maintain a minimum 3:1 color contrast ratio for non-text UI components to ensure basic usability66.

Mitigating Vestibular Discomfort via prefers-reduced-motion

In addition to the strict risks of epilepsy, persistent and unavoidable optic flow that simulates 3D forward translation—the kinetic depth effect—can trigger severe nausea, dizziness, and vestibular migraines in individuals with motion sensitivity62.

To comply with modern accessibility standards and prevent user abandonment, developers must explicitly detect and respect the operating system's global accessibility settings using the CSS media query prefers-reduced-motion62. However, in a JavaScript-driven Three.js environment, CSS media queries alone are entirely insufficient to halt WebGL render loops. The application must programmatically query the browser's matchMedia API to tap into this setting:

 

 

 

JavaScript

// Query the OS-level accessibility preference const motionQuery \= window.matchMedia("(prefers-reduced-motion: reduce)");

function updateAnimationState() {     if (motionQuery.matches) {         // Halt spiral rotation, disable flashing bloom effects, and clamp time uniforms         spiralMaterial.uniforms.u\_speed.value \= 0.0;         bloomPass.strength \= 0.0;         // Optionally swap the animated mesh for a static fallback image     } else {         // Safe to run audio-reactive animations and high-speed rotations         spiralMaterial.uniforms.u\_speed.value \= 2.0;         bloomPass.strength \= 1.5;     } }

// Listen for dynamic changes to OS settings while the canvas is actively running motionQuery.addEventListener('change', updateAnimationState);

Crucially, the reduce value evaluated by the browser is not a mandate to completely eliminate all visual output or ruin the design of the application; rather, it is a discrete signal requesting the removal of specific vestibular motion triggers69. When prefers-reduced-motion: reduce is detected, developers should immediately halt rotational velocities, neutralize simulated camera translations along the Z-axis, and entirely replace stroboscopic flashes or rapid state changes with gentle, slow opacity cross-fades that do not trigger motion sickness62. To thoroughly audit this functionality during development, engineers can utilize the hidden "Rendering" tab inside Google Chrome DevTools to artificially emulate the prefers-reduced-motion feature, ensuring the WebGL fallbacks engage flawlessly70.

Conclusion

The construction of three-dimensional hypnotic spirals utilizing the Three.js library is a deeply complex synthesis of cognitive science, higher-order mathematical geometry, and advanced graphics programming. By intentionally utilizing the unique mathematical properties of logarithmic curves and exploiting deeply rooted psychophysical phenomena—such as the motion aftereffect, the kinetic depth effect, and steady-state visual evoked potentials—developers can transcend simple pixel manipulation. Instead, they can directly influence the observer's spatial awareness, depth inference, and underlying cortical rhythms.

The modern transition from standard polygonal meshing to advanced GLSL raymarching and TSL-based node graphs provides the absolute rendering precision necessary to execute these visuals flawlessly without bottlenecking the CPU. Coupled with the seamless integration of the Web Audio API for real-time multi-sensory synchronization and the UnrealBloomPass for creating massive aesthetic depth and glow, the modern browser is fully capable of rendering clinical-grade psychophysical stimuli.

However, wielding this level of visual power demands rigorous architectural and ethical oversight. Continuous algorithmic monitoring of geometric flashing frequencies, strict adherence to luminance contrast ratios, and the programmatic enforcement of hardware-level user accessibility preferences are not merely graphical best practices. They are absolute medical necessities designed to ensure the immediate neurological safety and well-being of the end-user interacting with the digital environment.

This is for informational purposes only. For medical advice or diagnosis, consult a professional.

Works cited

1. The motion aftereffect \- PubMed, https://pubmed.ncbi.nlm.nih.gov/21227087/

2. Motion Aftereffect \- Cognitive Train, https://cognitivetrain.com/motion-aftereffect-illusion/

3. Spiral aftereffect \- Michael Bach, https://michaelbach.de/ot/mot-adaptSpiral/

4. Spiral Aftereffect, https://isle.hanover.edu/isle2/Ch08Motion/Ch08SpiralAftereffect.html

5. The Power of Visual Motion Priming | Psychology Today, https://www.psychologytoday.com/us/blog/illusions-delusions-and-reality/202209/the-power-visual-motion-priming

6. a new twist to the perception of rotating spirals \- PubMed, https://pubmed.ncbi.nlm.nih.gov/1513669/

7. On the kinetic depth effect \- PubMed, https://pubmed.ncbi.nlm.nih.gov/2719982/

8. Kinetic depth effect and identification of shape \- PubMed, https://pubmed.ncbi.nlm.nih.gov/2531214/

9. Depth Perception through Circular Movements of Dots \- ResearchGate, https://www.researchgate.net/publication/46280348\_Depth\_Perception\_through\_Circular\_Movements\_of\_Dots

10. Integration time for the perception of depth from motion parallax \- PMC, https://pmc.ncbi.nlm.nih.gov/articles/PMC3349336/

11. The physiological locus of the spiral after-effect. \- ROSA P, https://rosap.ntl.bts.gov/view/dot/20725

12. Depth perception through circular movements of dots \- PubMed, https://pubmed.ncbi.nlm.nih.gov/20842969/

13. The kinetic depth effect and optic flow--II. First- and second-order, https://pubmed.ncbi.nlm.nih.gov/2035270/

14. Depth perception from dynamic occlusion in motion parallax \- PMC, https://pmc.ncbi.nlm.nih.gov/articles/PMC4521857/

15. SSVEP phase synchronies and propagation during repetitive visual, https://pmc.ncbi.nlm.nih.gov/articles/PMC7925656/

16. Frequency-dependent dynamics of steady-state visual evoked, https://pmc.ncbi.nlm.nih.gov/articles/PMC11039735/

17. Brain Oscillation Entrainment by Perceptible and Non ... \- Frontiers, https://www.frontiersin.org/journals/neuroergonomics/articles/10.3389/fnrgo.2021.646225/full

18. SSVEP phase synchronies and propagation during repetitive visual, https://pubmed.ncbi.nlm.nih.gov/33654157/

19. (PDF) SSVEP phase synchronies and propagation during repetitive, https://www.researchgate.net/publication/349730775\_SSVEP\_phase\_synchronies\_and\_propagation\_during\_repetitive\_visual\_stimulation\_at\_high\_frequencies

20. Introducing a Novel SSVEP-BCI Paradigm Based on Rotation, https://www.youtube.com/watch?v=fVO7Tt0LiVc

21. The steady state visual evoked potential (SSVEP) tracks “sticky, https://www.frontiersin.org/journals/human-neuroscience/articles/10.3389/fnhum.2022.892863/full

22. Geometry of a 3D generalized logarithmic spiral \- ResearchGate, https://www.researchgate.net/figure/Geometry-of-a-3D-generalized-logarithmic-spiral\_fig1\_295091932

23. TubeGeometry – three.js docs, https://threejs.org/docs/pages/TubeGeometry.html

24. Threejs TubeGeometry: Applying custom curve causes unexpected, https://stackoverflow.com/questions/31660099/threejs-tubegeometry-applying-custom-curve-causes-unexpected-twisting

25. CatmullRomCurve3 – three.js docs, https://threejs.org/docs/pages/CatmullRomCurve3.html

26. Infinite Tubes with Three.js \- Codrops, https://tympanus.net/codrops/2017/05/09/infinite-tubes-with-three-js/

27. How can I make good tube with three.js? for example railings, https://discourse.threejs.org/t/how-can-i-make-good-tube-with-three-js-for-example-railings/79506

28. Curve Modifiers in Three.js \- Medium, https://medium.com/samsung-internet-dev/curve-modifiers-in-three-js-1ada72c61677

29. Tube Geometry in threejs | Dustin John Pfister at github pages, https://dustinpfister.github.io/2023/06/02/threejs-tube-geometry/

30. Creating a long TubeGeometry along a long SplineCurve3 \- GitHub, https://github.com/mrdoob/three.js/issues/5503

31. A spirals bonanza from a few simple polar formulas, https://inputrandomness.com/a-spirals-bonanza-from-a-few-simple-polar-formulas/

32. Mini Lecture \- A GLSL Tutorial in Practice \- Plasma Pip, https://www.plasmapip.com/post/07\_mini-lecture-GLSL

33. Polar Coordinates | Ronja's tutorials, https://www.ronja-tutorials.com/post/053-polar-coordinates/

34. Connecting two points with a 3D logarithmic spiral (Julia), https://stackoverflow.com/questions/73072738/connecting-two-points-with-a-3d-logarithmic-spiral-julia

35. smoothstep \- GLSL 4 \- docs.gl, https://docs.gl/sl4/smoothstep

36. A tutorial on logarithmic spirals : r/GraphicsProgramming \- Reddit, https://www.reddit.com/r/GraphicsProgramming/comments/1p3vlw3/a\_tutorial\_on\_logarithmic\_spirals/

37. Create INFINITE ART with MATH (and code) \- Hack Club Jams, https://jams.hackclub.com/jam/glsl-shaders

38. smoothstep \- p5.js, https://beta.p5js.org/reference/p5/smoothstep

39. GLSL Concepts, Simply Explained \- Medium, https://medium.com/@eclairwastaken/glsl-concepts-explained-like-you-are-10-363e72b47e61

40. Shaping functions \- The Book of Shaders, https://thebookofshaders.com/05/

41. glsl-aastep \- anti-alias smoothstep utility function \- GitHub, https://github.com/glslify/glsl-aastep

42. Anti-Aliasing simple circle fragment shader, https://computergraphics.stackexchange.com/questions/12728/anti-aliasing-simple-circle-fragment-shader

43. Three.js Shading Language \- GitHub, https://github.com/mrdoob/three.js/wiki/Three.js-Shading-Language

44. Intro to Three.js Shading Language (TSL) \- YouTube, https://www.youtube.com/watch?v=dlrVCxsq1tE

45. Three.JS WebGPURenderer Part 1: Fragment/Vertex Shaders, https://medium.com/@christianhelgeson/three-js-webgpurenderer-part-1-fragment-vertex-shaders-1070063447f0

46. Unreal Bloom Selective \- Three.js Post Processing, https://waelyasmina.net/articles/unreal-bloom-selective-threejs-post-processing/

47. Post-processing \- Sangil Lee, https://sangillee.com/2025-01-15-post-processing/

48. Unreal Bloom Pass \- Three.js Post-Processing Tutorial \- YouTube, https://www.youtube.com/watch?v=ZtK70Tb9uqg

49. What does the threshold in unrealbloompass means and how to, https://discourse.threejs.org/t/what-does-the-threshold-in-unrealbloompass-means-and-how-to-make-a-color-just-pass-that-threshold-a-bit-how-to-calculate-the-threshold-for-a-color/60984

50. UnrealBloomPass – three.js docs, https://threejs.org/docs/pages/UnrealBloomPass.html

51. How does the selective UnrealBloomPass work? : r/threejs \- Reddit, https://www.reddit.com/r/threejs/comments/12s8mdf/how\_does\_the\_selective\_unrealbloompass\_work/

52. Three.js Performance Optimization Checklist \- GitHub, https://github.com/freshtechbro/claudedesignskills/blob/main/plugins/bundles/core-3d-animation/skills/threejs-webgl/references/optimization\_checklist.md

53. 100 Three.js Tips That Actually Improve Performance (2026) \- Utsubo, https://www.utsubo.com/blog/threejs-best-practices-100-tips

54. Three.js Refractive Shader with Chromatic Aberration \- LB Project Blog, https://blog.lbproject.dev/creating-a-refractive-material-with-chromatic-aberration-in-three-js

55. ShaderPass – three.js docs, https://threejs.org/docs/pages/ShaderPass.html

56. Chromatic Aberration effect pass to compensate for Variable, https://github.com/mrdoob/three.js/issues/8144

57. Audio Reactive Particles in Three.js, https://threejsdemos.com/demos/audio/particles

58. Coding a 3D Audio Visualizer with Three.js, GSAP & Web... \- daily.dev, https://daily.dev/posts/coding-a-3d-audio-visualizer-with-three-js-gsap-web-audio-api-qgrwd8t87

59. Coding a 3D Audio Visualizer with Three.js, GSAP & Web Audio API, https://tympanus.net/codrops/2025/06/18/coding-a-3d-audio-visualizer-with-three-js-gsap-web-audio-api/

60. How to create a grid of points reactive to audio \- three.js forum, https://discourse.threejs.org/t/how-to-create-a-grid-of-points-reactive-to-audio/60273

61. Web accessibility for seizures and physical reactions \- MDN Web Docs, https://developer.mozilla.org/en-US/docs/Web/Accessibility/Guides/Seizure\_disorders

62. What is Reduced Motion Preference? · Rocket Validator Glossary, https://rocketvalidator.com/glossary/reduced-motion-preference

63. Assessment report \- Crown GDPR and ADA Compliance, https://crown.gcgforge.com/AssessmentReport\_20190516\_CrownLaboratoriesSki.html

64. The 2025 TestParty Guide to WCAG 2.3.1 – Three Flashes or Below, https://testparty.ai/blog/wcag-2-3-1-three-flashes-or-below-threshold-2025-guide

65. Web Accessibility: Understanding Colors and Luminance, https://developer.mozilla.org/en-US/docs/Web/Accessibility/Guides/Colors\_and\_Luminance

66. VPAT Accessibility Conformance Report \- Elsevier, https://supportcontent.elsevier.com/RightNow%20Next%20Gen/Evolve/11544/Clinical%20Practice%20Readiness%20Assessment%20VPAT%20-%20April%202026.pdf

67. 11\. Accessible canvases \- Scrawl-canvas, https://www.scrawl-v8.rikweb.org.uk/learn/eleventh-lesson/

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

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

70. Hiding the Movement \- GIFs, Play Buttons and prefers-reduced-motion, https://dev.to/eevajonnapanula/hiding-the-movement-gifs-play-buttons-and-prefers-reduced-motion-3499

71. What is Motion Sensitivity? How to Design Accessible Web Animations, https://www.freecodecamp.org/news/web-sensitivity-how-to-design-accessible-animations/