Premium Sushi & Culinary Catering Brand
Dark, cinematic dining brand site where every interaction is hand-built and tactile.
Published anonymously at the client’s request
Overview
A single-page brand experience with an animated splash intro, magnetic custom-cursor interactions, and four switchable digital flipbook menus — built as one self-contained file with no framework.
What this proves
Taste. This is a craft and motion piece — agency-grade interaction in a vertical usually served by page builders.
Key features
Dual-layer interpolated cursor
A precise dot updates directly from pointer events for pixel accuracy, while an outline ring is decoupled into a requestAnimationFrame loop applying frame-rate-driven easing — producing natural lag independent of mouse event frequency. Any element opting in through a data attribute expands the ring and fills it with a translucent accent tint.
Magnetic buttons with elastic release
A padded wrapper enlarges the hit area beyond the visual button so attraction begins before the cursor arrives. Offset is computed from live bounding rectangles against the wrapper centre at damped strength, and release uses an elastic ease so the button overshoots and settles rather than snapping.
Cinematic branded splash
A full-viewport splash where the brand mark scales in and the wordmark assembles letter-by-letter on a staggered timeline, then dissolves and hands off directly into the hero’s own entrance animation rather than cutting.
Zero-cost dark map theming
A keyless map embed cannot be styled, and dark map styling normally requires the paid JavaScript API plus billing setup. A pure CSS filter chain — invert to darken, hue-rotate to correct the resulting hue flip so water and roads read naturally — achieves themed maps with no key, no billing and no extra JavaScript.
Procedural film grain at zero network cost
Texture overlays normally mean shipping a noise image and an extra request. Instead an SVG fractal-noise filter is inlined as a data URI on a pseudo-element, fixed across the viewport with pointer events disabled so it never intercepts input. The browser generates it; it costs nothing to download.
The experience
Visitors arrive at a full-screen splash where the brand mark scales into view and the wordmark assembles letter-by-letter, then dissolves into a hero that rises into place. From there the page responds to the pointer: a two-part cursor swells and tints over anything interactive, and buttons pull magnetically toward the cursor before springing back.
Scrolling reveals each section with a synchronised fade-and-rise. In the menu library, visitors switch between four complete digital menus — dine-in and catering for both the parent brand and its sushi line — without leaving the page. The gallery blooms from grayscale to full colour on hover, the FAQ expands one answer at a time, and the map section presents address, hours and social links beside a map colour-shifted to match the dark palette.
Design
A warm-dark, cinematic direction: backgrounds that are near-black but deliberately warm rather than pure black, layered in three tonal steps to separate sections without borders doing the work. A single muted-gold accent carries every interactive affordance, glow and highlight, and a full-viewport procedural film-grain overlay keeps the flat darkness from reading as digital.
The palette is fully tokenised in nine CSS custom properties — including a shared easing curve — so the entire visual system is driven by nine lines. Contrast was well judged: body text and the accent both clear WCAG AA against the base background.
Engineering
The interaction layer is hand-built rather than assembled from plugins. Scroll reveals use an IntersectionObserver with a negative root margin so elements animate slightly before entering view, and each element unobserves itself immediately after firing — so it animates exactly once and then costs nothing. This is the correct modern pattern, and a notable contrast with the jQuery-era approach it replaced.
The responsive strategy removes rather than shrinks. Below 900px the entire custom cursor system is disabled and native cursors restored — the interaction is taken away rather than left running uselessly on touch. Components are rethought per breakpoint rather than scaled: the gallery changes aspect ratio from portrait to landscape on phones, and the menu tab rail reshapes from a pill to a compact block.
Not demonstrated by this project
Stated plainly, because a portfolio is more useful when it is precise about its limits.
- No backend, database, authentication or application state
- No e-commerce, ordering, booking or reservation flow
- No contact form, phone link or messaging integration — no enquiry path exists
- The primary content — the menus — is delegated to a third-party embed rather than built
- SEO is a single title tag: no meta description, Open Graph, structured data or sitemap
- Accessibility is materially incomplete — navigation is not keyboard operable and pinch-zoom is blocked
- No multilingual support and no 3D or WebGL
Portfolio assessment
- Visual design
- 8.0 / 10
- Technical complexity
- 3.0 / 10
- Interactivity
- 6.0 / 10
- Business value
- 4.0 / 10
- Portfolio appeal
- 7.0 / 10
