Benchmark
Exceptional
You can clone, edit, and host in modulify.ai
More sections
Explore the collection
- New
AtlasAn interactive realistic Earth you explore country by country. On load the globe scales up from a point on a blue stage and the headline EXPLORE YOUR WORLD resolves with the globe sitting as the O. The Earth auto-rotates and you can drag to spin it with momentum; a day/night terminator, an ocean specular glint, a drifting cloud shell and a fresnel atmosphere make it feel alive. HOVER any of ~180 countries and it fills RED and names itself — pixel-accurate picking driven by a country ID map rasterised at runtime from world boundary data (GeoJSON), so every country on Earth is selectable. CLICK a country and the globe glides aside as the name goes big and a panel of that country's cultural highlights slides in — landmarks with real photos and a line of story; open a highlight and it fills the screen as a cinematic full-bleed with COUNTRY · PLACE. Eight countries ship richly built (China, Japan, France, Italy, Egypt, Brazil, Peru, USA) with an extensible, ISO-keyed data model so any of the rest can be fleshed out by dropping in content. One Three.js scene owns the Earth, the clouds, the atmosphere and the ID map; one requestAnimationFrame clock drives the spin, the momentum and the sun; GSAP owns the scale-in entrance and the open/close glide. Custom shaders handle the day/night lighting and the linear→sRGB grade, the globe rights itself after a vertical drag, DPR is capped, it pauses when hidden, and it disposes every texture, geometry and material on unmount. Ships as a reusable component that takes any array of country content as data. - New
ReverieA full-viewport, scroll-driven gallery of cinematic, dream-lit portraits. It opens on one full-bleed hero image — a red-and-teal split-light face — with a quiet manifesto laid across it as a loose word-grid. Scroll and that single image SHRINKS in place into one small card floating in a dusk void; the card proves to be a deck and RIFFLES into an upright diagonal staircase of portrait plates; the staircase PARTS into two corner stacks as the title 'Imagined Light' resolves in the clearing between them (a staged second beat); the stacks unfurl into two upright edge COLUMNS; and the columns MULTIPLY INWARD into a full, edge-to-edge mosaic wall. Once the wall forms, the cursor PANS across it and HOVERS a tile to spotlight it — lifting and tilting it toward the cursor in true 3D while the rest dim and a printed number and italic title fade in. CLICK any tile and it lifts off the wall as a full, uncropped 'print' on a soft matte with a gallery placard beneath it, the wall sinking into shadow behind. ONE requestAnimationFrame clock owns every card's transform, opacity and depth, scrubbed by a single progress scalar the wheel or a vertical touch-drag drives; a single tween handles only the load-in envelope. Theme-aware (an always-dusk void or a warm paper stage), keyboard-scrubbable, honours prefers-reduced-motion, pauses off-screen and in hidden tabs, DPR-capped, and verified in a 390-wide mobile portrait with its own large-tile layout. No HUD, no hint text. - New
AssemblyA cinematic gallery that builds itself. On load a large, slowly-rotating globe of photographic squircle cards fills the screen — front cards big and bright, back cards small and dim, like a turning world of images — then the sphere spins down and the cards migrate off it, converging inward to lock into a tight, hand-arranged rounded-diamond bouquet that visibly SHARPENS as it forms: the depth-of-field tightens as the pieces gather, so you watch a single composed object come into being rather than a pile stack up. At rest the cluster breathes on a per-card idle drift and parallaxes on the cursor, near cards swimming more than far ones, so the flat wall reveals real layered depth. Click any card and it dollies to the centre and full sharpness while every other card spreads into an even ring around it, and the whole room floods with a soft radial bloom in that card's own dominant colour, re-lighting for every card. Esc, the close button, or a click on the empty stage re-gathers the exact same bouquet. The demo deck is a set of warm, cinematic photographic plates; any card can instead fall back to a bold procedural plate, so it still works with zero assets. One requestAnimationFrame clock writes every transform, filter, opacity and depth grade straight to the DOM; a single depth number per card drives scale, blur and dimming through one shared lens equation, so the fly-in, the settle and the click rack-focus all fall out of the same maths. GSAP eases the entrance and the focus open-close (power3.inOut); the rAF loop still owns every card transform. Theme-aware, keyboard-operable, honours prefers-reduced-motion, DPR-capped, and pauses when hidden or off-screen. Ships as a reusable component that takes any array of image cards as data. - New
FilamentA radiant field of glowing thread-lines — each a hairline stroke fading from a deep origin into a bright tip dot — laid over a living gradient, in the spirit of a Stripe stat hero. The four stat figures across the top are TABS: click one and the entire field springs into a new FORMATION while the gradient behind cross-fades to that tab's palette and every line re-colours itself off the new gradient (a deep→tip stroke sampled straight from the palette). Reach fans a corona up from a bottom-centre origin; Volume stands a traveling-wave equaliser along the baseline; Uptime turns a slowly rotating spoked ring with a clear centre; Scale radiates a full-frame supernova from the middle. Every filament is a spring — it eases its origin and tip toward the formation's target, so a tab switch reads as one continuous morph rather than a cut. Move the cursor and nearby filaments bend away (or, in Volume, crest up toward it) and spring back. The gradient is the single source of truth for colour, so the Tune panel's swatches and hue slider restyle the whole scene — background bloom and every thread — at once, alongside live density, reach, motion-speed and cursor-force controls. One raw-rAF clock owns the physics, the palette ease and the canvas paint; GSAP owns only the entrance fade. Theme-aware (a light wash or an additive dark glow), density adapts to the viewport, DPR is capped, it pauses off-screen and in hidden tabs, and honours prefers-reduced-motion with a composed still.