T1
● NEW
Gift Card Tilt Foil ↗
A gift card you can almost pick up: it tilts toward the pointer on a measured spring while a holographic foil, glare and glow track the light, leans gently with scroll on touch, and flips on a bouncy spring to reprint itself whenever you pick a new amount.
T1
● NEW
Dish Steam Rise ↗
Soft vapour wisps rise, lean downwind and fade off a hot bowl or cup on measured 10s loops. Pure CSS, paused off-screen; on phones it puffs up each time the dish scrolls into view, then rests.
T1
● NEW
Scroll Stroke Fill ↗
A big outline headline floods solid left-to-right, line by line on a measured cascade, as it scrolls through the reading band. It uses native animation-timeline with a transform-only clip, and the ink drains again on scroll-up.
T1
● NEW
Add to Cart Fly ↗
Tapping + Add lobs the drink along a real ballistic arc into the header bag, where the badge springs, while the card button morphs into a − 1 + quantity stepper.
T1
● NEW
Catering Quote Calc ↗
Slide the headcount and pick a package: party trays, drink gallons and desserts spring onto the table while the estimated total rolls to its new price on a spring that never overshoots.
T1
● NEW
Menu Scrollspy Tabs ↗
Sticky menu category tabs whose pill slides to the section you are reading, scroll sideways on phones to keep the current tab in view, and smooth-scroll to a category on tap.
T1
● NEW
Open Status Pulse ↗
The INFI hours block comes alive: the open-status badge breathes green while open and amber when closing soon, and sits still and grey when closed. A spring bar sweeps to today's row and follows the day. It only listens to the platform's badge state and never computes open or closed itself.
T1
● NEW
Price Variant Morph ↗
Picking size, ice or toppings rolls the price digit by digit like an odometer (always in the direction it moved) while the drink illustration grows for Large, floats ice or lifts steam, and fills with each topping.
T1
● NEW
Smart Hide Header ↗
A smart site header that floats transparent over the top of the hero, turns into a shrunk blurred bar before any hero text can slide under it, slides away as you scroll down and returns on the way up without flickering.
T1
● NEW
About Timeline Draw ↗
An About-page 'since 2012' spine draws itself as you scroll, its tip pinned to the reading line. Each milestone card slides in as it arrives, and its dot pops with an M3 spring the moment the ink reaches it.
T1
● NEW
App Download Phone Float ↗
The 'Get our app' section: a drawn generic phone rises and tilts back to upright as you scroll in, callouts land at their own depths, and its screen cycles menu, rewards and 'Order ready!' with a Material fade-through beside real store buttons and a desktop QR.
T1
● NEW
Location Pin Drop ↗
A locations module on a stylised inline-SVG city map. Pins drop in with a measured gravity bounce while their ground shadows grow. The card you hover, tab to or scroll past lifts its pin with a spring and a sonar ring; on phones the cards become a snap row and the snapped card drives the pin.
T1
● NEW
Loyalty Points Ring ↗
An example punch card stamps itself to 7 with a spring stamp-thump: ink spreads and the card gives at the moment of contact, while a 10-notch ring ticks round. Tap Buy one more until the 10th stamp unlocks the free drink.
T1
● NEW
Posts Card Reveal ↗
The home-page Latest news module. Build-injected post cards reveal as they scroll in: the cover clip-wipes up as the photo settles, then date and title rise, and each card lifts with a photo zoom on hover. Handles 1 to 12 cards, late injection and a module born hidden.
T1
● NEW
Pour Fill Scroll ↗
A milk-tea cup builds itself as you scroll a pinned chapter: tea pours and rises, milk swirls in with a shake, then pearls, ice and a straw drop in on real springs.
T1
● NEW
Review Stars Fill ↗
The rating counts up from 0.0 while a gold layer fills five star masks to the exact fraction, so 4.8 leaves the fifth star at a true 80%; each finished star pops on a spring, then the six guest reviews cascade in.
T1
● NEW
Dietary Filter Flip ↗
Dietary chips AND-filter a dish grid. Dishes that don't fit fade and step back, the rest FLIP-glide into their new cells and a live count rolls. A friendly empty state never suggests dropping an allergen filter.
T1
● NEW
Form Step Morph ↗
A catering inquiry net-form split into three steps that slide on Material's shared axis. Invalid fields shake with inline errors, and Send morphs into a spinner, then a check, thanking the guest only after a real submit.
T1
● NEW
Fullscreen Mobile Nav ↗
The phone nav: a two-line burger converges and rotates into an X while a full-screen menu blooms from the button as a clip-path circle, links drop in on a stagger with Order Online and today's hours at the bottom, and focus is trapped, Esc closes it, and the scroll lock never shifts the page.
T1
● NEW
Page View Transition ↗
Real page loads become one continuous motion: the header stays anchored, the dish photo morphs from its menu card into the dish page hero, and the page slides on an M3 shared axis, using native cross-document View Transitions with no library, 0 rAF and a same-document fallback.
T1
CSS 3D Perspective ↗
A dish card tilts in 3D toward the pointer while its photo, title and badge parallax on separate depths under a tracking sheen.
T1
Firework Scroll Bloom ↗
Physics fireworks around a focal element: bursts explode outward, fall under gravity, and fade out & vanish — multi-hue, scroll-triggered, self-terminating (0 rAF at rest).
T1
Hero Aurora Bg ↗
Soft brand-colored aurora blobs drift and blend behind the hero content, which fades up over them — an ambient light backdrop, pure CSS.
T1
Hero Gradient Reveal ↗
The lights come up — a cool scrim recedes on a diagonal while a warm wash sweeps across, as the headline and image resolve together.
T1
Hero Kenburns Reveal ↗
A slow ken-burns drift and scale on the hero image under a soft vignette, while the headline reveals line by line — a living still.
T1
Hero Marquee Band ↗
The headline itself is a giant running marquee — a brand-name band and a reverse-scrolling tagline band — over a still subject image and CTA.
T1
Hero Preloader Wipe ↗
A branded preloader — a mark and a 0-to-100 counter — completes, then the cover wipes up and hands off into the hero as it settles in.
T1
Hero Rotating Tagline ↗
A hero headline with a fixed lead-in and a rolling tagline line that cycles through phrases — 'for tea.' 'for tacos.' 'for you.'
T1
Hero Scroll Cue ↗
An idle-breathing hero paired with an animated scroll-down cue — a flowing hairline, a nudging chevron and a 'Scroll' word — inviting the reward below.
T1
Hero Split Open ↗
Two solid shutter halves part on load — a light seam down the split — to reveal the composed hero (headline, image, CTA) behind them.
T1
Hero Text Media Mask ↗
A giant headline is a window: the letters are cut-outs showing drifting media/gradient behind them while the rest of the hero stays solid — type as viewport.
T1
Hero Tilt Parallax ↗
A living hero — layered depth planes (backdrop, subject image, headline, foreground prop) tilt and parallax toward the pointer, with a subtle idle breathe.
T1
Blur Focus In ↗
A headline resolves from a heavy blur to razor sharpness with a tiny scale-settle as it enters — like a lens finding focus on set type.
T1
Hero Mask Reveal ↗
The hero headline rises line-by-line from behind an overflow mask, staggered, as the whole hero settles from a slight 1.06 zoom to rest.
T1
Letter Stagger Reveal ↗
Each glyph of a headline rises out from behind a per-word mask in a tight left-to-right stagger as a companion image lifts and de-rotates in.
T1
Marquee ↗
Two rows of huge uppercase type slide in opposite directions in a seamless loop, one solid and one outlined, pausing on hover.
T1
Outline Fill Hover ↗
Hollow outline (stroked) words flood solid on hover — the ink pours across the letters from the side the pointer entered and drains toward the exit, a directional clip-path fill on a background-clip:text overlay.
T1
Repeating Type Echo ↗
One word duplicates into a stacked wall of rows that fan in from alternating sides, rippling out from the centre anchor.
T1
Scroll Marquee Velocity ↗
A running marquee whose speed and direction follow your scroll — it races and can flip when you scroll fast, and drifts gently when you stop.
T1
Split Flap Board ↗
A split-flap departure board flips its top and bottom leaves through glyphs to land on each letter or digit, staggered across the word — a solari specials board.
T1
Zigzag Marquee Strip ↗
Three stacked bands of giant uppercase words crawl in alternating directions, each edged with sawtooth teeth and color-flipped red/ink/cream, rising in on scroll.
T1
Branded Scroll Progress ↗
A designed replacement for the scrollbar — a slim curved SVG rail down the edge that fills as you read, with a chapter dot lighting up per section (each a working anchor link).
T1
Confetti Cta Burst ↗
A confetti burst fires from a CTA the moment it's clicked — capped particles with gravity and spin that self-terminate — an order-placed celebration.
T1
Css View Timeline Shine ↗
A specular gloss sweeps across cards and headings as they pass through the viewport, driven by the native CSS animation-timeline: view() — zero JavaScript, with an IntersectionObserver one-shot fallback.
T1
Cursor Blob Follow ↗
A soft gooey pearl replaces the pointer, trailing with lag and stretching along its travel before rounding back the moment it settles.
T1
Cursor Image Trail ↗
Sweeping the pointer across the hero spawns a trail of dish thumbnails that chase the cursor path, then fade and shrink away.
T1
Cursor Label Follow ↗
A small pill label fades and scales in beside the pointer, trails it, and swaps its text — "Order", "View menu", "+" — per hovered zone.
T1
Cursor Repel Field ↗
A scattered field of small props — dots, pearls, menu tags — pushes away from the pointer as it nears and drifts back into place as it leaves.
T1
Cursor Spotlight ↗
The scene sits under a dark veil; a flashlight beam follows the pointer, punching a soft hole that reveals the warm room and a hidden message beneath.
T1
Cursor Trail Dots ↗
A comet-tail of 16 dots lags behind the pointer, fading and shrinking toward the end and gathering to a point when it stops.
T1
Custom Cursor Morph ↗
A custom cursor replaces the arrow and morphs to fit what it's over — an outline ring on images, a 'View'/'Order' label pill on buttons, a small dot on text.
T1
Double Tap Like ↗
Double-tap a photo and a heart pops and bursts at the tap point with a spring, ticking a small like count.
T1
Drag Reorder List ↗
Long-press then drag to reorder list rows — the grabbed row lifts with a shadow while the others slide to open a gap, and the drop settles with a spring.
T1
Elastic Drag Carousel ↗
A draggable card row you grab and fling — it rubber-bands with iOS-style resistance past its bounds, carries inertia, and springs to snap on the nearest card.
T1
Foil Shimmer Sweep ↗
A metallic hot-foil shimmer sweeps across a heading, logo or badge — a brass/gold specular band travelling the letters like light catching foil-stamped type.
T1
Haptic Toggle ↗
A chunky physical-feeling switch — the knob overshoots on flip with a spring and a visual tick, a stand-in for haptic feedback.
T1
Liquid Nav Indicator ↗
A gooey liquid pill slides and stretches between the active nav or tab items — an SVG-goo blob that elongates as it travels then settles round under the current item.
T1
Long Press Peek ↗
Long-press a dish card and it scales down with a haptic feel, then a preview popover lifts; slide to an action to commit or release to dismiss.
T1
Magnetic Cursor ↗
The button leans toward your pointer as a blend-mode dot trails behind, growing into a labelled ring over it.
T1
Magnetic Inertial Spring ↗
A CTA magnetically leans toward the pointer, then overshoots ~16% past and wobbles to rest on a bouncy under-damped spring.
T1
Number Stepper Hold ↗
A quantity stepper where a tap changes by one and holding accelerates, the number rolling like an odometer; it end-bounces at min/max.
T1
Page Corner Peel ↗
A dog-ear page corner peels up in 3D on hover, curling back to reveal a hint — a color, a '+', a price — tucked beneath the sheet's corner.
T1
Pinch Zoom Image ↗
Pinch to zoom a dish photo with two-finger pan and momentum, snapping back to bounds on release; double-tap to zoom.
T1
Pull To Refresh ↗
Drag past the top of the list and a branded indicator stretches in elastically with a winding spinner; release past the threshold to refresh, then it springs home.
T1
Segmented Slide ↗
A segmented control whose selected pill slides and squishes between options on tap while the labels cross-fade.
T1
Sticky Add Bar ↗
A sticky bottom add-to-order bar that slides up as you scroll into the menu and morphs from price to 'Added' with a spring on tap; safe-area aware.
T1
Sticky Gooey Button ↗
A button stretches gooey-ly toward the pointer when it comes near — the button and a follower blob merging via an SVG goo filter — then snaps back when you leave.
T1
Story Progress Tap ↗
Instagram-story segmented progress bars auto-fill and advance; tap left or right to jump, press and hold to pause.
T1
Swipe Card Stack ↗
A Tinder-style deck of dish cards — swipe one left or right and it flies off with a spring and hinge tilt, the next rising beneath; snaps back if you let go early.
T1
Swipe Hint Nudge ↗
A first-run swipe hint — a card auto-nudges sideways a couple of times with a finger cue to teach that there's more to swipe, then rests.
T1
Swipe To Delete ↗
Swipe a list row left to reveal Save / Remove with iOS resistance and a snap-open detent; swipe far to commit, with an Undo.
T1
Tab Bar Morph ↗
A bottom tab bar whose active indicator — a liquid pill — slides and morphs between tabs on tap while the active icon lifts and labels cross-fade.
T1
Tap Ripple Mobile ↗
A material-style touch ripple radiates from the exact tap point across a button or card, with a brief press-scale — immediate touch feedback.
T1
Thumb Reachable Fab ↗
A floating action button in the thumb zone that fans an arc of quick actions into reach on tap, staggered, and collapses on tap again.
T1
Underline Draw Hover ↗
On hover, a link's underline draws itself in from the side the pointer entered, and retracts the same way on leave.
T1
Wedge Cursor Mask ↗
An angular down-triangle blade trails the cursor across a photo, revealing an inverted-colour copy inside rimmed by a red edge.
T1
✦ signature
Angular Clip Panels ↗
Full-width panels stack and slide up over each other, their angular chevron-notched top edges cutting across in red/black/cream as content staggers in.
T1
Block Wipe Reveal ↗
A solid brand-colored block draws across the frame to cover it, swaps in the real content behind, then slides off the far edge to uncover it.
T1
Horizontal Reel ↗
A pinned section stays put while vertical scrolling glides a row of full-height dish cards sideways past a progress rail.
T1
Notch Card Stagger ↗
Beveled notched-corner cards fill in on a diagonal sweep, and hovering one deepens its corner notch and nudges it up.
T1
Parallax Depth Layers ↗
Three or more photographic depth planes — background scene, midground subjects, foreground props and type — translate at different scroll rates for real dolly-in depth.
T1
Pinned Before After ↗
Scroll drives a before→after seam across a pinned image — dish raw→plated, empty→busy cafe — the reveal tied to scroll position.
T1
Pinned Scrub ↗
A section locks in place as you scroll while a cup fills, an arc grows, a rail advances, and step words crossfade through the process.
T1
Rubber Band Overscroll ↗
iOS rubber-band overscroll — pulling past the top or bottom stretches the content with diminishing resistance and springs back on release.
T1
Scroll Bg Color Wash ↗
The section background, ink and accent lerp between chapter palettes as you scroll — mixed in oklab so text contrast washes as a matched pair.
T1
Scroll Count Up ↗
Stat figures count up from zero and their meter bars fill when the 'by the numbers' band scrolls into view, staggered on the diagonal.
T1
Scroll Counter Parallax ↗
An editorial spread where a block of text and its paired image parallax in opposite directions on scroll — the image drifts one way inside its window while the copy drifts the other.
T1
Scroll Line Reveal ↗
A manifesto or origin paragraph reveals line by line, each line rising from an overflow mask in sequence, scrubbed to scroll progress.
T1
Scroll Progress Rail ↗
A vertical timeline rail down the side fills and lights milestone nodes as you scroll through story beats — an our-journey / since-2015 timeline.
T1
Scroll Reveal ↗
A photo rises into view through a clip-path sweep as its inner image settles down from a slight zoom.
T1
Scroll Rotate Badge ↗
A decorative seal, stamp or bean-ring rotates in step with scroll progress — a small throughline garnish that pauses off-screen.
T1
Scroll Snap Reels ↗
Vertical full-screen reels that snap to the viewport TikTok-style with a peek of the next and a subtle settle on snap.
T1
Scroll Text Highlight ↗
As you scroll a quote or paragraph, its words ink-fill from muted to brand color in reading order — a scroll-linked read-along highlight.
T1
Scroll Velocity Skew ↗
Content skews and leans in proportion to scroll velocity, settling upright the moment you stop — the tactile 'scroll feel'.
T1
Scroll Zoom Gallery ↗
In a vertical image column each photo scales up to focus as it reaches viewport centre and recedes as it leaves — a scroll-focused reel.
T1
Skew Parallax Bands ↗
Tilted full-width red, ink and cream bands with angular clip edges and giant type drift past each other, faster bands overtaking slower ones on scroll.
T1
Stacking Image Cards ↗
Full-bleed image panels stack and pin, each receding in scale with a color wash as the next slides up over it — a full-bleed photographic deck.
T1
Sticky Caption Steps ↗
A pinned photo panel cross-fades through images while a column of step captions advances as you scroll — a how-it's-made / process narrative.
T1
Sticky Stack ↗
Cards pin near the top and layer into a deck as you scroll — each covered card shrinks and dims beneath the next sliding over it.
T1
Swipe Gallery Parallax ↗
A swipeable full-bleed image pager where each photo parallaxes within its own frame as you drag — the picture lags the frame for depth.
T1
Accordion Spring ↗
Touch-friendly accordion rows spring open and closed — the panel eases open with a content settle and the chevron rotates; one open at a time.
T1
Angular Mask Image Reveal ↗
An image opens through a hard-edged angular clip — bevel, chevron, torn diagonal, wedge or sawtooth — growing from a sliver to full frame as it scrolls in.
T1
Arrow Wedge Transition ↗
A tiny red down-arrow on a CTA grows as you scroll into a full-screen wedge that swallows the section, then the next chapter rises with a red angular top edge.
T1
Bottom Sheet Drag ↗
A draggable bottom sheet that snaps between peek, half and full on drag velocity, with a rubber-band past bounds and a dimming backdrop; flick down to dismiss.
T1
Card Flip Tap ↗
Tap a menu card to flip it in 3D — front dish photo to back details and price — and tap to flip back.
T1
Chevron Curtain Wipe ↗
A big red down-chevron curtain sweeps down a section seam on scroll, hiding the dark chapter and revealing the cream one behind its V-edge.
T1
Clip-Path Grid Morph ↗
A fullscreen feature image morphs down into a centered rounded tile as sibling tiles fade in and fly forward from center and the title collapses.
T1
Curtain Part Reveal ↗
Two soft velvet curtain halves part from the centre — with a slight drape and a seam shadow — to reveal the hero behind, on enter.
T1
Diagonal Split-Reveal ↗
Two angular halves split along a diagonal seam tear apart in opposite directions, revealing a giant headline on cream that rises in with a stagger.
T1
Paper Flip 3d ↗
A sheet — a logo card, wordmark panel or dish — turns in 3D like a real piece of paper, with a fold crease, a soft curl shadow along the lifting edge and a subtly-grained backface. Built to suit a folded-corner-paper logo (shown here with Brightfront's).
T1
Pull Down Dismiss ↗
Drag a full-screen dish lightbox downward to dismiss — it scales down, corners round, and the backdrop fades with the drag; flick to close or spring back.
T1
Ripped Paper Reveal ↗
A torn-paper cover with an organic deckle edge tears across to reveal the content beneath, a faint fibre-and-shadow lip running along the rip.
T1
✦ signature
Sawtooth Band Wipe ↗
A red toothed band sweeps down a section boundary on scroll, hiding the dark outgoing chapter and revealing the cream incoming one.
T1
Stripe Shutter Reveal ↗
A row of diagonal red, ink, and cream shutters slides open in alternating directions, band by band, parting to reveal a giant header with a red wedge.
T1
Swipe Tabs ↗
Swipe horizontally to page between menu-category panels while a sliding underline tracks the drag, with a rubber-band at the ends.
T2
Carousel 3D Cylinder ↗
A grab-and-spin 3D cylinder carousel of cards — a CSS-3D ring with drag, inertial throw and idle auto-drift, each facet gradient-lit by its angle to the viewer.
T2
Image Sequence Scrub ↗
A cup builds itself frame by frame on a canvas as you scroll — filling, then pearls, then straw — like an Apple product reel.
T2
Scroll Image Ring ↗
Dish images arranged as spokes on a face-on circular wheel that rotates with scroll — each item stays upright as it orbits the rim, the one at the top largest and brightest. Pure CSS-3D.
T2
Hero Cinematic Intro ↗
A fully choreographed entrance on one timeline — the hero image settles, the eyebrow fades, the headline rises line by line, then the CTA and a scroll cue arrive.
T2
Hero Shards Assemble ↗
The hero image assembles itself from image-slice shards that fly in from a scatter and lock into the picture as the headline rises — a dramatic on-load entrance.
T2
Dual Wave Text ↗
Two mirrored columns of stacked names glide sideways on a rolling sine wave as you scroll, the centre name lighting up and swapping the middle photo.
T2
✦ signature
Kinetic Type Clip-Reveal ↗
A giant word split across two lines parts on scroll, opening a gap where a triangle-clipped collage grows and a red sawtooth band wipes across.
T2
Rolling Char Text ↗
Each letter of the headline sits on a 3D drum and rolls a quarter-turn in a left-to-right wave, flipping the glyph into place on scroll or hover.
T2
Scramble Text Decode ↗
Each character of a headline rapidly cycles through random glyphs, then resolves left-to-right into the real words like a terminal decrypting.
T2
Scroll Type Reveal ↗
A giant headline splits into letters that flip, swing, rise, pop, or scatter into place as the section scroll-scrubs past.
T2
Split Text Scrub ↗
A giant headline's letters fill from hollow outline to solid ink one by one, left to right, as you scroll.
T2
Text 3D Depth Scroll ↗
A scroll-driven 3D cylinder of words orbits through depth — CSS perspective + preserve-3d + per-word translateZ + a pinned rotateX turn, each word rushing toward the viewer then receding.
T2
Triangle Flip Grid ↗
A grid of triangular tiles flips from edge-on and transparent, locking flat centre-out to assemble a giant faceted headline as you scroll.
T2
Proximity Scale Grid ↗
A grid or row whose items scale up by cursor proximity — nearest is biggest with a dock-like falloff, each easing toward the pointer with a quickTo tween.
T2
Elastic Grid Scroll ↗
A gallery/menu grid rubber-bands as you fling it — tiles lag out of step (skew and offset proportional to scroll velocity) and spring elastically back to rest when you stop.
T2
Horizontal Pin Gallery ↗
The section locks in place and a row of full-height dish cards glides sideways as you scroll down, damped and smooth.
T2
Infinite Canvas Drag ↗
An infinite, pannable wall of tiled menu photos the visitor drags in any direction (with inertial throw and scroll-nudge), tiles recycling by modulo wrap so it never ends.
T2
Infinite Parallax Loop ↗
A bottomless wall of image columns loops endlessly by modulo wrap — no top or bottom — each column parallaxing at its own rate and direction as you scroll.
T2
Pinned Scrub Cinematic ↗
As you scroll a pinned section, a big word swaps, an ingredient flies in, a cup keeps filling, the background color-morphs and captions crossfade in lockstep.
T2
Pinned Word Zoom ↗
A giant word or monogram scales up on a pinned scroll until one focal letter's aperture fills the viewport and the next section emerges through it.
T2
Polaroid Stack Scroll ↗
Scattered, tilted photos fly in and rotate to settle into a tight overlapping polaroid pile as you scroll the pinned section.
T2
Scroll 3D Image Rotate ↗
A column of dish photos where each plate turns in 3D as it scrolls — edge-on, flat at mid-pass, then tilting away while pushing toward you.
T2
Scroll Graph Draw ↗
A data/stat line graph draws itself — the growth line strokes in, the area fills, each point pops, and the headline KPI counts — as the by-the-numbers section scrolls into view.
T2
Sticky Grid Reveal ↗
A pinned photo grid assembles cell-by-cell, then zooms to 2x and parts like a curtain to reveal a headline and Order CTA behind it.
T2
SVG Map Draw ↗
A locations SVG map draws its routes and pins in via stroke-dashoffset as you scroll — a natural throughline for a multi-location section.
T2
Telescope Zoom Scroll ↗
A hero image zooms up from nothing as nested blurred rings converge and sharpen, dish thumbnails fly past the camera, and the headline parts left and right.
T2
Tilt Pin Section ↗
A chapter panel enters tilted a few degrees off level, then un-tilts to straight as its chevron edge relaxes and text staggers in on scroll.
T2
Blade Swipe Slides ↗
Slides swap via a torn diagonal clip-path wipe led by a red blade edge sweeping across the frame, auto-advancing under a chevron control plate.
T2
Flip Shared-Element ↗
A dish card morphs its image and name into an expanding detail panel, then the description and CTA fade in mid-flight.
T2
Grid Flip Shuffle ↗
Filter or sort a card grid and many items FLIP smoothly between their old and new layout positions at once — the menu-category reflow (distinct from a card→detail shared element).
T2
Magazine Page Flip ↗
The menu rendered as a book you page through — leaves turn in 3D around a centre spine as you scroll, the turned page settling on the left as the next dish appears on the right. CSS-3D, no WebGL.
T2
Motionpath Card Flow ↗
Grid cards fly along curved bezier arcs, staggering into a neat corner deck as a big featured dish scales and fades up behind them.
T2
Scroll Keyhole Slideshow ↗
A full-bleed slideshow scrubbed by scroll, where each slide is revealed through a growing keyhole/aperture clip that dilates open — scroll is the playhead.
T2
Section Timeline Morph ↗
At each chapter boundary a brand pearl grows from a point to fill the screen, becoming the next section's background color.
T2
✦ signature
Shatter Triangle Morph ↗
A plane of black-and-white crystal triangle shards explodes outward with spin and fade as you scroll, revealing the chapter behind it.
T2
SVG Mask Transition ↗
One fullscreen image reveals the next behind an SVG mask of venetian slats/grid cells that sweep open as you scroll.
T2
SVG Path Morph ↗
A single SVG outline liquid-redraws its shape — blob to wave to drop on scroll, or icon to icon on hover — nothing cross-fades.
T2
Zoom Blur Transition ↗
A punchy zoom-blur dolly cut between two frames — the outgoing lunges and motion-blurs toward you and dissolves as the incoming rushes in from a zoomed blur and locks sharp.
T3
Atmospheric Depth Gallery ↗
A gallery where distance reads as atmosphere — far photos sit hazier, desaturated and smaller, then sharpen, saturate and rise forward as scroll brings them close (aerial perspective).
T3
Crt Scroll Glitch ↗
A retro CRT treatment over a hero image — scanlines, a barrel curve and an RGB shift — that glitches harder the faster you scroll and calms to a clean scanlined image when still.
T3
Cursor Bulge Lens ↗
A lens-like bulge trails the cursor across the hero image, magnifying and warping the pixels under the pointer, then un-bulges once as it scrolls in.
T3
Data Tunnel ↗
A wormhole of streaming numbers and glyph rings recedes to a vanishing point and rushes toward you, its drift and spiral twist linked to scroll velocity — a canvas-2d data stream.
T3
Dish 360 Viewer ↗
A plated dish rotates as you drag to spin it or scroll to gently turn it, reading as an inspectable 3D model.
T3
Displacement Image Morph ↗
Hovering an image liquefies it, warping through a turbulent displacement map into a second image, then reverses on mouse-out.
T3
Infinite 3d Tunnel ↗
Scroll flies the camera forward through an endless tube of dish panels lining a receding tunnel, each rushing past and recycling seamlessly at the far end — pure CSS-3D, no WebGL.
T3
Particle Field ↗
Tiny brand-tinted motes drift upward on a curling flow-field, glowing where they overlap, over a dark hero.
T3
Shader Image Distortion ↗
A food photo ripples and liquifies toward the cursor with a flowing noise warp and a subtle RGB color fringe on the moving edges.
T3
Shader Image Reveal ↗
A hero photo assembles bottom-to-top as it scrolls in, its rows warping with an RGB-split displacement that settles into a crisp image.
T3
Velocity RGB Drag ↗
Dragging across the hero image smears its red, green and blue channels apart along the pointer’s motion, snapping back crisp as it rests.
Draggable Throw ↗
You grab a card and fling it; it coasts with momentum, slows under friction, and bounces gently off the stage edges.
Matter Drop ↗
Branded stickers and toppings rain down under gravity, collide, stack into a settled pile, and scatter when you fling them with the pointer.