Access ALL prompts for stunning animated websites in one click:
motionsites.ai
# Recreation Prompt
Build a premium, AI-native email client landing page called "Aura" using **React 18 TypeScript Vite Tailwind CSS motion/react (framer motion) lucide-react**. The aesthetic is dark (bg `
#0c0c0c`), cinematic, glassy, with a looping fullscreen background video, a shiny gradient headline, a macOS-style menu bar, a realistic inbox mockup, and a custom "liquid-glass" card treatment.
## Stack / setup
- `package.json` dependencies: `react`, `react-dom`, `@supabase/supabase-js`, `motion` (v12 , import from `motion/react`), `lucide-react`.
- Tailwind config extends colors with `brand: '
#3D81E3'` and fontFamily sans with `['Inter','system-ui','sans-serif']`.
- Font: Google Fonts Inter weights 400, 500, 600, 700, 800, 900. Import in `index.css` via `
@import url('
fonts.googleapis.com/css2?fa…');`.
- `html,body { font-family: 'Inter', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }`.
- Background color base `
#0c0c0c`, text white, selection `bg-brand/30`.
## Global background video (fixed, behind everything)
Inside the root wrapper (`relative min-h-screen overflow-x-hidden bg-[
#0c0c0c] text-white`), render a fixed full-screen video:
```
<div className="fixed inset-0 z-0 pointer-events-none">
<video autoPlay loop muted playsInline
className="w-full h-full object-cover pointer-events-none"
src="
d8j0ntlcm91z4.cloudfront.net…" />
</div>
```
Also render two hidden-on-mobile fixed vertical guide lines at the 36rem container edges:
```
<div className="hidden md:block pointer-events-none fixed inset-y-0 left-1/2 -translate-x-[calc(50% 36rem)] w-px bg-white/10 z-[5]" />
<div className="hidden md:block pointer-events-none fixed inset-y-0 left-1/2 translate-x-[calc(-50% 36rem)] w-px bg-white/10 z-[5]" />
```
## Global SVG noise filters (two, both id `c3-noise`)
- One at root level (subtle grain, multiply blend) for the shiny headline.
- One inside the pricing section (fractal noise, overlay blend) for the watermark.
Root filter:
```
<filter id="c3-noise">
<feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" stitchTiles="stitch" />
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.35 0" />
<feComposite in2="SourceGraphic" operator="in" result="noise" />
<feBlend in="SourceGraphic" in2="noise" mode="multiply" />
</filter>
```
Pricing filter:
```
<filter id="c3-noise">
<feTurbulence type="fractalNoise" baseFrequency="0.5" numOctaves="2" stitchTiles="stitch" />
<feComponentTransfer><feFuncA type="linear" slope="0.075" /></feComponentTransfer>
<feComposite in2="SourceGraphic" operator="in" result="noise" />
<feBlend in="SourceGraphic" in2="noise" mode="overlay" />
</filter>
```
## Shared primitives
**AppleLogo** — inline SVG Apple mark, `viewBox="0 0 384 512"`, `fill="currentColor"`, default `w-4 h-4`. Path:
`M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z`.
**LogoMark** — abstract 4-quadrant curve mark, `viewBox="0 0 256 256"`, default `w-8 h-8`, white fill. Path:
`M 0 128 C 70.692 128 128 185.308 128 256 L 64 256 C 64 220.654 35.346 192 0 192 Z M 256 192 C 220.654 192 192 220.654 192 256 L 128 256 C 128 185.308 185.308 128 256 128 Z M 128 0 C 128 70.692 70.692 128 0 128 L 0 64 C 35.346 64 64 35.346 64 0 Z M 192 0 C 192 35.346 220.654 64 256 64 L 256 128 C 185.308 128 128 70.692 128 0 Z`.
**AppleButton** — rounded-full white pill, Apple logo "Download Aura" label ChevronRight. Chevron translates ` 1px` on group hover. Classes: `group inline-flex items-center justify-center gap-2 rounded-full bg-white text-black font-medium text-sm px-5 py-3 transition-all hover:bg-white/90 active:scale-[0.98]`. Accepts `label` and `full` props.
**SectionEyebrow** — `<span className="w-1.5 h-1.5 rounded-full bg-white" />` label, optional tag pill with `px-2 py-0.5 rounded-full border border-white/10 text-white/50`.
**gradientStyle** used on the headline word "Revitalized":
```
backgroundImage: 'linear-gradient(to right, #091020 0%,
#0B2551 12.5%,
#A4F4FD 32.5%,
#00d2ff 50%,
#0B2551 67.5%, #091020 87.5%, #091020 100%)'
backgroundSize: '200% auto'
WebkitBackgroundClip: 'text' ( backgroundClip text)
color: 'transparent'; WebkitTextFillColor: 'transparent'
filter: 'url(
#c3-noise)'
```
Shiny animation (`.animate-shiny`): 6s linear infinite, keyframes shiny `{0%: background-position: -200% center; 100%: 200% center;}`.
## Liquid-glass utility (used across cards)
```
.liquid-glass {
background: rgba(255,255,255,0.01);
background-blend-mode: luminosity;
backdrop-filter: blur(4px);
border: none;
box-shadow: inset 0 1px 1px rgba(255,255,255,0.1);
position: relative; overflow: hidden;
}
.liquid-glass::before {
content: ''; position: absolute; inset: 0; border-radius: inherit;
padding: 1.4px;
background: linear-gradient(180deg,
rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 20%,
rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%,
rgba(255,255,255,0.15) 80%, rgba(255,255,255,0.45) 100%);
-webkit-mask: linear-gradient(
#fff 0 0) content-box, linear-gradient(
#fff 0 0);
-webkit-mask-composite: xor; mask-composite: exclude;
pointer-events: none;
}
```
## Section 1 — Navbar
Max-width `max-w-6xl mx-auto px-6`. Motion nav fades/slides down (opacity 0 -> 1, y -10 -> 0, 0.6s easeOut). Left: just the `LogoMark` (NO "Aura" word). Center (`hidden md:flex gap-8`): links `['Solutions','Pricing','Blog','Documentation','Careers']` each `text-white/70 text-sm font-medium hover:text-white` with staggered y animation (delay 0.1 i*0.05). Right desktop: `<AppleButton />` default label "Download Aura". Mobile right: `w-10 h-10 rounded-full border border-white/10 bg-white/5` Menu icon button.
## Section 2 — Hero
Centered section, `pt-16 md:pt-28 pb-20 text-center flex flex-col items-center`.
Motion h1 (delay 0.3, 0.8s cubic-bezier(.22,1,.36,1)), classes `text-4xl md:text-7xl font-semibold tracking-tight leading-[0.9]`:
- Line 1: "Your email." (white)
- Line 2: "Revitalized" — apply `animate-shiny` and the `gradientStyle` inline.
Then motion paragraph (delay 0.5): `mt-8 text-white/60 max-w-md text-base leading-[1.5]`:
> "Aura is the premier inbox platform for the current era. It leverages powerful AI to organize, prioritize, and refine your messages into total clarity."
Then motion div (delay 0.7) with `<AppleButton />` and `text-xs text-white/40` "Download for Intel / Apple Silicon".
## Section 3 — macOS menu bar strip
Full-width bar `h-10 bg-black/40 backdrop-blur-md border-t border-b border-white/10`. Inside `max-w-6xl mx-auto px-6 h-full flex items-center justify-between text-xs`. Left: `AppleLogo w-3.5 h-3.5`, bold white "Aura", then menu items `['File','Edit','View','Go','Window','Help']` (progressive hiding: index>2 `hidden sm:inline`, index>3 `hidden md:inline`). Right: `Search w-3.5 h-3.5` "Wed May 6 1:09 PM". Enters with delay 0.9.
## Section 4 — Inbox mockup
`max-w-6xl mx-auto px-6 py-16 md:py-24`. Outer container `relative rounded-2xl overflow-hidden border border-white/10 bg-[
#0e1014]/90 backdrop-blur-2xl`. Motion enters from y:40 at delay 1.1.
Title bar: three traffic lights `
#ff5f57`, `
#febc2e`, `
#28c840` (each `w-3 h-3 rounded-full`); center label "Aura — Inbox" `text-xs text-white/50`.
Body `grid grid-cols-12 h-[520px]`:
**Sidebar (col-span-3, border-r, bg-black/30, p-4):**
- White "Compose with Aura" button with `Sparkles` icon (`rounded-lg bg-white text-black text-xs font-semibold px-3 py-2`).
- Nav items (icon label optional count): Inbox (12, active), Starred (3), Sent, Drafts (2), Archive, Trash. Active uses `bg-white/10 text-white`, others `text-white/60 hover:bg-white/5`.
- Labels section: uppercase tracking "Labels" small title, then 4 color dots: Work `
#00d2ff`, Personal `
#A4F4FD`, Travel `
#f59e0b`, Finance `
#10b981`.
**Message list (col-span-4, border-r):**
- Search header: `Search` icon placeholder "Search mail".
- 6 messages with name, subject, preview, time, unread/active flags:
- Linear — "Weekly product digest" — "Your team shipped 23 issues this week..." — 9:41 AM — unread active
- Sophia Chen — "Re: Q3 roadmap review" — "Thanks for sending the deck over. I had a few thoughts..." — 8:12 AM — unread
- Figma — "Marcus commented on your file" — "Love the new direction on the landing hero." — Yesterday
- Stripe — "Payout of $12,480.00 sent" — "Your payout is on its way to your bank..." — Yesterday
- Vercel — "Deployment ready for aura-web" — "Preview is live at
aura-web-g3f.vercel.app" — Mon
- GitHub — "[aura/core] PR #482 approved" — "david-lim approved your pull request." — Mon
**Reader (col-span-5):**
- Toolbar with Reply, Forward, Archive, Trash2 icon buttons (each `w-7 h-7 rounded-md hover:bg-white/5`) and a MoreHorizontal on the right.
- Header: "Weekly product digest"; sender avatar gradient bubble `w-7 h-7 rounded-full bg-gradient-to-br from-[
#00d2ff] to-[
#0B2551]` with "L"; "Linear" "to me · 9:41 AM"; "Work" pill.
- Body:
- Card with `Sparkles` icon (color `
#A4F4FD`) labeled "Summary by Aura" and text "Your team closed 23 issues, merged 14 PRs, and shipped 2 features. Top contributor: Marcus. No action needed."
- Paragraphs: "Hi team,", "Here is your weekly digest of everything happening across your projects. This was a strong week with significant progress on the Q3 roadmap.", "Twenty-three issues were closed, fourteen pull requests were merged, and two customer-facing features went out. The velocity trend continues to climb.", "Let me know if you would like a deeper breakdown by project or contributor.", "— The Linear team" (`text-white/50`).
- Attachment pill with `Paperclip` icon: "digest-may-6.pdf".
## Section 5 — FeatureTriage
`max-w-6xl mx-auto px-6 py-20 md:py-28`, two-column grid `grid md:grid-cols-2 gap-10 md:gap-16 items-start`.
Left column motion (y 20 -> 0, 0.7s): `SectionEyebrow label="Triage" tag="AI-native"`, h2 `mt-5 text-3xl md:text-5xl font-semibold tracking-tight leading-[1.02]`: "Clear your inbox" <br/> "in a single pass.". Paragraph `mt-6 text-white/60 text-base leading-[1.6] max-w-md`: "Aura reads every message, understands intent, and routes the noise away from the signal. Focus on what moves your day forward — the rest handles itself." Chips row (`text-xs text-white/70 px-3 py-1.5 rounded-full border border-white/10 bg-white/[0.03]`): "Auto-categorize", "Snooze for later", "Silent newsletters", "One-tap unsubscribe".
Right column: `liquid-glass rounded-2xl p-5` card. Eyebrow text: "Today · 42 messages triaged". Four sub-cards (each `liquid-glass rounded-lg p-3`):
- Priority (4) `
#ffffff` — items: "Sophia Chen — Q3 review", "David Lim — contract signoff"
- Follow-up (7) `
#e5e5e5` — items: "Marcus — design review", "Figma — comment thread"
- Updates (18) `
#a3a3a3` — items: "Vercel — deploy ready", "GitHub — PR #482 merged"
- Archived (13) `#525252` — items: "Stripe payout · Newsletter · Receipts"
## Section 6 — LogoCloud
`max-w-6xl mx-auto px-6 py-16 md:py-20`. Centered kicker `text-xs uppercase tracking-widest text-white/40`: "Trusted by the world's most thoughtful teams". Grid `mt-10 grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-8 gap-6`, each logo name as `text-sm font-semibold tracking-tight text-white/50 hover:text-white`. Names: Linear, Vercel, Figma, Stripe, Ramp, Notion, Loom, Arc. Each fades in with stagger 0.05.
## Section 7 — Testimonials
`max-w-6xl mx-auto px-6 py-20 md:py-28 border-t border-white/10`. 3-col grid of `liquid-glass rounded-2xl p-6` figures. Each: blockquote `text-sm text-white/80 leading-[1.6]` wrapped in quotes, `figcaption mt-6 pt-5 border-t border-white/10` with name `text-sm font-semibold`, role `text-xs text-white/50`, company uppercased `text-xs text-white font-semibold tracking-wide`.
- "Aura gave our leadership team four hours of their week back. It reads like email from the future." — Parker Wilf, Group Product Manager, MERCURY
- "The command palette alone has changed how I process messages. I can't imagine going back to a traditional client." — Andrew von Rosenbach, Senior Engineering Program Manager, COHERE
- "Triage that actually understands context. Our team stopped dreading Monday morning inboxes." — Mathies Christensen, Engineering Manager, LUNAR
## Section 8 — Pricing
Uses custom CSS classes (not Tailwind) for cinematic typography.
Outer `<section className="c3-pricing-section">` with its own `<svg>` defining the `c3-noise` pricing filter described earlier.
Watermark (giant hero headline as backdrop):
```
<div className="c3-watermark-container">
<div className="c3-watermark-main">
<span className="c3-watermark-line-1">Your email.</span>
<span className="c3-watermark-line-2">Revitalized</span>
</div>
</div>
```
State: `yearly` boolean toggle. Three plans:
- **Free** — "Free" — "For creators taking their first steps with Forma." — Up to 3 projects in the cloud / Image export up to 1080p / Basic editing tools / Free templates and icons / Access via web and mobile app.
- **Standard** — monthly "$9,99/m" yearly "$99,99/y" — "For freelancers and small teams who need more freedom and flexibility." — Up to 50 projects in the cloud / Export up to 4K / Advanced editing toolkit / Team collaboration (up to 5 members) / Access to premium template library.
- **Pro** (`c3-card-pro`) — monthly "$19,99/m" yearly "$199,99/y" — "For studios, agencies, and professional creators working with brands." — Unlimited projects / Export up to 8K animations / AI-powered content generation tools / Unlimited team members / Brand customization.
Each card renders: `c3-tier-small` (tier), `c3-tier-large` (price), `c3-desc`, `c3-list` of checkmark rows (white circle `c3-check` with white SVG check), `c3-btn` "Choose Plan".
Below: `c3-toggle-wrap` with "Yearly" label and a pill toggle (white knob black when off; when `.active`, background `rgba(255,255,255,0.2)`, knob white, translated 24px).
Pricing CSS (key values, include exactly):
- `.c3-pricing-section { position: relative; padding: 40px 20px 80px; display: flex; flex-direction: column; align-items: center; overflow-x: hidden; }`
- `.c3-watermark-container { position: relative; width: 100%; max-width: 1100px; text-align: center; margin-top: 40px; z-index: 2; }`
- `.c3-watermark-main { font-size: 9rem; font-weight: 800; line-height: 0.9; letter-spacing: -0.05em; filter: url(
#c3-noise); display: flex; flex-direction: column; align-items: center; }`
- `.c3-watermark-line-1 { color:
#fff; }`
- `.c3-watermark-line-2 { background: linear-gradient(to right, #091020 0%,
#0B2551 25%,
#A4F4FD 65%,
#00d2ff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }`
- `.c3-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; width: 100%; max-width: 1100px; margin-top: 60px; transform: translateX(20px); position: relative; z-index: 3; }`
- `.c3-card { background: linear-gradient(135deg, rgba(0,0,0,0.7), rgba(0,0,0,0.4)); backdrop-filter: blur(14px) brightness(0.91); border: 1px solid rgba(255,255,255,1); border-radius: 44px; padding: 50px 24px; min-height: 580px; display: flex; flex-direction: column; transition: all 0.6s cubic-bezier(.22,1,.36,1); overflow: hidden; position: relative; }`
- `.c3-card::before { content:''; position:absolute; inset:0; border-radius:inherit; background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 50%); pointer-events:none; }`
- `.c3-card:hover { background: rgba(15,15,15,0.6); border-color: rgba(34,211,238,0.7); transform: translateY(-12px) scale(1.01); }`
- `.c3-card-pro { background: linear-gradient(135deg, rgba(0,0,0,0.85), rgba(0,0,0,0.55)); }`
- `.c3-tier-small { font-size: 1.1rem; font-weight: 400; color: rgba(255,255,255,0.6); }`
- `.c3-tier-large { font-size: 2.8rem; font-weight: 500; letter-spacing: -0.02em; color:
#fff; margin-top: 8px; }`
- `.c3-desc { font-size: 0.88rem; color: rgba(255,255,255,0.45); min-height: 3.2em; margin-top: 16px; margin-bottom: 40px; line-height: 1.5; }`
- `.c3-list li { display:flex; align-items:flex-start; gap: 14px; font-size: 0.92rem; color: rgba(255,255,255,0.8); margin-bottom: 18px; line-height: 1.4; }`
- `.c3-check { width:28px; height:28px; border-radius:50%; background: rgba(255,255,255,0.15); display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }`
- `.c3-btn { background:
#fff; color:#000; padding: 10px 32px; border-radius: 100px; font-weight:600; font-size: 0.88rem; margin-top:auto; border:none; cursor:pointer; align-self:center; transition: all 0.3s cubic-bezier(.22,1,.36,1); }`
- `.c3-btn:hover { background:
#f5f5f5; transform:scale(1.02); box-shadow: 0 8px 24px rgba(255,255,255,0.15); }`
- `.c3-toggle-wrap { display:flex; align-items:center; justify-content:flex-end; gap:12px; width:100%; max-width:1100px; margin-top:32px; padding-right:20px; }`
- `.c3-toggle { width:52px; height:28px; background:
#fff; border-radius:100px; position:relative; cursor:pointer; border:none; transition: background 0.3s cubic-bezier(.4,0,.2,1); padding:0; }`
- `.c3-toggle-knob { width:20px; height:20px; background:#000; border-radius:50%; position:absolute; top:4px; left:4px; transition: all 0.3s cubic-bezier(.4,0,.2,1); }`
- `.c3-toggle.active { background: rgba(255,255,255,0.2); }`
- `.c3-toggle.active .c3-toggle-knob { transform: translateX(24px); background:
#fff; }`
- Media query `(max-width:1024px)`: `.c3-watermark-main { font-size: 3.5rem; filter:none; }`, `.c3-watermark-line-2 { background:none; -webkit-text-fill-color:
#00d2ff; color:
#00d2ff; }`, `.c3-grid` becomes horizontal scroll-snap flex (`display:flex; overflow-x:auto; scroll-snap-type:x mandatory; transform:none; width:100vw; padding:0 20px; gap:16px; scrollbar-width:none`), cards `flex: 0 0 320px; scroll-snap-align:center`, `.c3-grid::-webkit-scrollbar{display:none}`, `.c3-toggle-wrap { justify-content:center; padding-right:0; }`.
## Section 9 — FinalCTA
`max-w-6xl mx-auto px-6 py-20 md:py-32`. Motion `liquid-glass relative overflow-hidden rounded-3xl px-8 py-16 md:py-24 text-center`. Radial glow overlay: `radial-gradient(600px circle at 50% 0%, rgba(255,255,255,0.15), transparent 70%)` at opacity 0.3.
- h2 `text-4xl md:text-6xl font-semibold tracking-tight leading-[1.02]`: "Close the tabs." / "Open your day.".
- Paragraph `mt-6 text-white/60 max-w-md mx-auto text-sm leading-[1.6]`: "Join thousands of builders, founders, and operators who treat email like a tool — not an obligation."
- Buttons: `<AppleButton label="Download Aura" />` and `rounded-full border border-white/15 text-white text-sm font-medium px-5 py-3 hover:bg-white/5` "Talk to sales" ChevronRight.
## Section 10 — Footer
`border-t border-white/10 mt-10` and `max-w-6xl mx-auto px-6 py-16`. Grid `grid-cols-2 md:grid-cols-5 gap-10`. Left cell: just `LogoMark w-6 h-6` (no "Aura" word) text `mt-4 text-xs text-white/50 leading-[1.6] max-w-[220px]`: "Designed in California. Built for everywhere email goes."
Four link columns (each title `text-xs font-semibold text-white`, links `text-xs text-white/50 hover:text-white`):
- Product: Features, Integrations, Pricing, Changelog, Download
- Company: About, Blog, Careers, Customers, Brand
- Resources: Help center, Community, Contact, Privacy, Terms
- Developers: API, Status, GitHub, Changelog, Security
Bottom bar `mt-14 pt-6 border-t border-white/10 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4`: left `text-xs text-white/40`: "© {currentYear} Inc. All rights reserved." (no Aura word). Right: three social icon links (Github, Twitter, Youtube from lucide `w-4 h-4 text-white/50 hover:text-white`).
## Mobile menu overlay
`AnimatePresence`. When open: full-screen `fixed inset-0 z-[100] bg-black`, slides in from right (x `100%` -> 0, tween 0.4s cubic-bezier(.22,1,.36,1)). Top bar: LogoMark "Aura" word close X button (`w-10 h-10 rounded-full border border-white/10 bg-white/5`). Body: large links `text-3xl font-semibold tracking-tight`, staggered fade-up (delay 0.15 i*0.08). Footer: full-width AppleButton.
## Misc tokens
- Ease curve used throughout: `[0.22, 1, 0.36, 1]`.
- Border color idiom: `border-white/10`.
- Accent blues only: `
#00d2ff`, `
#A4F4FD`, `
#0B2551`, `#091020`.
- Do NOT use purple/indigo anywhere.
- Motion viewport `{ once: true, margin: '-60px' }` or `'-80px'` for in-view triggers.
## App root order
```
<App>
<svg c3-noise root />
<fixed video background />
<fixed vertical guide lines />
<div relative z-10>
<nav />
<hero />
</div>
<macOS menu strip />
<inbox mockup />
<FeatureTriage />
<LogoCloud />
<Testimonials />
<Pricing />
<FinalCTA />
<Footer />
<AnimatePresence mobile menu />
</App>
```
Reproduce exactly — fonts, gradient stops, noise filters, copy strings, animation delays, and the CloudFront video URL `
d8j0ntlcm91z4.cloudfront.net…`.