Skip to content

feat(registry): mk-background — minimal procedural gradient background#1933

Open
jbernard077 wants to merge 1 commit into
heygen-com:mainfrom
jbernard077:feat/registry-mk-background
Open

feat(registry): mk-background — minimal procedural gradient background#1933
jbernard077 wants to merge 1 commit into
heygen-com:mainfrom
jbernard077:feat/registry-mk-background

Conversation

@jbernard077

@jbernard077 jbernard077 commented Jul 4, 2026

Copy link
Copy Markdown

What

A new registry block: mk-background — a procedural soft-blob gradient backdrop in a minimalist presentation style.

  • Two soft radial blobs (position, radius, color, opacity via CONFIG) drifting slowly over a base color — the gradient is fully procedural, no baked assets
  • Bar mask: an animatable rounded-rect card — the default 10s timeline showcases full-bleed → floating card over the stage → full-bleed
  • Light and dark schemes (#f5f5f7 stage / white base vs. black / violet blobs), all colors exposed as --mk-* CSS custom properties so a host can re-skin without editing the block
  • Optional frost mode (contentOpacity + frostBlur) for the frosted-card look over footage
  • Seek-safe: single paused GSAP timeline, no rAF, no randomness

Why

First of a planned family of minimal presentation-style presets (backgrounds, pill callouts, spec lists, karaoke-highlight typography, placeholder grids, a text-clone-wall transition). This block is the foundation the rest demo on. The design language is a clean-room re-implementation of widely used minimalist presentation conventions — procedural soft-blob gradients, Inter typography, restrained motion. No third-party assets or code were copied.

Validation

  • hyperframes lint → 0 errors, 0 warnings
  • hyperframes validate --no-contrast → no console errors
  • Layout inspector → 0 issues (blob overflow of the clipping card is intentional and marked data-layout-allow-overflow)
  • Rendered headless to MP4 (10s) — preview attached in a comment below

Notes for maintainers

  • External contribution — per CONTRIBUTING, the catalog PNG/MP4 upload needs a maintainer; preview MP4 is attached in a comment below
  • docs/catalog/blocks/mk-background.mdx was generated with scripts/generate-catalog-pages.ts. I did not commit the wider regeneration diff (docs.json / catalog-index.json), since the committed generated files appear to lag the generator and I didn't want to sweep unrelated churn into this PR

🤖 Generated with Claude Code

@jbernard077

jbernard077 commented Jul 4, 2026

Copy link
Copy Markdown
Author

Preview render (10s), re-rendered from the packaged registry item:

mk-background-preview.mp4

@jbernard077 jbernard077 changed the title feat(registry): mk-background — Apple-keynote procedural gradient background feat(registry): mk-background — minimal procedural gradient background Jul 5, 2026
…round

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@jbernard077 jbernard077 force-pushed the feat/registry-mk-background branch from a571fdf to 61c8213 Compare July 6, 2026 16:51
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.

1 participant