Skip to content

Feat/hero studio#18

Open
PaladinKnightMaster wants to merge 10 commits into
CristianOlivera1:devfrom
PaladinKnightMaster:feat/hero-studio
Open

Feat/hero studio#18
PaladinKnightMaster wants to merge 10 commits into
CristianOlivera1:devfrom
PaladinKnightMaster:feat/hero-studio

Conversation

@PaladinKnightMaster

@PaladinKnightMaster PaladinKnightMaster commented Jun 14, 2026

Copy link
Copy Markdown

Hero Studio

Right now every hero exports the exact same hardcoded markup. The code modal is basically a read-only viewer. This PR turns it into a tiny hero generator: pick a video, tweak the content/colors/behavior, watch a live preview, and copy or download the result in HTML, React, or Next.js — with your changes baked in.

It's additive, not destructive: the curated handcrafted heroes stay exactly as they are (default tab). Studio is an opt-in "build your own" mode right next to them.

what's new

  • Hero Studio panel — edit heading, highlight, subheading, brand, CTA, accent, overlay strength, performance + motion presets. Code regenerates as you type, settings persist in localStorage.
  • Live preview — a sandboxed iframe renders your customized hero against the real video, debounced so it doesn't thrash.
  • React export — the README already promised "HTML, React, or Next.js" but the modal only shipped two. Now it's all three.
  • New componentsHeroStudio, SegmentedControl, HeroPreviewFrame (all dependency-free).

perf + a11y (not an afterthought)

  • Gallery cards now use poster frames + preload="none" + lazy video load on scroll → zero video bytes for off-screen cards. Homepage went from dynamic → static + ISR (revalidate 5m).
  • Every generated hero ships with a keyboard-accessible pause control (WCAG 2.2.2), prefers-reduced-motion handling, and contrast-safe overlay scrims.
  • Graceful fallback: if a poster is missing (404), that card quietly falls back to the original first-frame behavior with a subtle shimmer underneath — so nothing ever renders as a blank tile, and deploys don't block on poster generation.

also fixed along the way

  • ZIP downloads now pack the video at the path the code actually references — correct for generated and curated heroes, HTML and Next.js.
  • motion: "always" preset is now honored in all three generators (was silently ignored in React/Next).
  • CTA links are sanitized (javascript: etc. → #).
  • Resolved a few pre-existing lint errors so the new CI gate is green from day one.

how it was tested

  • pnpm lint (0 errors) · pnpm exec tsc --noEmit · pnpm test (15/15) · pnpm build — all green ✅
  • Manually clicked through the whole flow in the browser: gallery, curated/studio toggle, live editing, all three tabs, the live-preview iframe, overlay + pause control.
  • Added a CI workflow that runs all four gates on every PR.

heads up before deploy

Run pnpm posters (needs ffmpeg) and let the sync-r2 workflow upload them. The site degrades gracefully without posters, but they're what makes first paint instant.

@vercel

vercel Bot commented Jun 14, 2026

Copy link
Copy Markdown

@PaladinKnightMaster is attempting to deploy a commit to the Cristian's projects Team on Vercel.

A member of the Team first needs to authorize it.

@PaladinKnightMaster PaladinKnightMaster changed the base branch from main to dev June 14, 2026 12:35
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants