Maker's guide
Hoe dit gemaakt is
Ferrous is een Weblify Signature-showcase, ontworpen en gebouwd door Claude (Opus 4.8). Het doel was een eerlijke demonstratie: een held die live berekend wordt in plaats van gefilmd. Hieronder de volledige methode, en je kunt elke prompt lezen die haar voortbracht.
Het idee
De held moest onmiskenbaar real-time zijn, geen videolus die 3D nadoet. Ferrofluid, olie met ijzerdeeltjes die stekels trekt onder een magnetisch veld, is precies zo'n materiaal dat je niet overtuigend kunt filmen: elke sessie loopt anders. Dus rendert het zichzelf, live op de GPU, en de scroll speelt de rol van de magneet.
De shader
De vloeistof is een signed-distance field van een urchin: de straal van een bol wordt richtingsafhankelijk naar buiten geduwd langs veertien veld-assen (Fibonacci-bol-richtingen). Stijgt de veldsterkte, dan groeien de stekels langs die assen, altijd verbonden met de kern, nooit losse ballen. Alles wordt per pixel geraymarcht in een enkel WebGL-fragmentprogramma. De kleur komt uit dunne-film-interferentie: een Fresnel-term voedt een cyclisch teal-violet-koper-spectrum, zodat de rand van tint verschiet met je kijkhoek, net als een oliefilm.
De omslag
Het signature-moment is een polariteits-flip halverwege de scroll. Een scroll-engine mapt de scroll niet lineair maar met een dwell-curve op de veldsterkte: rust, opbouw, een surge rond de flip, dan kalmeren tot een meetstand. Een tweede uniform voegt op de piek een crown-burst toe. Elke frame wordt kritisch-gedempt gelerpt voor botermotion.
Snel houden
Een GPU-raymarcher kan een laptop laten smelten. De sleutel is een bounding-sphere early-out: mist een straal de begrenzende bol, dan wordt er niet gemarcht, en dat is het grootste deel van het scherm. Verder rendert de scene op 0.62x resolutie met device-pixel-ratio 1, met 72 stappen en vroege terminatie. Op mobiel gaat WebGL volledig uit onder een statische poster.
Toegankelijk eerst
Alle koppen en copy zijn echte DOM, dus de grootste paint is tekst en arriveert meteen; het canvas fade't erachter in. Met prefers-reduced-motion staat het veld stil en blijft een volwaardige statische CSS-poster staan (oliezwarte bol met iriserende rand), geen kale fallback. Contrast haalt overal AA en de a11y-score is 100.
De stack
Astro en Tailwind, geen client-framework. Three.js wordt lazy geimporteerd zodat het van het kritieke pad blijft. Alle motion leeft in externe scripts die Astro in een strikte Content-Security-Policy hasht: geen enkele inline-style of handler. Self-hosted variabele fonts (Darker Grotesque, Hanken Grotesk, JetBrains Mono). Gedeployed als statische bestanden op Cloudflare Pages.
Reproduceer het
- 1.Scaffold een Astro + Tailwind-site met een strikte, gehashte CSP.
- 2.Render een enkele fullscreen-quad en schrijf de raymarch-fragmentshader (metaball-SDF + thin-film).
- 3.Stuur een veld-uniform vanuit de scroll met een dwell-curve; voeg een crown-burst-piek toe voor de flip.
- 4.Bounding-sphere early-out, 0.62x resolutie, dpr 1; WebGL uit < 768px met een statische poster.
- 5.Deploy de statische bestanden naar Cloudflare Pages met --branch main.
Fictief showcase-atelier. Alle specificaties zijn verzonnen; al het beeld wordt live op je GPU gerenderd.