jxkeframes.com

jxkeframes

My storefront for The Complete Higgsfield Guide, a paid course on making AI videos with Higgsfield and posting them to TikTok, designed in strict black and white.

jxkeframes.comOpen Project
jxkeframes.comView live site →
Project Overview

jxkeframes is where I sell The Complete Higgsfield Guide, a course that teaches my AI video workflow end to end: the idea, the source clip, the reference images, the Genjutsu run, the edit and the TikTok post. The guide reads like documentation, with twelve chapters, a sidebar, search, copyable prompt templates and a credit calculator that runs on current Higgsfield pricing, and the free preview chapters are open to anyone. The design runs on one rule: no hue anywhere. Every color token is black, white or a neutral gray, every image and video is shown in grayscale with an optional film grain or halftone screen, and even the code highlighting is desaturated. Corners are square across the whole interface, type is small and tightly controlled (13px Inter body, 10 to 11px tracked uppercase labels, Geist Mono for prompts and figures), and pages are laid out on hairline rules and a 12-column grid. The JXKEFRAMES wordmark is the one oversized element, sized off its own container so it spans the column at every width and staggers in letter by letter. Motion stays quiet and purposeful: pages swap through view transitions, the nav bar condenses into a floating pill on scroll, a ring cursor grows over links on mouse devices, underlines draw in from the left, product cards tilt toward the pointer, and a monochrome beam traces the buy card. Light and dark themes, a ⌘K command palette, and a reduced-motion path for every effect round it out. Behind the storefront, Stripe Checkout sells the guide, a signature-verified webhook records each purchase in Supabase, buyers sign in by magic link, and paid chapters unlock per request.

Tech Stack
Next.js 16 (App Router)React 19TypeScriptTailwind CSS v4Fumadocs (MDX)MotionStripe CheckoutSupabaseResend
Key Features
  • Monochrome design system — black, white and one gray ramp, zero chroma, square corners, grayscale media
  • Container-sized hero wordmark with a per-letter stagger, marquee strip, and hairline 12-column layout
  • View-transition page swaps, a nav bar that morphs into a pill on scroll, and a follower ring cursor
  • Docs-style course reader with sidebar, search, copyable prompt templates, and synced chapter progress
  • Live credit calculator driven by one pricing source, with a last-verified date on every chapter
  • Stripe Checkout with a withdrawal-waiver step and an idempotent, signature-checked purchase webhook
  • Magic-link sign-in for buyers only, paywalled chapters, and Row Level Security tested in-memory
  • Light and dark themes, ⌘K command palette, and reduced-motion fallbacks throughout

© 2025 Werner's Works. All rights reserved.