Work

Linkedin

Nightkidz
2025

VIEW

Headless Motion Commerce

FOCUS

Web Animation

Headless E-commerce

Scalable Systems

STACK

Next.js 16

MedusaJS V2

Railway

MOTION

GSAP

Framer Motion

View Transitions API

Read Time

3 Mins

Nightkidz

System
Setup

Integration Icon
A production-grade headless e-commerce stack built on Next.js 16 and MedusaJS V2. Railway handles zero-downtime deployments, while MinIO provides S3-compatible asset storage. The system is intentionally separated across backend services, storefront rendering, and third-party integrations so it scales without entangling concerns.
Nightkidz System Setup - Medusa, GitHub, Railway

Medusa Backend

Headless commerce engine with PostgreSQL, Redis event bus, and workflow state management for order processing and fulfillment.

Vercel Frontend

Next.js App Router storefront deployed on Vercel's edge network with serverless functions, incremental static regeneration, and automatic preview builds.

Railway Deploy

Zero-downtime deployments with PostgreSQL and Redis managed services, automatic SSL, and environment-based configuration.

GitHub Integration

Monorepo structure with backend and storefront packages, CI/CD pipelines, and branch-based preview deployments.

MinIO Storage

S3-compatible object storage for product images with CDN caching and automatic format optimization.

Stripe Payments

Secure payment processing with webhook verification, automatic capture, and multi-currency support.

Shippo Fulfillment

Multi-carrier rate shopping with USPS, UPS, FedEx, and DHL. Address validation V2 with confidence scoring and label purchasing.

Motion
Direction

architecture
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 to establish tone from the first frame. Scramble and view morph behavior extend that language with tuner-style flicker and touge-style recovery arcs. Guardrail states define thresholds, timing, and cleanup behavior so the experience stays expressive and consistent across SSR, 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..TTrraannssiittiioonngguuaarrddrraaiillsspprreesseerrvveessppaattiiaallccoonnttiinnuuiittyyssooSSSSRR,,ccaarrtt,,aannddcchheecckkoouuttrreemmaaiinnssttaabblleeiinnrreeaalluussee..

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 classic tuner displays to land an 80s/90s retro-futurist texture. View morphs are tuned like touge drifting, brief loss of control that snaps back to a locked line, so the distortion resolves into smooth, aggressive motion that matches the brand attitude.

Motion
Tokens

Code Icon
All timing, easing, and stagger values live in one file. Change a single duration and watch it propagate through entry animations, page transitions, and scramble effects. This file becomes the governance layer teams tune against, keeping 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,,aannddppaaggeecchhaannggeettrriiggggeerrssccoooorrddiinnaatteeddsseeqquueenncceesstthhaattmmaaiinnttaaiinnssppaattiiaallccoonnttiinnuuiittyyaannddgguuiiddeeuusseerraatttteennttiioonn..TThheerreessuullttiissaaccoonnssiisstteennttmmoottiioonnllaanngguuaaggeetthhaattffeeeellssnnaattiivvee,,ssppeeeeddssiitteerraattiioonn,,aannddrreedduucceessrreeggrreessssiioonnssaaccrroossssccaarrttaannddcchheecckkoouutt..

From Dilution to One Brand

Maropost

From Dilution to One Brand