T1
● NEW
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
● NEW
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
● NEW
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
● NEW
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
● NEW
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
● NEW
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
● NEW
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
● NEW
Segmented Slide ↗
A segmented control whose selected pill slides and squishes between options on tap while the labels cross-fade.
T1
● NEW
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
● NEW
Story Progress Tap ↗
Instagram-story segmented progress bars auto-fill and advance; tap left or right to jump, press and hold to pause.
T1
● NEW
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
● NEW
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
● NEW
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
● NEW
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
● NEW
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
● NEW
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
● NEW
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
● NEW
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
● NEW
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
● NEW
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
● NEW
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
● NEW
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
● NEW
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
● NEW
Swipe Tabs ↗
Swipe horizontally to page between menu-category panels while a sliding underline tracks the drag, with a rubber-band at the ends.
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
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
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
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
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
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
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
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 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
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
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
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.
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.