Rasterly

A mock-up of the screen, drawn from its layout, palette and typefaces. A build follows the full prompt below.

Start from this screenRead the build prompt

Typefaces

The catalog's own faces. A screen composed into a template is drawn in that template's typefaces.

• InterHeadings: Inter 600, 20px status line
• InterBody: Inter 400, 16px sub-message, line-height 1.5

Patterns

• full-bleed dot-matrix noise background
• centred logo mark plus status line
• domain echo in status text
• rotating progress messages

States it is designed for

• analysing (default)
• slow: timeout notice with 'Email me when ready'
• failed: domain unreachable with Try again and Edit domain
• blocked by robots rules: explanation and link to help
• done: redirect
• offline: pause animation and show reconnect message

Who it is for

• marketers onboarding an AI search visibility tool
• founders checking how their brand appears in AI answers

Layout

1. full viewport white canvas with a faint animated dot grid
2. centred stack: logo mark (32px), status line with domain, optional rotating sub-message
3. bottom: small 'This takes about 30 seconds' hint and Cancel link
4. same layout at all breakpoints; text wraps under 360px

Palette

Quiet, technical, slightly hypnotic; the screen breathes while work happens.

• bg#ffffff
• text#111111
• muted#5e5e5e
• dots#d9d9d9
• dots-active#9a9a9a
• accent#2f5bd3

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

Inter 600, 20px status line

Body

Inter 400, 16px sub-message, line-height 1.5

Domain shown in the same weight as the verb; truncate long domains in the middle with an ellipsis.

Spacing and imagery

Density: Empty by design. Grid: 8px; 16px between mark and status. Container: centred stack max 480px. Radius: none needed. Shadows: none.

Procedural dot-matrix pattern drawn on a canvas element; no photos.

Components

• DotField (canvas, DPR-aware)
• LoaderStack (mark, status, sub-message)
• CancelLink
• TimeoutNotice

Interactions

• Messages rotate: fetching pages, reading content, asking AI engines, scoring
• Cancel returns to the domain entry step
• On completion navigates to the results dashboard with a crossfade
• After 60s shows 'Still working… we'll email you' option

Data

• AnalysisJob{id, domain, status (queued|running|done|failed), stage (fetch|read|query|score), started_at, error}
• LoaderMessage{stage, text}

Guardrails

Experience

• Echo the user's domain so they know the right thing is running
• Rotate honest messages tied to real stages
• Offer Cancel and an email fallback for slow runs
• Never show a fake percentage
• Keep the dot field subtle: max 20% opacity for active dots

Accessibility

• Status line in role=status with aria-live=polite; announce stage changes only
• Canvas is aria-hidden
• Respect prefers-reduced-motion by freezing dots and messages
• Cancel is a real link/button reachable by keyboard
• Maintain focus on the status region on load

Security

• Validate and normalise the domain (no paths, credentials or IPs) before starting
• Escape the domain when rendering
• Throttle job creation per session
• Don't expose raw fetch errors from the target site

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 **Rasterly**, a full-screen loading interstitial shown while a tool analyses a website the user just entered. It shows a mark, 'Analysing example.com', rotating stage messages and a subtle animated dot field, then hands off to results. Build it as a standalone route with a mocked job API and every state.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, Motion for message crossfades, TanStack Query to poll a mocked job endpoint, zod to validate the domain. A plain canvas element draws the dot field.

### Pages & layout
1. **Loader route** `/analyse?domain=`: full-viewport dot field; centred mark, status line, sub-message; bottom hint with Cancel.
2. **Mock results route** to redirect to on completion (a placeholder heading).
3. **Domain entry** stub to return to on Cancel.

### Design system
- Colors: `--bg: #ffffff` (canvas), `--text: #111111` (status line), `--muted: #5e5e5e` (sub-message and hint), `--dots: #d9d9d9` (dot grid), `--dots-active: #9a9a9a` (twinkling dots), `--accent: #2f5bd3` (Cancel link and focus ring).
- Fonts: Inter 600, 20px status line for headings; Inter 400, 16px sub-message, line-height 1.5 for body. Domain shown in the same weight as the verb; truncate long domains in the middle with an ellipsis.
- Spacing: Empty by design. 8px; 16px between mark and status. Container: centred stack max 480px.
- Radius: none needed.
- Shadows: none.
- Motion: Dots fade in and out randomly at low opacity (1-2s cycles); sub-messages crossfade every 3s; all motion stops under prefers-reduced-motion leaving a static grid.

### Components & interactions
DotField draws a jittered grid of 1.5px dots every 8px on a canvas, sized to the viewport with devicePixelRatio; a requestAnimationFrame loop fades a random 3% of dots in and out.

- Messages rotate: fetching pages, reading content, asking AI engines, scoring
- Cancel returns to the domain entry step
- On completion navigates to the results dashboard with a crossfade
- After 60s shows 'Still working… we'll email you' option

### Data & state
Mock the job: queued → fetch (3s) → read (4s) → query (6s) → score (3s) → done; add query flags to force slow, failed and blocked outcomes. Keep state local.

Entities: `AnalysisJob{id, domain, status (queued|running|done|failed), stage (fetch|read|query|score), started_at, error}`; `LoaderMessage{stage, text}`.

States to build and show in a dev-only state switcher:
- analysing (default)
- slow: timeout notice with 'Email me when ready'
- failed: domain unreachable with Try again and Edit domain
- blocked by robots rules: explanation and link to help
- done: redirect
- offline: pause animation and show reconnect message

### Accessibility
- Status line in role=status with aria-live=polite; announce stage changes only
- Canvas is aria-hidden
- Respect prefers-reduced-motion by freezing dots and messages
- Cancel is a real link/button reachable by keyboard
- Maintain focus on the status region on load
Verified contrast: status text: #111111 on #ffffff = 18.88:1; sub-message: #5e5e5e on #ffffff = 6.48:1; cancel link: #2f5bd3 on #ffffff = 5.9:1; focus ring: #2f5bd3 on #ffffff = 5.9:1; logo mark: #111111 on #ffffff = 18.88:1.

### Security
- Validate and normalise the domain (no paths, credentials or IPs) before starting
- Escape the domain when rendering
- Throttle job creation per session
- Don't expose raw fetch errors from the target site

### Performance & SEO
Cap the animation to 30fps and pause it when the tab is hidden. Canvas redraw on resize is debounced. First paint must show the status line before the canvas initialises.

### Guardrails
- Echo the user's domain so they know the right thing is running
- Rotate honest messages tied to real stages
- Offer Cancel and an email fallback for slow runs
- Never show a fake percentage
- Keep the dot field subtle: max 20% opacity for active dots
- Write fresh, generic copy and invented sample data; no real brands, logos, product names or people.
- Keep components small and typed (no `any`); surface every error visibly with a way to recover.

Acceptance criteria:
- Status line shows the entered domain
- Stages advance and are announced
- Reduced motion freezes animation
- Slow, failed and blocked states render
- Completion redirects to results

Open the builderAll templatesThis palette on its own