Lyrafilm

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

Assistant is the named face and no other template uses it on its own; its heavy weights have the bright, sci-fi poster energy the night-sky studio needs.

• AssistantHeadings: hero 96px / 48px mobile 800, H2 52px 700, gradient eyebrows 20px 600
• AssistantBody: lead 20px 600, body 16px/1.6

Patterns

• deep navy space backdrop with pixel squares, sparkles and orbit line
• huge bold headline with violet-to-pink gradient words
• outlined pill CTA with sparkle icon
• sticky header that appears after the hero
• full editor mock (prompt panel, video preview, settings inspector) with glowing arc behind
• gradient eyebrow text above headings
• three-step how-it-works cards with mini-UI tops
• alternating feature rows (text to video, image to video, extend video) with input-bar + result mock
• template gallery grid
• why-choose benefit cards
• creator persona cards
• testimonials
• two-plan pricing
• FAQ
• gradient CTA band

States it is designed for

• Prompt demo: empty (button disabled), typing, generating (progress), result, failed with retry, rate-limited
• Image upload demo: drag-over, invalid type/size error, uploaded thumbnail
• Template tiles: poster until hover; reduced motion keeps posters
• Pricing: two plans with the recommended one highlighted
• Reduced motion: no twinkle, drift, tilt or preview loops
• Long prompts wrap in the caption bar and truncate with ellipsis in chips

Who it is for

• Short-form video creators
• Social media marketers
• Small agencies producing ad variations
• Educators making explainer clips

Layout

1. Hero: space backdrop (navy with purple haze, pixel-square pattern, glinting sparkles, thin orbit arc), 96px bold two-line headline with first words in violet-pink gradient, one-line subline, outlined 'Generate video' pill with sparkle icon
2. Sticky header (appears on scroll): logo left, gradient 'Get started' pill right
3. Editor mock: rounded glass frame with top bar (project select, theme toggle, bell, avatar, play, upgrade), left prompt + image-upload panel with gradient generate button, center video preview with play button and caption bar with language select, right inspector (model, size, length, colour, layout select, opacity/blur sliders, music toggle); a violet light arc sweeps behind
4. How it works: gradient eyebrow, heading, three cards (prompt/image input, mode choice, generate & download with thumbnail row), repeated CTA
5. Feature rows alternating: eyebrow + heading + one line + outlined CTA vs a card with input bar, gradient sparkle button and a generated frame
6. Templates grid, why-choose cards, creator personas, testimonials, pricing (two plans), CTA band, FAQ, footer with legal links
7. Mobile: headline 48px, editor mock simplified to preview + prompt, rows stack, sticky header remains

Palette

vivid, imaginative, energetic, sci-fi, creator-first. A night-sky studio where prompts turn into glowing scenes.

• canvas (navy black)#000024
• card surface#0f0f31
• primary text#ffffff
• muted text#dbdbdb
• violet (gradient start on dark, accessible fix)#8e68df
• violet fill (buttons)#6836d4
• pink (gradient end on dark)#e53873
• pink fill under white text (accessible fix)#e22163
• amber highlight#f6a816
• input border#5e5e86

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

Assistant 800, 96px hero (48px mobile), normal tracking, 1.05 line-height; section headings Assistant 700 52px

Body

Assistant 600, 20px lead, 16px / 1.6 body

Gradient text only on large display words (≥40px) and short eyebrows; eyebrows 20px 600 in gradient.

Spacing and imagery

Bold and roomy: 1180px container, 120px sections, 24px card gaps; cards 24px radius with inner panels 16px; pills fully rounded; the editor frame uses a 2px translucent border and outer violet glow.

AI-style sci-fi and fantasy frames (explorer in alien valley, neon spaceship over rainbow), editor UI mocks, pixel-square patterns and sparkles, light arcs in violet and pink.

Components

• Space backdrop with sparkles
• Gradient headline span
• Outlined sparkle pill
• Sticky header
• Editor mock (prompt panel, upload, preview player, caption bar, inspector with sliders/toggles)
• Gradient generate button
• Step card with mini-UI
• Feature row with input-bar mock
• Template tile
• Benefit card
• Persona card
• Testimonial card
• Pricing card
• FAQ accordion
• CTA band

Interactions

• Sparkles twinkle and pixel squares drift slowly
• Sticky header slides down once the hero leaves the viewport
• Editor mock tilts slightly with pointer (max 4deg)
• Generate buttons show a shimmer sweep on hover
• Template tiles play a muted preview loop on hover/focus
• Outlined pills fill with translucent white on hover; 2px violet focus ring

Data

• Step{number, title, body, mini_ui}
• FeatureRow{eyebrow, title, body, mode (text|image|extend), example_frame}
• Template{id, title, poster, preview_url, aspect (9:16|16:9|1:1)}
• Persona{title, body, icon}
• Plan{id, name, price, credits, features[], recommended}
• Testimonial{quote, name, role}
• DemoGeneration{id, prompt, status (queued|processing|done|failed), video_url, created_at}

Guardrails

Experience

• The editor mock is the proof; keep it large and readable
• Do not name third-party video models; describe modes generically (cinematic, animated, realistic)
• Every section has at most one CTA, all leading to the same generator
• Sample frames are invented renders; no recognisable characters or real people
• State credit limits clearly in pricing

Accessibility

• Gradient text uses the paler violet #8e68df start so it passes on navy
• White text on gradient buttons uses the deeper pink #e22163 end stop
• Hover-only previews also trigger on keyboard focus and are muted
• Sparkle and pixel layers are aria-hidden and stop under reduced motion
• Slider mocks in the inspector are decorative unless interactive; if interactive, use Radix Slider with labels

Security

• Demo generation goes through an Edge Function with per-IP rate limits, prompt length cap and a content filter
• Uploads: images only, 10MB max, type sniffed server-side, stored in a private bucket with signed URLs
• RLS on demo_generations: owner-only read when signed in; anonymous results expire after 24h
• Never expose model provider keys to the client

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 an entry'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 entries)
- 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.

### SaaS screen baseline
- Design every screen for its full set of states: first-run empty, loading skeleton, partial data, error with retry, permission-denied, and success feedback. Each entry lists the states its screen needs.
- Keep destructive actions (delete, revoke, downgrade, remove member) behind a confirmation that names the object, and prefer undo over a second dialog where the action is reversible.
- Enforce authorisation on the server for every action a screen exposes. Hiding a button is not access control; check the role again in the API or RLS policy.
- Never show secrets (API keys, tokens) in full after creation. Show them once, then mask them, and offer rotate and revoke.
- Keep the app shell (navigation, workspace switcher, account menu) consistent across screens, and preserve filters, sort and scroll position when the user navigates back.

### Goal
Build a one-page site for **Lyrafilm**, an AI video generator that turns a text prompt or an image into a short clip with captions, effects and music. The page should feel like a night-sky studio: a huge gradient headline, a convincing editor mock, and a clear three-step path from prompt to download, ending in simple pricing.

### Stack
Next.js (App Router) with React and TypeScript, Tailwind CSS, shadcn/ui on Radix (Slider, Switch, Select, Accordion), lucide-react (sparkles, play, upload), Motion for sparkles, sticky header, tilt and shimmer, react-hook-form + zod for the prompt demo. Supabase Edge Function queues demo generations; Supabase Storage (private bucket) holds uploads.

### Pages & layout
1. **Home** (single scroll): space hero (96px headline with gradient words, subline, outlined "Generate video"); sticky header after hero; editor mock with light arc; how it works (three step cards + CTA); feature rows (text→video, image→video, extend a clip); template grid; why-choose cards; creator personas; testimonials; CTA band; pricing (two plans); FAQ; footer.
2. **Privacy** and **Terms** pages.
Mobile: 48px headline, editor mock reduced to preview + prompt panel, all rows stacked, sticky header with logo and CTA.

### Design system
- Colors: `--canvas: #000024`, `--card: #0f0f31`, `--fg: #ffffff`, `--muted: #dbdbdb`, `--violet-text: #8e68df`, `--violet: #6836d4`, `--pink-text: #e53873`, `--pink: #e22163`, `--amber: #f6a816`, `--input-border: #5e5e86`, `--ring: #8e68df`. Text gradient: `linear-gradient(90deg, #8e68df, #e53873)`; button gradient: `linear-gradient(90deg, #6836d4, #e22163)`.
- Fonts: Assistant; hero 96px/1.05 800; H2 52px 700; lead 20px 600; body 16px/1.6.
- Spacing: 8px base; sections 120px / 72px; container 1180px.
- Radius: cards 24px, inner panels 16px, pills 999px.
- Shadows/glow: editor frame `0 0 80px rgba(104,54,212,.35)`.
- Motion: twinkle 3s random delays; header slide 200ms; tilt spring; shimmer 1.2s.

### Components & interactions
SpaceBackdrop (aria-hidden layers), GradientText, SparklePill (outlined | gradient), StickyHeader, EditorMock (TopBar, PromptPanel, UploadTile, PreviewPlayer, CaptionBar with language Select, Inspector with Slider/Switch/Select), StepCard, FeatureRow (reversible), PromptDemo (input + generate), TemplateTile (hover/focus preview), BenefitCard, PersonaCard, TestimonialCard, PlanCard, FaqAccordion, CtaBand.

### Data & state
Static JSON for steps, features, templates (invented posters), personas, plans, testimonials. PromptDemo states: empty, typing, generating, done (inline player), failed, rate-limited. UploadTile: idle, drag-over, invalid, uploaded.

### Accessibility
Body 16px+. Gradient text restricted to display sizes and short eyebrows with the paler stops. Previews muted and triggered by focus too. Backdrops aria-hidden; reduced motion disables twinkle, drift, tilt and previews. Inspector controls labelled. Focus ring 2px `--ring`.
Verified contrast: white text on canvas: #ffffff on #000024 = 20.48:1; muted text on card: #dbdbdb on #0f0f31 = 13.39:1; gradient start (violet) text on canvas: #8e68df on #000024 = 5.07:1; gradient end (pink) eyebrow on card: #e53873 on #0f0f31 = 4.54:1; white label on violet button stop: #ffffff on #6836d4 = 6.85:1; white label on pink button stop: #ffffff on #e22163 = 4.53:1; amber highlight on card: #f6a816 on #0f0f31 = 9.30:1; input border on card: #5e5e86 on #0f0f31 = 3.02:1; focus ring (violet) on canvas: #8e68df on #000024 = 5.07:1.

### Security
Edge Function validates prompts (≤ 400 chars) with zod, runs a content filter, rate-limits per IP, and queues jobs; `demo_generations` RLS: owner-only when signed in, anonymous rows expire in 24h via a scheduled job. Uploads: image MIME sniffed server-side, 10MB cap, private bucket, signed URLs (10 min). Provider keys live only in function secrets.

### Performance & SEO
Posters AVIF; preview loops as short muted MP4s loaded on hover/focus only. Backdrop layers in CSS/SVG. OG image of the editor mock; FAQ structured data. Target LCP under 2.2s (headline).

### Guardrails
- Don't name third-party AI video models or companies; describe modes generically.
- No recognisable characters, celebrities or real people in sample frames.
- Acceptance criteria:
  - [ ] Hero, editor mock and sticky header behave at 390/768/1440px
  - [ ] Prompt and upload demos handle every state and limit
  - [ ] Gradient text and buttons meet listed contrast
  - [ ] Reduced motion honoured

Open the builderAll templatesThis palette on its own