Loopreel

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

Commissioner is a clean, low-contrast grotesk that tightens gracefully at 80px, keeping the white gallery glossy and minimal around the colourful posters.

• CommissionerHeadings: hero 80px 600 at -0.06em, H2 56px at -0.04em, step titles 22px 600
• CommissionerBody: body 17px/1.55 500 at -0.01em, buttons 16px 500

Patterns

• centered app-icon hero
• fan of phone mockups with center device raised
• oversized tight-tracked headline
• store-download pill CTA plus ghost 'watch trailer' button
• sticky phone mockup that swaps screens while copy scrolls
• poster-card collage in rounded tiles
• numbered three-step how-it-works
• FAQ accordion
• testimonial cards
• newsletter signup band
• closing download CTA
• single-page scroll with no nav links

States it is designed for

• Newsletter: invalid email inline error, submitting, subscribed confirmation, already-subscribed message
• Trailer modal: loading poster frame, playing, error fallback with a link to the store page
• Store button: platform detection shows the relevant store first, with the other still reachable
• Images: blurred low-res placeholders while phone screens load
• Reduced motion: no parallax or scroll-linked swaps; features show static screenshots
• Long FAQ answers wrap without shifting the layout

Who it is for

• Film and series fans browsing for a new streaming app
• Mobile app founders who need a launch page
• Marketing teams presenting an app update

Layout

1. Minimal top bar: rounded app icon + name left, blue 'Get the app' pill right; no other navigation
2. Hero: large app icon centered, two-line 80px headline, then a horizontal fan of five phone mockups (center one larger, outer ones cropped by the viewport), subline in gray, blue download pill + light 'Watch trailer' button with play icon
3. Showcase: left-aligned heading with a single tall phone and a collage of three rounded poster tiles beneath
4. Features: heading plus sticky phone mockup on one side while short feature blocks scroll past on the other
5. Collection section: phone mockup with a grid of poster thumbnails inside, generous white space around
6. Quality / 'endless entertainment' section with large imagery
7. How it works: three numbered steps (get the app, browse and buy, watch any time)
8. FAQ: four questions in an accordion
9. Testimonials: cards of short reviews
10. Newsletter band: heading, email input and subscribe button
11. Final CTA: 'download now' heading with store buttons, small footer
12. Mobile: headline 44px, fan shows the center phone with neighbours cropped at the edges, sticky mockup becomes inline images

Palette

clean, glossy, cinematic, confident, minimal. A bright white gallery where the colorful posters are the only noise.

• page background#ffffff
• soft section / ghost button#fafafc
• heading and body text#1d1d1f
• secondary text#6e6e73
• primary blue (accessible fix)#0071ed
• secondary blue button (accessible fix)#0c7cbc
• input border#86868b
• device frame#000000
• divider (decorative)#f5f5f7

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

Commissioner 600, 80px hero with -0.06em tracking and 1.0 line-height; section headings 56px with -0.04em

Body

Commissioner 500, 17px / 1.55 with -0.01em tracking; step titles 22px 600

Very tight tracking on large sizes only; body and labels use near-normal tracking. Buttons 16px 500.

Spacing and imagery

Very airy: 160px between sections, 980px text container, imagery allowed to bleed to the viewport. Buttons 16px radius, poster tiles 12-16px radius, phones use realistic device frames with long soft shadows.

Moody, saturated film-poster style photographs (silhouettes in red, orange and teal light) placed inside realistic phone frames and rounded tiles. Long diagonal drop shadows under devices. No illustrations or icons beyond a play glyph.

Components

• App icon tile
• Phone mockup frame with swappable screen image
• Phone fan carousel
• Store download pill button
• Ghost trailer button with play icon
• Trailer video modal
• Poster tile collage
• Sticky mockup with scroll-linked screen swap
• Numbered step card
• FAQ accordion
• Review card
• Newsletter form

Interactions

• Phone fan slides up and spreads on load; outer phones parallax slightly on scroll
• Sticky phone cross-fades to the screen that matches the feature in view
• Poster tiles scale 1.02 on hover
• 'Watch trailer' opens a modal video player; Escape closes and returns focus
• Download pill darkens on hover and shows a 2px blue focus ring
• FAQ items expand with a smooth height transition

Data

• Screen{id, label, image, alt}
• Feature{id, title, body, screen_id}
• Step{number, title, body}
• FaqItem{question, answer}
• Review{quote, author_name, rating (1-5)}
• Subscriber{email, created_at, source (hero|footer)}
• StoreLink{platform (ios|android), url}

Guardrails

Experience

• The phone fan is the hero; keep text above it to a headline and nothing else
• Keep exactly two hero actions: download and watch trailer
• Use invented poster art or licensed stock; never real film titles or studio artwork
• Sticky mockup sections must degrade to plain image + text stacks on mobile
• Store CTA copy stays short (three to five words)

Accessibility

• Every phone screenshot gets alt text describing the app screen, not the photo
• Blue buttons use the darkened #0071ed / #0c7cbc so white labels pass 4.5:1
• Trailer modal traps focus, has captions and a labelled close button
• Honor prefers-reduced-motion for parallax, fan animation and screen swaps
• Gray secondary text #6e6e73 is used only at 17px and above

Security

• Newsletter insert via an Edge Function with zod validation and a honeypot
• RLS on subscribers: no anon select; insert only through the function
• Rate-limit subscribe requests per IP and send double opt-in through a transactional email service
• Store links are static allow-listed URLs, never built from query params

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 launch site for **Loopreel**, a mobile app where people browse, buy and watch films and series on their phone. The page should feel like a glossy product unveiling: a white stage, a fan of phones, and cinematic poster colour doing the talking. Success is a tap on the store button or the trailer.

### Stack
Next.js (App Router, static export) with React and TypeScript, Tailwind CSS, Radix Dialog and Accordion, lucide-react for the play and chevron icons, Motion for the phone fan, parallax and scroll-linked screen swaps, react-hook-form + zod for the newsletter. A Supabase Edge Function stores subscribers.

### Pages & layout
Single page, top to bottom:
1. Top bar: app icon + name left, "Get the app" pill right. No nav links.
2. Hero: large rounded app icon, 80px two-line headline, a row of five phone mockups (center raised and larger, outer two cropped by the viewport), gray subline, blue store pill and light "Watch trailer" button.
3. Showcase: left-aligned heading, one tall phone, three poster tiles in a staggered collage.
4. Features: two-column scrollytelling; phone sticks on the left and swaps screens as four feature blocks pass on the right.
5. Collection: phone showing a poster grid, centered.
6. How it works: three numbered steps in a row.
7. FAQ (four items), reviews (three cards), newsletter band, final download CTA, compact footer with legal links.
Mobile (<768px): 44px headline; fan shows the center phone with neighbours peeking; features become stacked image + text pairs.

### Design system
- Colors: `--bg: #ffffff`, `--surface: #fafafc`, `--fg: #1d1d1f`, `--muted: #6e6e73`, `--primary: #0071ed`, `--primary-alt: #0c7cbc`, `--on-primary: #ffffff`, `--input-border: #86868b`, `--device: #000000`, `--divider: #f5f5f7` (decorative).
- Fonts: Commissioner. Hero 80px/1.0 weight 600 tracking -0.06em; H2 56px/1.05 -0.04em; body 17px/1.55 weight 500; buttons 16px 500.
- Spacing: 8px base; sections 160px apart (96px mobile); text container 980px; imagery may bleed full width.
- Radius: buttons 16px, poster tiles 14px, app icon 22%.
- Shadows: devices get a long diagonal shadow `24px 32px 48px rgba(0,0,0,.18)`; nothing else has shadows.
- Motion: 600ms spring for the fan spread, 300ms cross-fade for screen swaps, parallax max 40px.

### Components & interactions
AppIcon, PhoneFrame (image slot, optional sticky mode), PhoneFan (five frames, staggered entrance), StoreButton (detects iOS/Android via user agent, both links always present), TrailerButton + TrailerDialog (Radix Dialog, native video with captions), PosterCollage, StickyShowcase (IntersectionObserver picks the active feature and cross-fades the phone screen), StepCard, FaqAccordion, ReviewCard, NewsletterForm.

### Data & state
Static JSON for screens, features, steps, FAQ and reviews. All film posters are invented art or stock with generic titles like "Night Signal" or "Amber Road". NewsletterForm states: idle, invalid, submitting, success, already subscribed, server error. Active feature index is local state driven by scroll.

### Accessibility
Store and trailer buttons are real links/buttons with descriptive labels ("Download for iOS"). Phone screenshots carry alt text describing the UI. The trailer dialog traps focus, restores it on close and has captions. Any caption placed on a poster sits on a 60% black scrim. Parallax, fan and swaps are disabled under `prefers-reduced-motion`. Focus ring: 2px `--primary` with 2px offset.
Verified contrast: headline and body text on white: #1d1d1f on #ffffff = 16.83:1; secondary text on soft section: #6e6e73 on #fafafc = 4.86:1; white label on primary blue: #ffffff on #0071ed = 4.58:1; white label on secondary blue: #ffffff on #0c7cbc = 4.54:1; ghost button label on soft surface: #1d1d1f on #fafafc = 16.14:1; focus ring on white: #0071ed on #ffffff = 4.58:1; newsletter input border on white: #86868b on #ffffff = 3.62:1; white caption on 60% black scrim over poster (worst case): #ffffff on #666666 = 5.74:1.

### Security
Subscribers are inserted only by an Edge Function that validates email with zod, checks a honeypot, rate-limits per IP and triggers double opt-in via a transactional email service. The `subscribers` table has RLS enabled with no anon select, update or delete. Store URLs are constants. No third-party trackers without consent.

### Performance & SEO
Serve AVIF/WebP screenshots with explicit width/height, `loading="lazy"` below the fold and `priority` only for the center hero phone. Lazy-load the trailer video on dialog open. Add app-store smart banner meta, OG image of the phone fan, and structured data for a MobileApplication. Target LCP under 2.5s on mid-range mobile.

### Guardrails
- No real film titles, studio art, actor faces or store badges copied from anywhere; use generic store buttons.
- Invent every review and label it as sample until replaced.
- Keep the top bar free of nav links; the page is one scroll.
- Acceptance criteria:
  - [ ] Hero fan renders correctly at 390px, 768px and 1440px
  - [ ] Sticky showcase swaps screens in sync and falls back cleanly on mobile and reduced motion
  - [ ] Trailer dialog is fully keyboard operable with captions
  - [ ] Newsletter handles all six states
  - [ ] All listed contrast pairs pass

Open the builderAll templatesThis palette on its own