Work

Headless Motion Commerce

FOCUS
  • Web Animation
  • Headless Commerce
  • Scalable Systems
STACK
  • Next.js 16
  • Medusa V2
  • Vercel + Railway
MOTION
  • GSAP
  • Framer Motion
  • View Transitions API
Read Time
  • 3 Mins
Nightkidz

System
Setup

Integration Icon
A production-grade headless commerce stack built on Next.js 16 and Medusa V2. Vercel serves pre-rendered product pages, while Medusa on Railway keeps pricing and inventory live. The system separates storefront rendering, commerce data, and third-party integrations so the frontend and backend can evolve independently.
Nightkidz System Setup - Medusa, GitHub, Railway

Medusa Backend

Medusa V2 runs product, order, and fulfillment workflows on PostgreSQL with Redis-backed cache, events, and workflow state.

Vercel Frontend

Next.js 16 App Router runs in a linked Vercel project with ISR product shells, route handlers, and consent-gated Analytics and Speed Insights.

Railway Deploy

Railway hosts the Medusa API and MinIO media, with PostgreSQL and Redis wired through environment URLs.

GitHub Integration

GitHub keeps Medusa and Next.js in one repo, with Claude pull-request review and a Vercel-linked storefront.

MinIO Storage

Medusa uses an S3-compatible MinIO provider when configured, otherwise local file storage.

Stripe Payments

Medusa verifies Stripe webhooks and captures automatically; Stripe Elements renders checkout.

Shippo Fulfillment

Shippo shops active carrier rates, validates addresses with V2 confidence data, buys labels, and tracks delivery.

Motion
Direction

Nightkidz motion is built like a signal story: analog noise, controlled distortion, then clean lock-in. Pixelated entry channels VHS tape warping, loading-screen breakup, and Game Boy visual quality from the first frame. Scramble text, gallery movement, and image transitions extend that language with tuner flicker and touge recovery arcs. Route readiness, image paint, live commerce, timing, and cleanup stay linked so the system remains expressive across product pages, cart, and checkout.
Analog signalProduct clarity
Noise
Scan
Resolve
Ready
Noise
Calibrating VHS pixel profile...

PPiixxeellaatteeddeennttrryybboorrrroowwssffrroommVVHHSSttaappeeddiissttoorrttiioonn,,llooaaddiinngg--ssccrreeeennbbrreeaakkuupp,,aannddGGaammeeBBooyyvviissuuaallqquuaalliittyy..TThheerreevveeaallssttaarrttssrraawwaannddrreessoollvveesswwiitthhccoonnttrroolllleeddffiiddeelliittyyssooaattmmoosspphheerreeaannddpprroodduuccttddeettaaiillccaannccooeexxiisstt..

Scramble guardrails
Tuner noiseLegible attitude
Static
Flicker
Settle
Readable
Static
Calibrating scramble rhythm...

SSccrraammbblleetteexxttiissiinnssppiirreeddbbyyPPoowweerrFFCCaannddAA''PPEEXXiiSSAAFFCCssttaarrttuuppssccrreeeennsswwhheerreecchhaarraacctteerrssfflliicckkeerrbbeeffoorreetthheeyysseettttllee..TTiimmiinngggguuaarrddrraaiillsskkeeeepptthheejjiitttteerrsshhaarrppwwhhiilleepprreesseerrvviinngglleeggiibbiilliittyyaaccrroossssbbrreeaakkppooiinnttss..

Drift tensionSpatial control
Anchor
Drift
Recover
Stable
Anchor
Calibrating morph stability...

VViieewwmmoorrpphhiinnggttaakkeessccuueessffrroommttoouuggeeddrriiffttiinngg,,aabbrriieeffbbrreeaakkiinnbbaallaanncceetthhaattssnnaappssbbaacckkiinnttoolliinnee..SShhaarreeddttiimmiinnggaannddcclleeaannuupppprreesseerrvveessppaattiiaallccoonnttiinnuuiittyyaaccrroossssaarrcchhiivvee,,ccaarrtt,,aannddcchheecckkoouuttfflloowwss..

Motion
System

Animation Icon
I built a token-driven choreography system where every transition is reusable and consistent. Pixelated reveals and scramble text pull from VHS static, Game Boy dithering, and tuner displays to land an 80s/90s retro-futurist texture. Gallery movement, shared images, cart motion, and checkout each play a part in that rhythm. Pre-rendered pages, live commerce, image readiness, and browser history stay linked underneath.

Motion
Tokens

Code Icon
Core timing, easing, and stagger values live in typed motion tokens. One duration moves through entry, page transitions, and scramble effects. Readiness, transition state, and cleanup stay in focused runtime utilities, keeping the motion predictable and easy to evolve.
motion-tokens.ts → duration
export const MOTION_TOKENS = {  duration: {    exit: 0.5,              // Page exit    enter: 0.5,             // Page enter    scrambleOut: 0.55,      // Text scramble out    scrambleIn: 0.7,        // Text scramble in    imageMorph: 0.9,        // Product image morph    imageFade: 0.38,        // Non-morphing fade    entryPixelTransition: 0.7,    entryColumnReveal: 0.6,  },}
motion-tokens.ts → ease
  ease: {    exit: "power4.in",       // Accelerating exit    enter: "power4.out",     // Decelerating enter    imageMorph: "expo.inOut",// Smooth image morphs    imageFlip: "expo.inOut", // FLIP animation    scramble: "power2.out",  // Text reveal    pixel: "power3.inOut",   // Pixel transition  },
motion-tokens.ts → stagger
  stagger: {    text: 0.008,             // Between text elements    images: 0.04,            // Between image elements    columns: 0.08,           // Column reveal delay    pixels: 0.02,            // Pixel block cascade  },
motion-tokens.ts → scramble
  scramble: {    chars: "アイウエオカキクケコ...",    speed: 0.25,             // Character cycle speed    revealDelay: 0.15,       // Delay before final text    minIterations: 3,        // Minimum scramble cycles    maxIterations: 8,        // Maximum scramble cycles  },

TThheeaanniimmaattiioonnssyysstteemmttrreeaattssmmoottiioonnaassaaffiirrsstt--ccllaassssddeessiiggnneelleemmeenntt..EEvveerryyssccrroollll,,cclliicckk,,aannddrroouutteecchhaannggeeffoolllloowwsssseeqquueenncceesstthhaattmmaaiinnttaaiinnssppaattiiaallccoonnttiinnuuiittyyaannddgguuiiddeeaatttteennttiioonn..PPrree--rreennddeerreeddppaaggeessaannddlliivveeccoommmmeerrcceeddaattaajjooiinntthhaattssaammeerrhhyytthhmm,,kkeeeeppiinnggtthheeeexxppeerriieenncceeccoonnssiisstteennttaaccrroosssspprroodduuccttrroouutteess,,ccaarrtt,,aannddcchheecckkoouutt..

Make it real. Find what’s next.

Grow Therapy

Make it real. Find what’s next.