Riffle
Exceptional
More sections
Explore the collection
- 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.
- 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.
- NewAuroraA single flowing silk-ribbon mesh — one draw call, no textures, no post-processing — twisting and curling across the viewport on the GPU, coloured by a continuous blue → periwinkle → orchid → hot-pink → coral → orange → gold gradient across its width with fine flow-aligned silk fibres, a bright fresnel fold-crease highlight, and soft feathered selvedge edges. The centerline drifts and sways while the cross-section twists and curls; surface normals are computed analytically per-frame from the two surface tangents so the fibres and crease rake correctly as the ribbon writhes. Every visual parameter — composition (scale, offset, rotation, FOV, camera), motion (speed), shape (length, twist, width, curl, wave, sway) and surface (fibre frequency/contrast/blur, emphasis band, edge sharpness, crease, flow, opacity) — is driven live from a single config object. Premultiplied-alpha output sits cleanly over any background. Reduced-motion renders a single still frame; an IntersectionObserver and a visibility listener pause the loop off-screen or in a hidden tab; pixel ratio and frame-rate are capped; the WebGL context is fully disposed on unmount.
- NewOverworldA playable, top-down pixel portfolio. Visitors steer a four-direction character around two single-screen scenes instead of scrolling a page. The office is the professional story — walk to the laptop to open a Projects modal, the bookshelf for a reading list, the file cabinet for the CV and documents, and the coffee table for a small personality aside. Step through the door and the scene cross-fades to a garden — the personal story — with a mountain bike (a dialogue about resetting on the trails), a camera table (a photo album), and a playground (a quiet line about fatherhood). Real depth: the character passes in front of and behind furniture via per-frame Y-sorting, collides with walls and objects on an axis-separated AABB sweep, and can nudge the office chair at the desk within its range. A single requestAnimationFrame loop drives movement, the 4-frame walk cycle, and collision, all written straight to DOM transforms so React never re-renders mid-walk; only discrete state (scene, nearest tooltip, open modal) hits React. Pre-rendered info badges surface above the closest object, and only the closest one shows. WASD/arrows + E on desktop; an on-screen D-pad and interact button appear on touch. Every modal opens over the paused world and returns the visitor to the exact same spot. All content — projects, books, CV, photos, dialogue, and object placement — lives in one editable data file.