Creatorviktoroddy →A website case by @viktoroddy made with Claude Code · Nano Banana Pro · Kling, including the public result, full prompt, and original source.
View original source ↗Prompt · Original / Translation
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, VertexReusable method
Reusable structure
Extract “target result → the product name, audience, page modules, and primary button → constraints” as a reusable template for similar work.
Retest criteria
Run single-variable comparisons around module order, value proposition, and CTA placement. Record the model, cost, and failures; turn it into a Skill only after it repeats reliably.
Recommended models
Keep exploring
A webpage case by @Oluwaphilemon1 using Claude Fable 5 · Three.js · Blender · GSAP, including the public result, full prompt, and original source.
Prompt
Claude Fable 5 and GPT-5.6 are powerful🥵🥵🥵 Here Is How I built with Claude 👇 Prompt: "Design an agency site where services are presented as supermarket product packaging in 3D" Use Three.js with WebGL to render all products in real time in the browser Use Blender to model the packaging then export as GLTF to load in Three.js Use GSAP for the smooth product rotation and hover interactions Save this if you want a portfolio that makes clients feel they are buying something premium 🛒
Derived Skill
Skills are derived from repeated patterns in published cases. They are not a separate submission type.
Creator
viktoroddy focuses on production-ready AI interfaces and publishes across X and X / 𝕏. “Responsive 3D Character Carousel UI” is the current representative case, built with Claude Sonnet with a 92% stability reference.
A webpage case by @uxsweta using AI UI Builder, including the public result, full prompt, and original source.
Prompt
Few people asked for the prompt, so here it is 👇 PS: Tweak it based on your use case. Create a modern, minimal 3D Invoice Generator Machine component with a premium SaaS-style aesthetic. Visual Design - Design a wide, horizontal invoice printing machine inspired by receipt printers, but with a futuristic and clean appearance. - Use subtle gray strokes, soft shadows, and minimal details. - The machine should feel premium, lightweight, and modern rather than realistic or industrial. - Keep the overall design clean enough to fit inside a dashboard or landing page hero section. - Add a single prominent "Print Invoice" button directly on the machine. Animation When the user clicks the "Print Invoice" button: - The machine should react with a subtle press/click animation. - A receipt should gradually emerge from the printer slot. - The receipt must animate smoothly from inside the machine to outside, giving the impression that it is being physically printed. - The animation should feel realistic, fluid, and satisfying. - The receipt should slide out line-by-line rather than appearing instantly. - Add slight motion easing and subtle paper movement for realism. Receipt Design The receipt should remain highly minimal and editable. Do NOT fill it with complex customer information. Use placeholder content such as: Customer Name Product Total Amount The receipt should look like a clean invoice preview rather than a detailed bill. Interaction - The receipt should be hidden initially. - It should only appear after clicking the Print Invoice button. - The animation should be repeatable every time the user clicks the button. - Include smooth transitions and micro-interactions throughout. Style References Apple-style minimalism Linear / Stripe design quality Premium SaaS dashboard aesthetic Soft gray strokes Clean typography Modern 3D illustration High attention to interaction details Goal: Create a delightful visual experience where users feel like an invoice is actually being generated and printed from a beautiful 3D machine, rather than simply appearing on the screen.
A webpage case by @shushant_l using AI Website Builder, including the public result, full prompt, and original source.
Prompt
Here's how to create your website in minimalist design style with AI. Use this prompt: Design a modern minimalist portfolio website for a digital creator and AI consultant. Use a clean black, white, and neutral color palette with no gradients, glassmorphism, or excessive visual effects. Focus on simplicity, whitespace, strong typography, clear hierarchy, and fast loading performance. Include a hero section with a professional introduction and call-to-action, an about section, featured projects portfolio, services section, testimonials, blog/articles preview, skills and tools showcase, client logos, contact form, and footer. Use subtle animations, smooth scrolling, elegant card layouts, responsive mobile-first design, and SEO-friendly structure. The overall aesthetic should feel premium, professional, timeless, and highly readable with a strong emphasis on content and usability. Note: Customise this prompt to your use case. I've built this with Replit, and you can also build with it, or else you can also build it with any other AI model, LLM, and AI tool too.