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, },}©
ZHENLONG WU
SCROLL TO TOP
System
Setup

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
PPiixxeellaatteeddeennttrryybboorrrroowwssffrroommVVHHSSttaappeeddiissttoorrttiioonn,,llooaaddiinngg--ssccrreeeennbbrreeaakkuupp,,aannddGGaammeeBBooyyvviissuuaallqquuaalliittyy..TThheerreevveeaallssttaarrttssrraawwaannddrreessoollvveesswwiitthhccoonnttrroolllleeddffiiddeelliittyyssooaattmmoosspphheerreeaannddpprroodduuccttddeettaaiillccaannccooeexxiisstt..

SSccrraammbblleetteexxttiissiinnssppiirreeddbbyyPPoowweerrFFCCaannddAA''PPEEXXiiSSAAFFCCssttaarrttuuppssccrreeeennsswwhheerreecchhaarraacctteerrssfflliicckkeerrbbeeffoorreetthheeyysseettttllee..TTiimmiinngggguuaarrddrraaiillsskkeeeepptthheejjiitttteerrsshhaarrppwwhhiilleepprreesseerrvviinngglleeggiibbiilliittyyaaccrroossssbbrreeaakkppooiinnttss..
VViieewwmmoorrpphhiinnggttaakkeessccuueessffrroommttoouuggeeddrriiffttiinngg,,aabbrriieeffbbrreeaakkiinnbbaallaanncceetthhaattssnnaappssbbaacckkiinnttoolliinnee..SShhaarreeddttiimmiinnggaannddcclleeaannuupppprreesseerrvveessppaattiiaallccoonnttiinnuuiittyyaaccrroossssaarrcchhiivvee,,ccaarrtt,,aannddcchheecckkoouuttfflloowwss..
Motion
System
Motion
Tokens
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 }, 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 }, 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