Motion-First Design

Build with
Framer Motion

A dark, motion-centric SaaS aesthetic inspired by Framer, Linear, and Vercel. Gradient text, bento grids, glassmorphic cards, and smooth entrance animations create a premium, interactive landing page experience.

backdrop-filter Glassmorphism @keyframes Entrance animations gradient Border glow grid Bento layout
◆
Gradient Text

Headings use background-clip: text with a violet-to-cyan gradient for that signature modern SaaS look.

background-clip: text
◾
Border Glow

Cards reveal an animated gradient border on hover using mask-composite for a premium interaction feel.

mask-composite hover me
★
Spotlight Glow

A large radial gradient floats behind the hero area, adding depth and drawing the eye to key content.

radial-gradient
☰
Animated Gradient Border

A continuously animated border using background-size animation gives elements a living, dynamic edge. This technique is key to the Framer aesthetic.

border animation preview
❖
Entrance Stagger

Elements fade up with staggered delays using CSS animation-delay for choreographed page reveals.

⋯
Dotted Grid + Dark Surface

A subtle repeating dot pattern over a near-black background gives structure without visual noise. Glassmorphic cards with backdrop-filter float over this foundation, creating layered depth with transparent surfaces, soft borders, and hover-triggered glow effects.

AI Request Prompt

Design a landing page in Framer Motion style — dark, motion-centric SaaS aesthetic inspired by Framer, Linear, and Vercel.

COLOR TOKENS:
--bg: #09090b
--surface: rgba(255, 255, 255, 0.05)
--surface-hover: rgba(255, 255, 255, 0.08)
--text: #fafafa
--text-muted: #a1a1aa
--border: rgba(255, 255, 255, 0.1)
--border-hover: rgba(255, 255, 255, 0.2)
--accent: #8b5cf6 (violet)
--accent-2: #06b6d4 (cyan)
--gradient-text: linear-gradient(to right, #8b5cf6, #06b6d4)
--glow: rgba(139, 92, 246, 0.15)
--dot-color: rgba(255, 255, 255, 0.07)
No other colors. All surfaces use rgba white overlays on the dark base.

TYPOGRAPHY:
Heading: "Plus Jakarta Sans" 700-800, tracking -0.025em, line-height 1.08
Body: "Inter" 400-500, 15px, line-height 1.6
Code accents: "JetBrains Mono" 400-500
Hero title: clamp(2.2rem, 6vw, 4rem), gradient fill via background-clip: text
Card titles: 1.1rem, "Plus Jakarta Sans" 700
Card desc: 0.88rem, "Inter" 400, color var(--text-muted)
Badge/pills: 0.8-0.82rem, "Inter" 500

UI:
- Dotted grid background: fixed div, radial-gradient(circle, var(--dot-color) 1px, transparent 1px), background-size 24px 24px
- Spotlight glow: fixed radial-gradient(ellipse, rgba(139,92,246,0.12), rgba(6,182,212,0.06) 40%, transparent 70%), positioned above hero
- Hero badge: inline-flex, border-radius 999px, border 1px solid var(--border), bg var(--surface), with pulsing dot (6px, box-shadow glow)
- Bento grid: 3-column CSS grid, gap 16px, featured cards span 2 or 3 columns
- Bento cards: border-radius 16px, border 1px solid var(--border), bg var(--surface), backdrop-filter blur(12px)
- Card hover: border goes transparent, gradient border appears via ::before pseudo-element with mask-composite, translateY(-2px), box-shadow with glow
- Gradient border animation: background-size 300% with linear animation for flowing gradient effect
- Floating pills: border-radius 999px, border 1px solid var(--border), monospace code accent inside
- Card icon: 40px square, border-radius 10px, border 1px solid var(--border)
- Code tags: border-radius 6px, rgba(139,92,246,0.12) bg, accent color text, 1px border
- Buttons: pill shape 999px, border 1px solid var(--border), bg var(--surface), hover shows accent border + glow shadow
- Prompt section: border-radius 20px, border 1px solid var(--border), bg var(--surface), backdrop-filter blur(12px)

LAYOUT:
- Container: min(1100px, 92vw) centered, padding 28px 0 100px
- Hero: centered text, max-width 580px for lead text
- Bento: 3 columns on desktop, 2 on tablet, 1 on mobile
- Featured card: grid-column span 2 with radial glow ::after
- Full-width card: grid-column span 3 for summary row

MOTION (CSS only — no JavaScript animations):
- Entrance: fadeUp keyframe (opacity 0 + translateY(24px) + scale(0.95) to opacity 1 + translateY(0) + scale(1)), 0.6s ease with dramatic stagger delays (0.15s increments)
- Text shimmer: gradient heading uses background-size 200% with animated background-position sweep for a light-across-text effect, 6s linear infinite
- Floating orbs: 3-4 small glowing circles (violet/cyan, low opacity) float around the hero using translate + rotate keyframes, 15-25s ease-in-out infinite, each with unique paths
- 3D hover tilt: bento cards use perspective(600px) rotateY(2deg) rotateX(-1deg) on hover for a premium 3D card tilt feel
- Breathing glow: the spotlight radial gradient behind the hero gently pulses via scale(1) to scale(1.15) and opacity changes, 9s ease-in-out infinite
- Gradient border build: gradient-border-demo animates from width 0 to 100% over 1.5s for a "building" reveal effect
- Card icon float: icons gently bob up and down 3px over 4s with staggered delays
- "Hover me" hint: a decorative label fades in on one card after 2.5s delay, suggesting interactivity
- Gradient border: background-position animation, 4s linear infinite
- Mini pulse: border-color oscillation, 3s ease infinite with 0.5s stagger
- Hover transitions: all 0.3-0.4s ease (border-color, background, transform, box-shadow)
- Respect prefers-reduced-motion: reduce

RESPONSIVE:
- Below 768px: single column bento, smaller hero text clamp(1.8rem, 8vw, 2.6rem), smaller pills
- 769-1024px: 2-column bento, full-width card spans 2
- Above 1024px: full 3-column layout with spanning cards

FORBIDDEN:
- Light backgrounds or white surfaces
- Sharp corners — minimum border-radius 16px on cards, 999px on pills/buttons/badges
- Saturated flat colors — all color through rgba overlays and gradients
- JavaScript-dependent animations — CSS @keyframes and transitions only
- Heavy drop shadows — use glow (colored box-shadow) instead
- Serif fonts
- More than 2 accent colors (violet + cyan only)

OUTPUT:
1. Single HTML file with inline CSS
2. Near-black base (#09090b) with dotted grid + spotlight glow background layers
3. Bento grid card layout with glassmorphic cards and gradient border hover effect
4. Gradient text hero with floating badge and pill tags
5. Staggered entrance animations via CSS animation-delay
6. Color tokens as CSS custom properties in :root
7. Responsive grid (3 → 2 → 1 columns)