Wyrelane Creative Lab · built in public
Wyrelane Studio · Creative web development
Immersive websites and web apps that work.
Shaders & motion
Built by hand
Web apps that shipWiring ideas into realityThe work · Immersive web flagships
A product page with no canvas in it — every effect is video, images and CSS.
The lab · WebGL, GSAP & 3D experiments
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.Services
Web apps, immersive web, AI tools and SaaS — built for teams that ship.
React & Next.js web apps for startups — MVPs to production platforms.
Scroll-driven 3D, shaders and motion — the work in this lab, on your brand.
Agentic AI and automation — multi-agent systems, tool calling, RAG and custom tools.
Multi-tenant SaaS and online stores — billing, onboarding, analytics, checkout.
Featured flagship
A residential tower told as one scroll-driven film — a flight through cloud, a 440-frame image sequence, a scroll gate you open by choosing a floor, a Three.js terrace and twelve lifestyle chapters.
Featured from the lab
Wyrelane Solutions
Fixed price,
weekly demos.
We picked well-known examples of premium interactive web and measured how they are actually built — then rebuilt them here, in public. The expensive-looking web is mostly flat assets, animated carefully.
So we can tell you where the budget needs to go before you spend it, and build it with a senior team under one roof: design, engineering, QA and project management.
Questions
Immersive websites and product pages with scroll-driven 3D, WebGL and motion design, plus the web apps behind them: React and Next.js applications, AI tools, SaaS products and e-commerce stores. Wyrelane Studio is the creative development studio of Wyrelane Solutions.
Yes. We build interactive 3D scenes with Three.js and React Three Fiber, custom GLSL shaders and scroll-driven camera work — and only reach for WebGL when CSS, video or an image sequence cannot do the job better. Every technique is proved in its own experiment first.
It has to. Every page is tested on a phone before it ships, scales its effects to the device, and respects reduced-motion settings with a calm, complete version. Headings, copy and calls to action stay real HTML, so the page is readable and indexable even without the animation.
Next.js and React for the application, GSAP and ScrollTrigger for motion, Lenis for smooth scrolling, Three.js and React Three Fiber for 3D, and custom shaders where a scene needs them. Assets are compressed before they ship.
Most projects take between 2 and 12 weeks depending on scope: web apps 2–12 weeks, immersive web 3–8 weeks, AI tools 2–6 weeks, SaaS and e-commerce 4–12 weeks. Pricing is fixed per milestone, with a demo every week.
Send us the goal in a paragraph or book a consultation. We reply within 6–12 hours with a scope, a timeline and a fixed price — no strings attached.
Engage
Tell us the goal in a paragraph.
We reply in 6–12 hours.
Scope, timeline and a fixed price. No strings attached.
