GM Drink — Custom Animated Shopify Hydrogen PDP

Project Overview :

Designed and built a fully custom, production-grade headless storefront for GM Drink, a performance energy drink brand, on the latest Shopify Hydrogen 2026.1 framework. The project was a complete ground-up rebuild: a pixel-faithful homepage matching the existing gmdrink.com, a heavily customized product detail page driven by a multi-section Figma design, a custom header and notification system, brand-accurate typography and theming, and a CI-driven deployment pipeline targeting Shopify Oxygen. The storefront runs on React Router 7 (the new Hydrogen stack, replacing Remix), React 19, and Tailwind CSS v4, with TypeScript end to end. One of the defining challenges of this build was the sheer volume of custom motion work — the brand identity is heavily animation-driven, and we tackled every effect from scratch rather than relying on stock libraries.

Animations We Tackled :

The storefront ships a deep set of bespoke animations — every section was choreographed to match the brand's high-energy feel without sacrificing Core Web Vitals on Oxygen edge workers. Highlights include:

• Lightning effect on the PDP Hero — custom layered SVG/CSS lightning flashes with timed opacity and blend modes, gated to run only when the hero is in view so it never burns CPU off-screen.
• Scrolling marquee notification bar — infinite, accessibility-aware promo ticker built with react-fast-marquee, pause-on-hover, and reduced-motion fallbacks.
• Scroll-driven header transitions — a custom useSectionVisibility hook drives a smooth fade/slide between the transparent over-hero header and the solid in-page header, plus mounts/unmounts the notification bar based on scroll position. One source of truth, no flicker.
• Section-by-section reveal animations — Framer Motion entry animations (fade, lift, stagger) wired to react-intersection-observer so every PDP section animates in only when scrolled into view.
• Effects Comparison table & mobile cards — animated comparison row hover states on desktop and a fully separate animated card-stack variant on mobile, both sharing the same animation primitives.
• Ingredients section large-number art — overflow-visible giant numerical glyphs that parallax behind ingredient cards, with carefully tuned z-index layering and easing.
• Diagonal section dividers — animated dark diagonal cut between the Truth-About-Energy hero and the cards beneath, scaled responsively across breakpoints so the cut never breaks on narrow viewports.
• Offer Selector micro-interactions — variant swap with per-pack imagery cross-fade, animated price/savings transitions, and tactile press states on the quantity stepper.
• Swiper-powered carousels — Reviews, Moment Clicks, and Timeline sections all use Swiper with custom pagination/transition tuning to match the Figma motion spec.
• Accordions & FAQ — Radix-powered animated open/close with measured-height transitions so content never jumps, plus rotating chevron icons.
• Reduced-motion respect — every animation respects prefers-reduced-motion, so the storefront stays fully usable for motion-sensitive visitors.

Tech Stack :

Shopify Hydrogen 2026.1, React Router 7, React 19, TypeScript, Tailwind CSS v4 (CSS-first config), Radix UI primitives, Framer Motion, Swiper, react-fast-marquee, Zustand for client state, class-variance-authority for variant-driven styling, GraphQL with auto-generated types via Hydrogen codegen, Sanity CMS via hydrogen-sanity, and Biome for lint and formatting. The storefront deploys to Shopify Oxygen through a single GitHub Actions workflow on every merge to main.

Custom Product Detail Page (PDP) :

The product page is the centerpiece of the build. It is composed of fourteen custom-built sections, each individually designed in Figma and converted into responsive React components: a lightning-effect Hero with variant-aware product imagery, an Offer Selector (single / 6-pack / 12-pack with per-variant pack art), a Truth About Energy editorial block with diagonal dark-bar dividers, a Why-GM-Works features grid, an Ingredients section with large display numbers and overflow-visible art layering, an Effects Comparison table (with a separate mobile-card variant for small viewports), a Designed-For target-audience strip, a Science Copy block, a Timeline section, a Moment Clicks gallery, a Review Hero with rounded brand frame, a Reviews section integrating Judge.me star ratings, a Feature Cards strip, and a closing CTA + FAQ accordion.

Custom Header & Navigation :

Two-row dark-themed header faithful to the live gmdrink.com brand: top row carries an animated marquee notification bar with scrolling promo copy, and the bottom row carries the GM logo (correctly sized at 75px desktop / 50px mobile per spec), primary nav, search trigger, account, and cart with a live item-count badge. A custom section-visibility hook drives header transparency and the notification-bar mount/unmount on scroll, so the header transitions smoothly as the user moves through hero sections.

Branding, Typography & Theming :

Self-hosted brand fonts — Chakra Petch for body and the Sequel Sans family for headings — wired into Tailwind v4 via @font-face declarations in app/styles/fonts.css. Brand palette implemented as CSS custom properties: beige background (#dcdbd3), near-black text (#212121), lime accent (#D8FF18) and magenta (#FF00FF). A GlobalStyle component injects theme tokens at the root so the same palette is reusable from any component without prop-drilling.

Headless Architecture & Performance :

The root loader is split into critical data (layout, shop) and deferred data (cart, user status), so the document streams TTFB-first while non-critical data resolves in background streams. All Storefront API queries live in a centralized app/graphql/queries.ts with shared fragments, and types are auto-generated via Hydrogen codegen so the React layer is fully type-safe against the live schema. The server entry runs on Cloudflare Workers via Shopify Oxygen.

CMS & Content :

Sanity CMS integrated through hydrogen-sanity for editable marketing copy and section content. Sanity context initialization is defensive — if Sanity env vars are missing in any environment, the storefront degrades gracefully rather than crashing the request. Content blocks render through typed React components and stay in sync with the Storefront API product graph.

Deployment & CI/CD :

A single GitHub Actions workflow (.github/workflows/oxygen-deployment-1000110781.yml) builds the project with codegen and ships it to Shopify Oxygen on every merge to main. The duplicate legacy workflow was removed during the build, and the manual npx shopify hydrogen deploy path was deliberately retired — its auth tokens expire and it is not safe for team-shared deploys. The end-to-end loop is: push branch → open PR → squash merge → automatic Oxygen deploy with cache-busting.

Code Quality & Conventions :

Biome handles both linting and formatting (double quotes, always semicolons), replacing the older ESLint + Prettier combo for a single fast toolchain. TypeScript runs in relaxed-strict mode against auto-generated GraphQL types. A cn() utility (clsx + tailwind-merge) standardizes class composition, and class-variance-authority drives variant logic for buttons, badges, and section primitives. Path alias ~/ maps to app/ across the codebase.

Notable Engineering Wins :

Replaced all Figma MCP asset URLs with locally hosted images so the storefront has no external image dependency. Migrated the homepage from a quick scaffold to a source-to-source port of the live gmdrink.com layout, including importing the original Venue v17 CSS, then progressively rewriting it onto Tailwind v4 utilities for maintainability. Solved a tricky narrow-viewport scaling bug in the Truth-About-Energy section, made offer-selector imagery per-variant rather than shared, and added a section-visibility hook that drives both header and notification-bar behavior from a single source of truth.