Cardwall
Exceptional
More sections
Explore the collection
- NewFormationA 'Selected Works' portfolio wall built on one set of cards and four formations, switched from a header toggle: Flat — a scattered ellipse ring hugging the viewport with a clean centre; Tilt — a big horizontal row, every card turned the same way in 3D and bleeding off both edges; Ring — a descending diagonal S-wave from top-right to bottom-left, cards overlapping into depth; Gallery — a large coverflow filmstrip you drag through. Switching a toggle springs every card from its current pose to the new formation, so the change reads as one continuous morph rather than a cut. A single rAF loop owns the per-card springs, a cursor-following 3D lean of the whole wall, a drag offset to pan/scrub the linear formations, and a live hover hit-test that lifts whichever card the cursor is over and floats its title. Each card is a self-contained generated poster built from a per-work palette (real photography drops in by URL). Click any card and it grows from its exact on-screen rect into a centred detail panel with the brief; Esc or the backdrop closes it. GSAP owns the staggered entrance bloom and the open/close; reduced-motion snaps to the Flat formation; the loop pauses off-screen and in hidden tabs.
- NewRevolverSix two-sided premium debit cards ride an invisible, tilted 3D wheel — and somersault as they travel. Each card enters from the bottom of the scene close to the camera showing its BACK (holder name, number, tap-to-pay — all the personal data lives there), tumbles forward through a near-invisible edge-on sliver, lands FRONT face-on at the centre-stage hero pose — the clean design face, kept alive by cursor-tracked tilt and a moving specular sheen — then keeps rotating the same direction through edge-on again to show its back as it recedes into the top stack, smaller, dimmer, softer. Roughly 360° of continuous rotation per visible pass, never reversing, never snapping. One continuous position float drives every card through shared Catmull-Rom station splines, so the six cards move as one machine: consistent spacing, one shared somersault curve, atmospheric depth-of-field. Critically-damped spring physics — soft acceleration, soft deceleration, zero bounce. Wheel, drag, fling (clamped to ±2 slots), tap any visible card to call it to the stage, pips, arrow keys, and a patient auto-advance. Each finish is a tone-on-tone engraving: contour squiggles, a ghosted chip-grid, fine rules, a satin band, star specks, brushed metal.
- NewRiffleA scroll-choreographed 3D card deck. Twenty-two square cover-art cards morph continuously through six formations as the section is scrubbed — a wide elliptical arch, a collapse into a single stacked card, a diagonal cascade receding into depth, a swirling pinwheel ring with a dark centre hole, a chaotic mid-air tumble where cards flip and scatter, and finally a sparse coverflow that settles with a live caption describing the focused card. One hero card threads through all six as the constant the eye tracks. A single scroll-progress value drives a per-frame spring toward each card's target pose (blended between the two bracketing formations with a hold-morph-hold remap and a per-card stagger wave), so the deck reads as a living thing rather than a slideshow — and the whole sequence reverses exactly on scroll-up. GSAP ScrollTrigger feeds the progress; raw requestAnimationFrame owns the CSS-3D transforms and a subtle cursor-parallax tilt of the entire deck. Theme-aware near-black cinema stage with vignette and film grain; reduced-motion snaps to the captioned rest state.
- NewConsoleA vintage 1990s computer hero. A chunky CRT monitor with an amber-phosphor screen sits above a chiclet keyboard with cream caps and three colour-accented specials — ENTER in blue, SHIFT in violet, BACKSPACE in orange — plus an ESC clear and an OPT cap on the bottom row. The CRT shows a blinking caret and a 'Type something…' placeholder over a scanline pattern, glow, and a subtle screen vignette. Click any key on the screen and the cap presses down crisply while the character lands on the CRT (letters appear uppercase for the retro feel); type on your physical keyboard and the matching on-screen cap presses in sync — letters, digits, Space, Enter, Backspace, Shift, and Escape are all wired through. ESC clears the screen. The global keydown listener politely ignores events when a real form input is focused, and touch taps are guarded against the synthetic-mouse double-fire. GSAP plays a brief entrance on the computer; everything else is pure React state and CSS — no canvas, no physics simulation needed for this one. Honours prefers-reduced-motion.