Grail

Item: Grail
Rating: 8

App that sets one real-world quest a day to get you off screens.

grail-app.com Save page

8.0/10MABTU rating

Home

DESKTOP · 1440 × 11,728/ ↗

MOBILE · 390

Section outline · Home

01heroSerif caps over floating quest cards and heraldic tiles
02problemRight-aligned serif statement on black900
03featurePink gradient, giant faint countdown, floating cards900
04journeyWhite card with list rows and small photos1,242
05feedbackPink band with floating quest cards
06mascot3D duck in armour on brown, totem pills
07statsFour stats with bubble shapes rising2,160
08communityTilted white card with patterned tiles
09ctaBlack waitlist email field and footer

Rating · Home

Visual design8.4

UX & clarity7.0

Originality8.8

Craft & consistency7.8

Motion8.4

Performance & a11y7.0

This page scores 8.0; the site score weights the home page double.

Main colours

Dark·black background·muted

Typography

PP Pangaiaheading · font · self-hosted Switzerbody · sans · self-hosted SF Pro Displayaccent · sans · system

Stack & style

Lenis Three.js Vite React

Bold typography Editorial Playful 3D Parallax Pinned sections Custom cursor Text reveal Tabs Smooth scroll

Also: Vercel, PostHog

Design DNA

Chapters alternate black, lilac-pink gradient, warm brown and white. Headlines use a high-contrast serif in caps with custom V-shaped Ws, set large and aligned left or right. Floating quest cards and heraldic patterned tiles (checks, crests, waves) drift in 3D around the headlines. The chapters run: the problem, a quest with a giant faint countdown, a journey list with small photos, feedback, 'Duc the Knight' with a 3D duck in armour and totem pills, stat bubbles ('Every quest lands somewhere'), a tilted white guild card and a black waitlist email field. Small 'Chapter 0X' labels sit in the corners.

Worth borrowing

Number the page as chapters with small 'Chapter 0X' labels in the corners.
Float the product's cards among patterned heraldic tiles to build a world around the UI.
Introduce a 3D mascot with selectable pills for its alternatives (duck, cat, bear).