Wyrelane Creative Lab · Experiments
Onetechniqueat a time
Every effect our flagships are built from, proved on its own first.
Each experiment isolates one technique — a shader, a scroll mechanic, a 3D pipeline — and proves it on a phone before it is allowed into a production page. Open any of them: they are live, and every one says why it uses the canvas, or why it does not.
- 16
- Experiments
- 6
- Flagships built from them
- 71
- Techniques covered
01Scroll-driven cameraScroll progress drives a camera rig and object rotation with zero React re-renders.
02Procedural ring & exploded viewThe flagship product built from four lathe operations — no Blender, no GLB, zero download.
03Typography in motionFive SplitText behaviours on one easing vocabulary, each with a reduced-motion path.
04Pointer as inputMagnetic targets, a trailing cursor, tilt and character repulsion — one listener between them.
05Scroll-scrubbed sequenceA turntable rendered from our own geometry, scrubbed frame-exact on a canvas. 72 frames, 1.6 MB.
06Shader image revealA fragment shader dissolves between two textures using noise, driven by scroll.
07Pointer distortionUV displacement following the smoothed pointer, with a velocity-scaled strength.
08Instanced particle fieldSix thousand points morph sphere → ring → cardiac trace from vertex attributes, one float per frame.
09GLTF pipelineParametric geometry → GLB → meshopt/Draco/simplify, with real byte counts from a build script.
10Interactive product viewerVelocity-based inertia, keyboard rotation, part selection, and every canvas action mirrored as a real button.
11Scene-to-scene transitionTwo scenes into framebuffers, composited by a shader that warps each one toward the seam.
12Horizontal journeyPinned horizontal track that keeps focus reachable and collapses to a vertical list under reduced motion.
13WebGL gradient backgroundA procedural background that costs less than the video file it replaces.
14Preloader & asset gateCounter follows three loading manager bytes; handles the active-flag flicker and the cache.
15Hour scrubDrag the hour: a head travels an arc, its colour temperature climbs 1900K to 6500K and back, and three photographic plates of one room take its light. WebGL earns the canvas here because the light is computed and continuously responsive — a video could not be dragged.
16Type in spaceTwo WebGL contexts with the headline as DOM between them, so procedural forms pass in front of and behind real text. The canvas earns its place by doing the one thing a single canvas cannot: keeping the depth without turning the words into a texture nobody can select, translate or zoom.
16 experiments · all live
Back to the flagshipsEngage
Send us
the brief.
Tell us the goal in a paragraph.
We reply in 6–12 hours.
Scope, timeline and a fixed price. No strings attached.