Brightcut Motion

A mock-up of the homepage, drawn from this design’s layout, palette and typefaces. A build follows the full prompt below.

Start from this templateRead the build prompt

Typefaces

Kanit's black weight gives the blunt heavy headlines, Bagel Fat One stays for the cartoonish logo, and Heebo is a neutral, system-like body.

• KanitHeadings: headlines 60-72px 900 uppercase, tight leading
• Bagel Fat OneHeadings: logo only
• HeeboBody: descriptions 16-18px grey

Who it is for

• AI video and film production studios
• Creative agencies selling commercials
• Brand marketers commissioning video
• Motion and content studios

Layout

1. Fixed header over video: wordmark left, centered links (Work, Process, Capabilities, Team, Contact), mute toggle and red 'Book a Call' pill right; header gains dark blur on scroll
2. Full-screen autoplay muted hero video with huge uppercase headline bottom-left and a 'Sound On' hint
3. Featured work card: embedded YouTube player above a light card with category tag, client, title, description and a four-column meta row (Industry, Style, Tone, Format)
4. Awards & Recognition strip
5. 'How we work' five-step process (Concept, Look, Production, Post, Delivery)
6. Capability cards
7. Team section
8. Contact / booking section with embedded calendar
9. Footer

Palette

bold, cinematic, playful, high-energy, modern. It feels like a studio reel that you can scroll.

• background#ffffff
• text#0a0a0a
• primary CTA red#dc2626
• card surface#fafafa
• muted#f4f4f5
• border#e4e4e7
• tag violet#7c3aed

Every checked pair, measured again

As vibld’s tokens

The palette on the fifteen colour tokens vibld styles a project with, each text colour on the fill it is read on. Marked tokens are solved from the palette, because no swatch held that role at 4.5:1.

• background
• card
• muted
• primary
• secondary
• accent
• destructive *

Type scale

Display

Heavy sans at weight 900, uppercase, 60 to 72px, tight leading; chunky rounded display face (Bagel Fat One) for the logo

Body

System UI sans 16 to 18px, gray #6b7280 for descriptions (#a1a1aa on dark surfaces), line-height 1.6 (the system face is not on Google Fonts; a vibld project loads Heebo)

A cartoonish rounded logo face contrasts with blunt heavy-sans headlines, which reads playful but confident.

Spacing and imagery

Wide 1150px container, generous 96px section padding, large 12px radius cards, pill buttons (9999px).

Full-bleed autoplay video and AI-generated surreal stills; YouTube embeds for portfolio pieces; glassy blurred overlays on top of footage.

Components

• Transparent-to-blurred sticky header
• Mute/unmute round icon button
• Red pill 'Book a Call' CTA
• Full-screen autoplay hero video
• Featured project card with embedded video
• Project meta grid (Industry/Style/Tone/Format)
• Category tag + client label
• Awards strip
• Five-step process timeline
• Capability cards
• Team grid
• Embedded booking calendar
• Slide-in mobile menu

Interactions

• Hero video autoplays muted, loops, and toggles sound
• Header switches to backdrop-blur once scrolled
• Smooth-scroll anchor navigation
• Custom keyframe animations such as film-strip scroll and floating elements
• Card hover lift and glass shine
• Mobile menu slides in from the right with spring motion and scroll lock
• Lazy-loaded images with fallback on error

Data

• Project{title, client, category, description, industry, style, tone, format, videoId, poster}
• ProcessStep{order, title, description}
• Capability{title, description, icon}
• Award{name, year, category}
• TeamMember{name, role, photo}

Build prompt

The baseline every prompt in the catalog assumes, then this design’s own ten sections, from goal to guardrails.

Copy the baseline and build prompt

### How to use these prompts
Paste a template's build prompt into your coding agent as the first message. Each prompt names its own stack, tokens and acceptance criteria; the rules below apply to all of them and can be prepended once per project.

### Engineering baseline
- TypeScript strict mode, no `any`, small typed components, feature folders, and one source of truth for design tokens (CSS variables consumed by Tailwind).
- Validate every input with a shared zod schema on the client and again on the server or edge function. Never trust client-side checks alone.
- Show loading, empty and error states for every async view. Surface errors in plain language with a retry, and log details to the console in development only.
- Keep secrets out of the bundle. Only publishable keys (for example a Supabase anon key) belong in client code; service-role keys, API keys and webhooks live in server or edge-function environment variables.

### Data and auth baseline (full-stack templates)
- Enable Row Level Security on every table before inserting data. Default-deny, then add owner-scoped policies (`auth.uid() = user_id`) and explicit role checks for admin views.
- Store roles in a separate table checked by a security-definer function, never in a user-editable profile field.
- Upload files to private storage buckets with size and MIME limits, and serve them through signed URLs.
- Rate-limit public endpoints (forms, auth, AI calls) and add a honeypot field or captcha to anonymous forms.
- Take payments through a hosted checkout and verify webhooks by signature. Never handle raw card data.

### Accessibility and UX baseline
- Target WCAG 2.2 AA: 4.5:1 contrast for normal text and 3:1 for large text, input borders, focus rings and meaningful icons or chart lines. Every palette in this catalog lists its verified pairs; re-check with a contrast tool after any colour change.
- Keep body text at 16px or larger with 1.5 line height, nothing below 12px, no light weights under 24px, and uppercase only for short labels.
- Give every interactive element a visible focus ring, full keyboard support, semantic landmarks, labelled form fields, and alt text on meaningful images.
- Respect `prefers-reduced-motion` for every animation. Give drag-and-drop and carousels keyboard and button alternatives.
- Build mobile-first and test at 375px, 768px and 1280px.

### Content guardrails
- Use original copy, fictional sample data and placeholder or licensed imagery. Do not reuse another product's name, logo, screenshots or marketing text.
- Label demo testimonials and metrics as samples. Collect the minimum personal data the feature needs.

### Goal
Build "Brightcut Motion", a one-page marketing site for a small studio that produces commercials and brand films with AI-assisted pipelines. The audience is brand marketers and agency producers. The page must grab attention with motion in the first second, prove craft through a featured project, explain a clear production process, and convert visitors into booked discovery calls.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Sheet, Dialog, Tabs, Tooltip), lucide-react. Framer Motion for the header transition, scroll reveals and the mobile menu spring. `react-lite-youtube-embed` or a click-to-load facade so heavy iframes load only on demand. Embed a third-party scheduling widget (Cal.com-style) for booking. No backend is needed.

### Pages & layout
Single page with anchor sections:
1. **Header**: bold rounded wordmark left, five centered links, a round mute toggle and a solid red pill "Book a call" right. It is transparent over the hero and turns to a dark translucent blur after 80px of scroll.
2. **Hero**: full-viewport looping muted video (WebM with MP4 fallback and a poster frame). A three-line uppercase headline anchored bottom-left, with a small "Sound on" hint near the toggle.
3. **Featured work**: video embed on top, then a light rounded card with a colored category tag, client label, large bold title, a two-line description and a four-column meta row (Industry, Style, Tone, Format).
4. **Recognition**: a row of festival and award badges built as text chips (no real logos).
5. **Process**: five numbered steps (Concept & script, Look & storyboard, Production, Post, Delivery), shown as horizontal cards on desktop and a vertical timeline on mobile.
6. **Capabilities**: a 2x3 grid of cards (campaign ads, brand films, music videos, social cutdowns and similar).
7. **Team**: 4 portrait cards.
8. **Contact**: short pitch, embedded scheduler, email link.
9. **Footer**: links and socials.

### Design system
Light page with dark hero. Tokens: `--background: #ffffff`, `--foreground: #0a0a0a`, `--cta: #dc2626`, `--card: #fafafa`, `--muted: #f4f4f5`, `--border: #e4e4e7`, `--tag: #7c3aed`. Dark mode: `--background: #0a0a0a`, `--card: #18181b`, `--foreground: #fafafa`, `--muted-foreground: #a1a1aa`. Fonts: "Bagel Fat One" for the logo and occasional display words, "Heebo" for UI; display headlines at weight 900 uppercase with 0.95 leading; body Heebo 16 to 18px at 1.6. Scale: 72/48/32/20/16px. Radius 12px on cards and pill buttons. Soft shadow `0 10px 30px -12px rgb(0 0 0 / .15)`. Motion: 250ms ease-out on hovers, 600ms reveals, spring (stiffness 300, damping 30) for the menu.
- Typeface: Kanit (Google Fonts) for headlines 60-72px 900 uppercase, tight leading.

### Components & interactions
- Mute toggle: `aria-pressed`, icon swap, tooltip.
- CTA button: hover darkens and lifts 2px, active presses, focus shows a ring.
- Video facade: poster plus play button; loading spinner; error fallback image.
- Process cards: hover raises the card and a number badge fills with red.
- Mobile menu: right Sheet with body scroll lock, auto-closes on link click.
- Keyframes: a slow film-strip marquee behind the awards row and floating accents, all disabled when reduced motion is set.

### Data & state
Typed content arrays: `Project{title, client, category, description, industry, style, tone, format, videoId, poster}`, `Step{n, title, body}`, `Capability{title, body, icon}`, `Member{name, role, photo}`. State is local: mute flag, menu open, scroll position. Seed fictional clients and team names.

### Accessibility
The autoplay video must be muted, include a pause control and stop for `prefers-reduced-motion`. Keep hero text on a bottom gradient of at least 65% black. White on `#dc2626` passes AA at any size; hover uses `#b91c1c`. Give embeds a `title`. The menu should trap focus and close on Escape. Use a skip link and landmark regions. Verified contrast: muted #6b7280 on #fafafa = 4.63:1; CTA #ffffff on #dc2626 = 4.83:1; hero on scrim #ffffff on #595959 = 7.0:1; dark muted #a1a1aa on #0a0a0a = 7.72:1.

### Security
Only embed from allow-listed hosts (youtube-nocookie, the scheduler). Use sandboxed iframes where possible, no secrets in the client, and `rel="noopener noreferrer"` on external links. A CSP-friendly setup means no inline scripts.

### Performance & SEO
Compress the hero video under 4 MB, preload only the poster, and load embeds on click. Lazy-load images with fallbacks. Use meta and OG tags with a still frame, a VideoObject JSON-LD block and semantic H1 and H2 elements. Target LCP under 2.5s on 4G.

### Guardrails
- Use original copy and placeholder or generated footage only, with no real brands, clients or award logos.
- Do not present invented praise as real client testimonials.
- Store no visitor data; booking lives in the third-party tool.
- Keep components small and typed, with no `any`, and show embed failures visibly.
- Done when: the hero video loops muted with a working toggle; the header blurs on scroll; the featured embed loads on click; the process adapts to mobile; reduced motion stops all loops.

Open the builderAll templatesThis palette on its own