Claude + Nano Banana + Kling Animated Website

Access ALL prompts for stunning animated websites in one click:  

RECREATION PROMPT

PROMPT:

Build a React + Vite + TypeScript + Tailwind CSS landing page for a creative studio called "Aethera". The site is light-mode only (no dark mode). It uses two Google Fonts: Instrument Serif (display/headings) and Inter (body text). Use lucide-react for all icons. The site has a cinematic video hero and 7 additional sections below it. All sections use scroll-triggered reveal animations via an IntersectionObserver hook.

GLOBAL SETUP
Fonts (src/styles/fonts.css)
Import from Google Fonts:

Instrument Serif (italic variants: 0 and 1)
Inter (weights: 300, 400, 500, 600)
Tailwind Config (tailwind.config.js)
Extend theme with:

fontFamily.display: "Instrument Serif", serif
fontFamily.body: Inter, sans-serif
colors.background: #FFFFFF
colors.foreground: #000000
colors.muted: #6F6F6F
CSS Animations (src/styles/theme.css)
Define these keyframe animations:

fade-rise: opacity 0 -> 1, translateY(20px -> 0), 0.8s ease-out
fade-in: opacity 0 -> 1
slide-up: opacity 0 -> 1, translateY(40px -> 0)
count-up: opacity 0 -> 1, scale(0.8 -> 1)
Utility classes:

.animate-fade-rise: 0.8s ease-out forwards
.animate-fade-rise-delay: same but 0.2s delay, starts opacity:0
.animate-fade-rise-delay-2: same but 0.4s delay, starts opacity:0
Scroll-reveal system:

.reveal: starts opacity:0, translateY(32px), transitions opacity and transform 0.7s ease-out
.reveal.visible: opacity:1, translateY(0)
.reveal-stagger-1 through .reveal-stagger-6: transition-delays from 0.1s to 0.6s in 0.1s increments
Global CSS (src/index.css)
Import fonts.css and theme.css, then Tailwind directives. Reset margin/padding/box-sizing. Enable antialiased font smoothing.

Scroll Reveal Hook (src/hooks/useReveal.ts)
A custom React hook that:

Takes a generic type constraint <T extends HTMLElement = HTMLElement>
Creates a ref to attach to a section container
Uses IntersectionObserver with threshold: 0.15
Queries all .reveal children inside the ref element
Adds visible class when entry is intersecting
Cleans up observer on unmount
Returns the ref
SECTION 1: NAVBAR (src/components/Navbar.tsx)
Top navigation bar with:

Left: Brand name "Aethera" with a registered trademark superscript, using font-display text-3xl
Center: Hidden on mobile (hidden md:flex). Nav items: Home (active), Studio, About, Journal, Reach Us. Active item is text-foreground, others text-muted. All text-sm with hover to foreground.
Right: "Begin Journey" CTA button -- rounded-full bg-foreground text-white px-6 py-2.5 text-sm with hover:scale-[1.03] transition.
SECTION 2: VIDEO HERO (src/components/VideoBackground.tsx + src/components/HeroSection.tsx)
VideoBackground:

Absolutely positioned container starting at top: 300px, filling right/bottom/left.
Plays this video: 
Video is muted, playsInline, autoPlay, NOT looped via HTML attribute.
Custom fade logic using requestAnimationFrame:FADE_DURATION = 0.5 seconds
During the first 0.5s of playback, opacity ramps from 0 to 1
During the last 0.5s before ending, opacity ramps from 1 to 0
Between those, opacity is 1

On ended event: set opacity to 0, wait 100ms, reset currentTime to 0, play again (manual loop with fade)
object-cover video filling container
Gradient overlay on top: bg-gradient-to-b from-background via-transparent to-background
HeroSection:
Centered text content, relative z-10, top padding: calc(8rem - 75px), bottom padding: pb-40
Heading: font-display text-5xl sm:text-7xl md:text-8xl, lineHeight: 0.95, letterSpacing: -2.46px, max-width 7xlText: Beyond silence, we build the eternal.
The italic words use <em className="text-muted">
Animation class: animate-fade-rise

Subheading: text-base sm:text-lg text-muted, max-width 2xl, animate-fade-rise-delayText: "Building platforms for brilliant minds, fearless makers, and thoughtful souls. Through the noise, we craft digital havens for deep work and pure flows."

CTA: "Begin Journey" button -- rounded-full bg-foreground text-white px-14 py-5 text-base, animate-fade-rise-delay-2, hover scale 1.03

App.tsx wraps VideoBackground, Navbar, and HeroSection inside a relative min-h-screen div.
SECTION 3: SERVICES (src/components/ServicesSection.tsx)
id="studio", white background, py-32 px-6, max-width 7xl
Top: "Services" pill badge (rounded-full border, uppercase tracking-widest, text-xs text-muted)
Below: Two-column header row (md:flex-row). Left: large heading font-display text-4xl sm:text-5xl md:text-6xl with lineHeight 1.05: "Crafting digital experiences with purpose" (italic word in text-muted). Right: short paragraph text-muted max-w-md.
Service rows: 4 items in a divide-y divide-foreground/10 grid. Each row is a 12-column grid (md:grid-cols-12) with:Col 1: service number ("01"-"04") in text-sm text-muted
Col 3: title in font-display text-3xl md:text-4xl
Col 5: description in text-base text-muted
Col 3: right side with tag pills (bg-foreground/5 rounded-full px-3 py-1 text-xs text-muted) and a circular arrow button (h-10 w-10 rounded-full border border-foreground/10) that inverts to bg-foreground text-white on group hover

Icons: ArrowUpRight from lucide-react, size 16
Services data:"Brand Identity" -- "We distill your vision into a living brand system -- logo, typography, palette, and voice -- that resonates across every touchpoint." Tags: Strategy, Visual Identity, Guidelines
"Digital Experiences" -- "Immersive web and mobile platforms engineered for performance, built with meticulous craft and obsessive attention to detail." Tags: Web Design, Development, Interaction
"Content Direction" -- "From editorial strategy to art direction, we shape narratives that move audiences and elevate your presence." Tags: Art Direction, Copywriting, Photography
"Growth Systems" -- "Data-informed marketing architectures that compound over time -- SEO, analytics, and conversion frameworks built to scale." Tags: SEO, Analytics, Automation

SECTION 4: CASE STUDIES / SELECTED WORK (src/components/CaseStudiesSection.tsx)

Dark section: bg-foreground, py-32 px-6, max-width 7xl
Header row: Left side has "Selected Work" pill badge (border-white/20, text-white/50), heading in white font-display text-4xl sm:text-5xl md:text-6xl: "See how we've shaped others". Right side: "View All" link in text-white/50 uppercase tracking-widest text-sm.
Two project cards in a grid md:grid-cols-2 gap-6. Each card:rounded-2xl overflow-hidden, group hover
aspect-[4/3] container with a <video> element: muted, loop, playsInline, autoPlay, object-cover, transition-transform 700ms, scale-105 on group-hover
Gradient overlay: bg-gradient-to-t from-black/80 via-black/20 to-transparent
Bottom content area (absolute, p-8): category label (text-xs uppercase tracking-widest text-white/60), stat in font-display text-5xl md:text-6xl text-white (lineHeight: 1), stat label in text-sm text-white/60 max-w-xs, and a white circular button h-12 w-12 rounded-full bg-white text-foreground with ArrowUpRight icon

Project 1: "Meridian Health", "Brand & Web Platform", stat "553K+", label "Monthly active users across digital channels", video: 
Project 2: "Coastal Living", "E-Commerce Redesign", stat "96%", label "Improvement in conversion rate after launch", video: 
SECTION 5: TESTIMONIALS (src/components/TestimonialsSection.tsx)
White background, py-32 px-6, max-width 7xl, centered
"Testimonials" pill badge centered
Heading: font-display text-4xl sm:text-5xl centered, max-w-lg: "Trusted by growing companies"
Dot navigation: 3 dots, h-2.5 w-2.5 rounded-full border. Active: border-foreground bg-foreground. Inactive: border-foreground/20 bg-transparent hover:border-foreground/40.
Testimonial card: max-w-4xl, grid md:grid-cols-5 gap-8Left (col-span-2): rounded-2xl overflow-hidden containing a <video> element playing:  -- muted, loop, playsInline, autoPlay, h-72 md:h-full w-full object-cover. This same video plays for all testimonial slides.
Right (col-span-3): blockquote in text-lg md:text-xl leading-relaxed text-foreground, then a bottom bar with border-t border-foreground/10 pt-6 containing name (text-sm font-medium), role + company (text-sm text-muted), and prev/next buttons using ChevronLeft/ChevronRight icons (size 16) in h-10 w-10 rounded-full border border-foreground/10 circles that invert on hover.

State management: useState(0) for active index, prev/next wrap around.
Testimonial data (3 entries):Carolyn Chapman, People & Culture Operations Manager, Meridian Group -- quote about collaborative problem-solving
Marcus Reid, Chief Product Officer, Coastal Living Co. -- quote about digital presence transformation
Lena Okafor, Brand Director, Solaris Ventures -- quote about operating as team extension

Logo strip below: border-t border-foreground/10 pt-12 mt-20, 5 text logos in font-display text-xl text-foreground/20: Meridian, GFS, Solaris, Coastal, Vertex