Visual
Audio-Reactive
Three.js
Aug 26, 2025
0 views
SC ThreeJS Audio Particles is an audio-reactive particle field powered by Three.js and custom GLSL shaders. Particles swirl with curl-noise motion, expand and pulse to live microphone input, and color-shift across low/mid/high bands. Supports mouse orbit or gyroscope look controls and runs as a full-bleed WebGL canvas inside Framer. Great for music heroes, landing backgrounds, VJ loops, or meditative reactive visuals.
//
Tags
Drop SC-ThreeJS AudioParticles into a frame (it auto-sizes to the container).
Set particleCount (start 1500–3000 on laptops).
Choose bgColor / lowColor / midColor / highColor as GLSL vec3(r,g,b) values (0–1).
Adjust camera: cameraZ (orbit radius), FOV, near/far.
Interaction: enable Mouse (desktop) or Gyro Control (mobile).
Click once to grant mic permission and start audio reactivity.
Club Visual: particleCount=3500 · cameraZ=1.4 · low=vec3(0.1,0.4,1.0) · mid=vec3(1.0,0.4,0.1) · high=vec3(1.0,0.1,0.4)
Calm Ambient: particleCount=1800 · cameraZ=1.8 · low=vec3(0.2,0.6,0.9) · mid=vec3(0.2,0.9,0.6) · high=vec3(0.9,0.2,0.6)
Monochrome: particleCount=2200 · colors=vec3(1.0,1.0,1.0) · bg=vec3(0.0,0.0,0.0)
Geometry: random points on/in a sphere (cubic distribution with r = cbrt(rand)*2).
Attributes: positions also used as normals for directional cues.
Vertex Shader:
Curl noise field + simplex noise → ordered + chaotic displacement.
Audio uniforms (uAudioLow/Mid/High) modulate expansion, movement, and size.
gl_PointSize scales with audio and perspective.
Fragment Shader: soft circular sprite with inner glow; mixes base and audio-tinted colors.
Audio: Web Audio AnalyserNode (fftSize=512) → frequency averages for low/mid/high bands.
Controls: mouse maps to spherical angles; Gyro uses DeviceOrientation (permission-gated on iOS).
Loop: requestAnimationFrame updates uniforms, camera, and renders.
particleCount dominates cost. Targets:
Mobile: 1200–2200 · Laptops: 2000–4000 · Desktops: 4000–8000.
Prefer smaller pointSize via shader (already dynamic) over more particles.
Avoid excessive bg blur/overlays atop the canvas; they force compositing.
Run in a container sized to need; massive full-screen on 5K displays will be heavy.
Consider lowering analyser fftSize if you fork (256) for fewer allocations.
HTTPS required for mic + sensors.
User gesture required to start audio on Safari/iOS (first click handled).
Works in modern evergreen browsers with WebGL; no SSR rendering.
Decorative by default: wrap with aria-hidden="true" if it conveys no information.
If used behind text, ensure sufficient contrast and avoid rapid strobe effects.
Permissions: Mic access via getUserMedia({audio:true}); Gyro access via DeviceOrientationEvent.requestPermission() on iOS.
Data: Audio stays in-browser; no network calls, logging, or storage.
Hardening: Events are removed on unmount; consider disposing Three.js objects (renderer.dispose(), geometry.dispose(), material.dispose()) in a fork for long-lived pages.
Decorative by default: wrap with aria-hidden="true" if it conveys no information.
If used behind text, ensure sufficient contrast and avoid rapid strobe effects.
Permissions: Mic access via getUserMedia({audio:true}); Gyro access via DeviceOrientationEvent.requestPermission() on iOS.
Data: Audio stays in-browser; no network calls, logging, or storage.
Hardening: Events are removed on unmount; consider disposing Three.js objects (renderer.dispose(), geometry.dispose(), material.dispose()) in a fork for long-lived pages.
Original animation © Jared Stanley; Three.js/GLSL adaptation for Framer © SecretoCho Design (2025).
Jared Stanley
Source Link
SecretoCho Design 2025
Provided “as is” for visual/UX purposes. You’re responsible for obtaining user consent for microphone/sensor usage and validating performance, accessibility, and licensing in your environment.
Stay ahead of the curve with insights into emerging visualization trends and technologies.