THE EFFECTS STUDIO / BROWSER ENGINEERING
See what we can make
the browser do.
Eleven studies. Light that follows you, fields that flow, materials made from mathematics. A small workbench for the things a browser can become.
Rendering diagnostics Local measurements, visible limits
Scheduler cadence measures controller animation callbacks. Actual draw work counts rendered frames; Signal Garden, Glyph Constellation and Refractive Window deliberately skip callbacks between its 30 / 60 fps draws. Render-call durations include these light skip checks. These are CPU-side measurements, not GPU timings or an FPS guarantee. Only the active study is sampled.
- Policy
- Study / lifecycle
- Actual backend
- Allocated buffer
- Scheduler cadence
- Actual draw work
- CPU update / render call
- Live owned resources
- Estimated payload
- Memory snapshot
- Last event
Memory support varies by browser and isolation settings. Unavailable stays unavailable; these values never measure all GPU or browser memory.
FOUNDATIONS / VALUE → FORM
Small rules. Tangible results.
FOUNDATION / Light / Depth
A different perspective.
CSS perspective / Pointer normalization
Find the light. Move across the surface to tilt the form and shift its light. On touch or keyboard, use the two sliders.
Motion. Reduced motion moves the light while keeping the plate flat.
Access. Horizontal and vertical sliders provide keyboard and touch control.
Budget. One static update per input; no continuous loop.
Fallback. The CSS composition remains visible without JavaScript or with Effects off.
How it works
Normalized pointer coordinates map to a bounded CSS perspective transform. Lighting and depth share the same values.
FOUNDATION / Kinetic Spring
A little give.
Damped spring / CSS transforms
Release the spring and watch it overshoot, then find its balance. Showcase adds a stronger impulse.
Motion. Reduced motion acknowledges the impulse with the object at rest.
Access. Release with click, tap, Enter or Space. Set amplitude with the slider.
Budget. Time-based motion settles after 1.8 seconds; hidden and offscreen stages pause.
Fallback. The CSS composition remains visible without JavaScript or with Effects off.
How it works
A damped cosine is evaluated against elapsed milliseconds. It settles at a finite time, so it behaves consistently on different refresh rates.
FOUNDATION / Chromatic Rules
No two ways alike.
CSS gradients / Procedural color
Choose an angle. Shift the hue. A few rules turn into a completely different atmosphere.
Motion. Color and angle update without animation, including with reduced motion.
Access. Native direction and hue sliders work with keyboard and touch.
Budget. No canvas, image download or continuous loop.
Fallback. The CSS composition remains visible without JavaScript or with Effects off.
How it works
Related hues form a layered linear and radial composition. Native controls change CSS custom properties without a canvas.
ADVANCED / STRUCTURE → BEHAVIOR
A field, a journey, a word.
ADVANCED / Trace Field
Give a field direction.
the field.
Canvas 2D / Spatial hashing / Advection
A moving network follows a spatial vector field. Hover to steer, drag the small handle on touch, or set the force and density below. Scrolling adds a vertical impulse.
Motion. Reduced motion draws one field snapshot per deliberate control change.
Access. X force, Y force and density sliders replace pointer interaction. Clear reseeds the field.
Budget. At most 180 / 360 particles and 1.5 / 2 million pixels in Standard / Showcase.
Fallback. A meaningful composition remains visible if Canvas is unavailable, inactive or off.
How it works
Particles advect through a changing trigonometric field. A spatial hash checks nearby cells for short connections instead of comparing every pair. Clear returns to the same deterministic seed.
ADVANCED / Scroll Atlas
A landscape in layers.
Layered DOM / Scroll progress / IntersectionObserver
Scroll through a small journey from the survey line to the horizon. Previous, Next and Scene give you the same journey without scrolling.
Motion. Reduced motion disables scroll scrubbing. Choose a discrete scene with the controls.
Access. Previous, Next and the scene slider give a complete non-scroll path.
Budget. Only scroll and input events update layers; no continuous renderer.
Fallback. The CSS composition remains visible without JavaScript or with Effects off.
How it works
Visible-stage scroll progress offsets three CSS landscape layers at different rates. IntersectionObserver owns visibility. The discrete scene controls work with reduced motion and there is no animation loop.
ADVANCED / Type Lattice
Words, pulled apart.
Canvas 2D / Text sampling / Attraction field
Type a short word, then pull its points toward a focus. Hover, drag the small touch handle, or position the focus with the sliders.
Motion. Each input draws a static composition; no time-driven motion.
Access. Type text and use strength and attractor sliders instead of dragging.
Budget. At most 1,200 / 2,400 points. Text stays in this page; no storage or network.
Fallback. A meaningful composition remains visible if Canvas is unavailable, inactive or off.
How it works
Text is measured and drawn into a small local sampling canvas. Deterministic alpha sampling turns its glyphs into a bounded point cloud. Only points inside the focus radius are attracted.
Text stays in this page. Nothing is sent, logged or saved.
EXPERT / MATHEMATICS → MATERIAL
Color, a system, a surface.
EXPERT / Chromatic Current
Color, in current.
the gradient.
WebGL 1 / Domain-warped noise / Fragment shader
A field of color folds through itself. Move the focus, change its pace, or pause at a composition you like. Sliders and the touch handle offer the same direction.
Motion. Activate to start time. Pause freezes the field; reduced motion redraws only after explicit controls.
Access. Pointer or touch handle steers the field. Horizontal and vertical sliders offer the same control with arrow keys.
Budget. One triangle, one custom shader. Render scale 0.75 / 1 in Standard / Showcase; adaptive scale 0.6.
Fallback. A one-time Canvas color snapshot and a CSS gradient remain useful if WebGL or shader compilation fails. Context loss shows the CSS poster.
How it works
A single oversized triangle covers the stage. Hand-written value noise warps its own coordinates; a signed gradient becomes blue and chartreuse ribbons. Pointer, scale, velocity and elapsed time are uniforms. The fallback uses a one-time 160 × 96 color snapshot over a responsive CSS field.
EXPERT / Signal Garden
A signal takes root.
Shared direction.
WebGL 2 / Transform feedback / Instanced geometry
A thousand small forms share a field. Add a pulse, steer the wind, then reset the garden. Choose the particle budget and watch a system find its shape.
Motion. Reduced motion shows static positions. Pulse changes glyph size without starting a simulation.
Access. Tap Pulse, drag the wind handle, or use horizontal and vertical wind sliders. Reset restores the seed.
Budget. At most 1,024 particles / 30 draws per second in Standard; 2,048 / 60 in Showcase. Slow windows halve the particle cap.
Fallback. Canvas 2D keeps up to 256 particles at a smaller buffer size. If unavailable or context is lost, the static network stays visible.
How it works
WebGL 2 transform feedback alternates two position/velocity buffers. A second program draws six-vertex instanced leaves from the latest buffer, without reading positions back to JavaScript. Simulation and drawing skip controller callbacks to respect the selected 30 / 60 fps cap. Canvas fallback runs the same bounded wind field with at most 256 points.
EXPERT / Material Distance
Light finds the form.
distance.
WebGL 1 / Signed-distance fields / Ray marching
A ring and a softened block, described by distance. Move the light around them. Change the finish from polished to diffuse, or pause their slow turn.
Motion. The forms turn slowly after activation. Pause holds the scene; reduced motion allows static light and material changes.
Access. Native azimuth, elevation and roughness sliders work with keyboard and touch. Reset returns to the first light.
Budget. 64 / 80 march steps in Standard / Showcase. Slow windows reduce scale to 0.6 and steps to 48.
Fallback. CSS material swatches respond to the same light and roughness values when WebGL is unavailable or the context is lost.
How it works
Each fragment marches a ray through signed-distance functions for a torus, a rounded box and a floor. A finite-difference normal drives diffuse and roughness-dependent specular light. The loop stops at a surface, at its distance limit, or after 64 / 80 steps. No mesh, texture, scene library or asset download is involved.
EXPERT / Glyph Constellation
A constellation becomes a word.
WebGL 2 / GPU text morph / Transform feedback
Write a short thought. Gather the constellation into its letters, change the source shape, then bend the target with a gentle force.
Motion. Activate to animate particles seeking a text target. Reduced motion and Pause show one static target per deliberate control change.
Access. A 12-character local text field and native morph, constellation shape and force sliders provide keyboard and touch control.
Budget. 1,024 / 2,048 particles; 30 / 60 animated draws per second. Sampling is fixed at 384 × 96 pixels. Drawing stays within 1.5 / 2 million pixels.
Fallback. Static semantic text with adjustable spacing and a constellation frame remains usable if WebGL 2 or text sampling fails.
Cleanup. Ownership loss releases three buffers, two programs, four shaders, two vertex arrays and two feedback objects; the sampling canvas is zeroed. Lost handles are abandoned until explicit restart.
How it works
A bounded Canvas alpha sample supplies text targets to a WebGL 2 buffer. A transform-feedback program integrates spring forces toward a blend of procedural constellation and glyph targets. Ping-pong buffers carry positions and velocities between frames; a second shader draws circular points. Static updates evaluate the target directly, without running physics.
Text stays in this page. Nothing is sent, logged or saved.
EXPERT / Refractive Window
Look through another surface.
of view.
WebGL 1 / Offscreen framebuffer / Texture refraction
Slide a lens across stripes and a moving disc. Change its size and refractive strength to reveal how a curved surface bends what lies behind it.
Motion. Activate for a slowly changing scene. Reduced motion and Pause allow one static redraw per deliberate input.
Access. Drag the lens handle or use horizontal, vertical, lens radius and refraction sliders with keyboard or touch.
Budget. Two passes at 30 / 60 animated frames per second. One RGBA texture: at most 1,024 pixels per side and 524,288 pixels (2 MiB). Drawing stays within 1.5 / 2 million pixels.
Fallback. An adjustable CSS lens over local stripes stays visible when WebGL or framebuffer allocation fails. No image downloads.
Cleanup. Ownership loss deletes the texture, framebuffer, two buffers, two programs and four shaders. Resize replaces the old target; context loss requires an explicit restart.
How it works
The first WebGL pass generates a local scene into an RGBA texture attached to an offscreen framebuffer. The second samples that texture through a curved lens normal, with thickness-dependent displacement, subtle channel separation and an illuminated rim. No remote image or GPU readback is used.
One live renderer. Bounded resources. Your motion preference comes first. Everything here happens in your browser.