viktoroddy · Landing-page information structure · Skill

Gemini + AntiGravity Dental Clinic Website

A web case by @viktoroddy created with Gemini · AntiGravity · React, including the public result, full prompt, and original source.

Skill · viktoroddy · Landing-page information structure

Prompt

This design was submited by Nixtio Agency. Access ALL prompts for stunning animated websites in one click: --- ## PROMPT: Recreate Dental Health Landing Page Create a single-page dental clinic landing page using **React + Vite + TypeScript + Tailwind CSS**. No external UI libraries, no icon libraries. Everything lives in one `App.tsx` file. The page has 3 full-screen sections, a splash screen, and a fixed navbar. --- ### SETUP **Font:** "Open Sauce One" loaded via these exact links in `index.html` `<head>`: ```html <link href="" rel="stylesheet"> <link href="" rel="stylesheet"> ``` **Title:** "Dental Health - Quality Healthcare" **Global CSS (index.css):** ```css @tailwind base; @tailwind components; @tailwind utilities; @layer base { html, body, #root { height: 100%; margin: 0; padding: 0; } body { font-family: 'Open Sauce One', -apple-system, BlinkMacSystemFont, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } } ``` **Tailwind config:** Default, no extensions. Content: `['./index.html', './src/**/*.{js,ts,jsx,tsx}']`. --- ### IMAGE URLS (use these EXACT URLs) ```ts const HERO_IMAGE = ''; const SECTION2_IMAGE = ''; const SECTION3_IMG1 = ''; const SECTION3_IMG2 = ''; const SECTION3_BG = ''; ``` --- ### DATA CONSTANTS ```ts const featureBars = ['Advanced Dentistry', 'High Quality Equipment', 'Friendly Staff']; const services = [ { name: 'Dental\nVeneers', num: '01', active: true }, { name: 'Dental\nCrowns', num: '02', active: false }, { name: 'Teeth\nWhitening', num: '03', active: false }, { name: 'Dental\nImplants', num: null, active: false }, ]; ``` --- ### CORE TECHNICAL CONCEPT: "MASKED CARDS" Sections 1 and 2 use a single large background image shared across multiple cards. Each card shows a different "window" into the same image, creating a cohesive mosaic effect. Implementation: **`useMaskPositions` hook:** - Takes a ref to the section container and a ref to an array of card elements. - Uses `ResizeObserver` on the section container. - For each card, computes `{ x, y, sw, sh }` where x/y is the card's top-left offset relative to the section, sw/sh is the section's width/height. **`useImageWidth` hook:** - Loads the image in a `new Image()` object. - Calculates: `renderWidth = img.naturalWidth * (sectionHeight / img.naturalHeight)`. - Returns how wide the image would be if scaled to fill the section height. **`MaskedCard` component:** - Props: `bgImage`, `position` (from useMaskPositions), `imageWidth` (from useImageWidth), `focalX` (0-1 float), `className`, `children`, `cardRef`, `style`. - Calculates `overflow = imageWidth > position.sw ? imageWidth - position.sw : 0`, then `focalOffset = overflow * focalX`. - Applies inline style: ``` backgroundImage: url(bgImage) backgroundSize: auto []px backgroundPosition: -[position.x + focalOffset]px -[position.y]px backgroundRepeat: no-repeat ``` - `focalX` values: Section 1 mobile=0.7, desktop=0.8. Section 2 mobile=0.65, desktop=0.8. **`useIsMobile` hook:** - Listens to `window.matchMedia('(max-width: 767px)')` change events. - Returns boolean. --- ### ANIMATION: `useStaggeredReveal` hook - Takes `count` (number of elements) and `threshold` (IntersectionObserver threshold, default 0.15). - Returns `{ containerRef, getAnimStyle }`. - `containerRef` is attached to the section; when it crosses the threshold, `visible` becomes true (fires once). - `getAnimStyle(index)` returns: ```css opacity: visible ? 1 : 0 transform: visible ? 'translateY(0)' : 'translateY(24px)' transition: opacity 0.6s cubic-bezier(0.16,1,0.3,1) [index*120]ms, transform 0.6s cubic-bezier(0.16,1,0.3,1) [index*120]ms ``` --- ### SPLASH SCREEN - Fixed overlay covering viewport, `z-[100]`, white background. - Number counter displayed at **bottom-left** (`items-end justify-start`). - Counter style: `text-7xl md:text-9xl font-bold tabular-nums p-6 md:p-10 leading-none`, black text. - Counts from 0 to 100 over exactly 2000ms (20ms per step, 100 steps). - After reaching 100: wait 200ms, then set `exiting=true` which triggers `opacity-0` with `transition-opacity duration-700`. - After 900ms total from reaching 100, call `onComplete()` which removes splash from DOM. --- ### NAVBAR **Container:** `fixed top-0 left-0 right-0 z-50`, `flex items-center justify-between`, `px-4 md:px-6 py-2 md:py-3`, `bg-white/80 backdrop-blur-md`. **Logo (left side):** - Two lines stacked: "Dental" and "Health" - Wrapper: `flex flex-col` - Text: `text-xl md:text-2xl font-extrabold uppercase tracking-tight leading-none` - Second line has `-mt-1.5 md:-mt-2` for tight spacing - Below logo text: "quality healthcare" in `text-[8px] md:text-[9px] font-medium leading-none mt-1.5 md:mt-2` **Desktop nav (hidden on mobile with `hidden md:block`):** - "Menu" button: `px-6 py-3 bg-white rounded-full border border-black text-sm font-semibold`, hover: `hover:bg-black hover:text-white transition-colors duration-200` - "Dental Emergency" text: `text-sm font-semibold text-black` **Mobile hamburger (visible only on mobile with `md:hidden`):** - Container: `w-10 h-10 flex items-center justify-center`, `relative` - 3 spans, each: `absolute h-0.5 w-6 bg-black rounded-full` - Transition: `transition-all duration-300 ease-[cubic-bezier(0.76,0,0.24,1)]` - Closed state: top span `-translate-y-2`, middle `opacity-100 scale-x-100`, bottom `translate-y-2` - Open state: top `rotate-45 translate-y-0`, middle `opacity-0 scale-x-0`, bottom `-rotate-45 translate-y-0` **Mobile menu overlay (`md:hidden`):** - Outer: `fixed inset-0 z-40`, pointer-events toggled based on open state - Backdrop: `absolute inset-0 bg-black/20 backdrop-blur-sm`, fades opacity. Clicking closes menu. - Panel: `absolute top-0 right-0 h-full w-[85%] max-w-sm bg-white shadow-2xl`, slides with `translate-x-0` (open) / `translate-x-full` (closed), `duration-500 ease-[cubic-bezier(0.76,0,0.24,1)]` - Content: `flex flex-col justify-center h-full px-8 gap-1` - Nav links: ['Home', 'Services', 'About', 'Gallery', 'Contact'] - Each: `text-4xl font-bold text-black hover:text-neutral-500` - Staggered entrance: `opacity-0 translate-x-8` -> `opacity-100 translate-x-0`, `transitionDelay: ${100 + i * 60}ms` when open - `transition-all duration-500 ease-[cubic-bezier(0.76,0,0.24,1)]` - Bottom section: `mt-8 pt-8 border-t border-neutral-200`, delayed 450ms - "Dental Emergency" text: `text-sm font-semibold text-black mb-4` - Button: `w-full px-6 py-4 bg-black rounded-full text-white text-sm font-semibold hover:bg-neutral-800 transition-colors duration-200`, text "Book Appointment" - When open: `.overflow = 'hidden'`. Cleanup on unmount. --- ### SECTION 1 - HERO **Container:** `<section>`, `h-screen w-full overflow-hidden flex flex-col`, `pt-24 md:pt-24 px-3 md:px-5 pb-1.5 md:pb-2 gap-1.5 md:gap-2` Attach both `section1Ref` and `s1Reveal.containerRef` to this element. Uses `HERO_IMAGE` as shared background via MaskedCard technique. **3 Feature Bars** (mapped from `featureBars` array): - Each is a `MaskedCard` with: `w-full h-14 md:h-20 shrink-0 rounded-xl md:rounded-2xl overflow-hidden relative` - Animated with `s1Reveal.getAnimStyle(i)` for i=0,1,2 - Content: `<span>` centered vertically and horizontally (`flex items-center justify-center h-full`), `text-black text-lg md:text-3xl font-bold text-center`, `relative z-10` **Main Hero Card** (4th card, index 3): - `MaskedCard`: `w-full flex-1 min-h-0 rounded-xl md:rounded-2xl overflow-hidden relative` - Animated with `s1Reveal.getAnimStyle(3)` - **Top-left text:** `absolute top-4 left-4 md:top-7 md:left-7`, `text-black text-xs md:text-sm font-semibold leading-4 md:leading-5 max-w-[200px] md:max-w-[300px] z-10` - Content: "We wish to provide professional dental services" `<br/>` "that match the current technologies" - **Bottom-left block:** `absolute bottom-5 left-3 md:bottom-8 md:left-4 z-10` - Label: `block text-black text-xs md:text-sm font-semibold mb-1 md:mb-2`, text "Trusted Dentist in West New York" - Heading: `<h1>` with `text-black text-[clamp(3rem,11vw,11rem)] font-bold leading-[0.79] tracking-tight`, content: "Dental" `<br/>` "Care" - **Bottom-right text:** `absolute bottom-6 right-4 md:bottom-10 md:right-8`, `text-white text-xs md:text-sm font-semibold z-10`, content: "Free Consultation" --- ### SECTION 2 - SMILE GALLERY **Container:** `<section>`, `min-h-screen md:h-screen w-full overflow-hidden flex flex-col`, `pt-1.5 md:pt-2 px-3 md:px-5 pb-1.5 md:pb-2 gap-1.5 md:gap-2` Attach both `section2Ref` and `s2Reveal.containerRef` to this element. Uses `SECTION2_IMAGE` as shared background via MaskedCard technique. **Grid container:** `flex-1 min-h-0 grid grid-cols-1 md:grid-cols-2 grid-rows-[auto_auto_auto_auto] md:grid-rows-[1fr_1fr_0.8fr] gap-1.5 md:gap-2` **Card 0 - Top Left ("Smile Gallery"):** - `MaskedCard`: `rounded-xl md:rounded-2xl overflow-hidden relative min-h-[160px] md:min-h-0` - Animated: `s2Reveal.getAnimStyle(0)` - Heading: `absolute top-4 left-5 md:top-6 md:left-7`, `text-white md:text-black text-2xl md:text-3xl font-bold z-10`, text "Smile Gallery" - Subtitle: `absolute bottom-4 left-5 md:bottom-6 md:left-7`, `text-white md:text-black text-xs md:text-sm font-semibold z-10`, text "Our cosmetic dental work" **Card 1 - Top Right (spans 2 rows on desktop):** - `MaskedCard`: `md:row-span-2 rounded-xl md:rounded-2xl overflow-hidden relative min-h-[200px] md:min-h-0` - Animated: `s2Reveal.getAnimStyle(1)` - Text: `absolute bottom-16 left-5 md:bottom-20 md:left-7`, `text-white text-xs md:text-sm font-semibold leading-4 md:leading-5 z-10`, content: "If you want a gorgeous smile," `<br/>` "call us to ask about a smile makeover." - Button: `absolute bottom-4 right-4 md:bottom-6 md:right-6`, `px-5 py-3 md:px-8 md:py-5 bg-white rounded-full text-black text-base md:text-xl font-bold z-10 hover:scale-105 transition-transform`, text "Call Us" **Card 2 - Bottom Left ("Smile makeover"):** - `MaskedCard`: `rounded-xl md:rounded-2xl overflow-hidden relative min-h-[160px] md:min-h-0` - Animated: `s2Reveal.getAnimStyle(2)` - Heading: `absolute top-4 left-5 md:top-6 md:left-7`, `text-white md:text-black text-[clamp(3rem,7vw,6rem)] font-bold leading-[0.9] z-10`, content: "Smile" `<br/>` "makeover" **Card 3 - Bottom Full Width (Services):** - `MaskedCard`: `col-span-1 md:col-span-2 rounded-xl md:rounded-2xl overflow-hidden relative min-h-[200px] md:min-h-0` - Animated: `s2Reveal.getAnimStyle(3)` - Inner container: `absolute inset-0 z-10 flex flex-wrap md:flex-nowrap gap-1.5 md:gap-2 p-2 md:p-3` - 4 service sub-cards mapped from `services` array: - Container: `flex-1 min-w-[calc(50%-4px)] md:min-w-0 rounded-xl md:rounded-2xl p-3 md:p-5 flex flex-col justify-between` - Active: `bg-white/90 backdrop-blur-md` - Inactive: `bg-white/20 backdrop-blur-xl` - Service name: `<h3>` with `text-xl md:text-4xl font-bold leading-[1.05] whitespace-pre-line`, color: active=`text-black`, inactive=`text-white` - Number badge (if `svc.num` exists): `self-end w-8 h-8 md:w-12 md:h-12 rounded-full border flex items-center justify-center text-xs md:text-sm font-semibold` - Active: `border-black text-black` - Inactive: `border-white text-white` --- ### SECTION 3 - IMPLANT DENTISTRY **Container:** `<section>`, `min-h-screen md:h-screen w-full overflow-hidden flex flex-col`, `pt-1.5 md:pt-2 px-3 md:px-5 pb-1.5 md:pb-2 gap-1.5 md:gap-2` Attach `s3Reveal.containerRef` to this element. Does NOT use MaskedCard technique. Uses regular `<img>` tags and solid backgrounds. **Grid:** `flex-1 min-h-0 grid grid-cols-1 md:grid-cols-2 gap-1.5 md:gap-2` #### LEFT COLUMN: `flex flex-col gap-1.5 md:gap-2` **1. Heading Card:** - `<div>`: `rounded-xl md:rounded-2xl bg-stone-50 p-5 md:p-7 flex flex-col justify-between flex-[1.2] min-h-[180px] md:min-h-0` - Animated: `s3Reveal.getAnimStyle(0)` - Heading: `<h2>` with `text-[clamp(3rem,7vw,6.5rem)] font-bold leading-[0.95] text-black`, content: "Implant" `<br/>` "Dentistry" - Subtitle: `<p>` with `text-xs md:text-sm font-semibold text-black`, text "Restore Missing Teeth" **2. Two Image Cards (side by side):** - Wrapper: `<div>` with `flex gap-1.5 md:gap-2 flex-1 min-h-[140px] md:min-h-0` - Animated: `s3Reveal.getAnimStyle(1)` - Left image: `<div className="flex-1 rounded-xl md:rounded-2xl overflow-hidden"><img src={SECTION3_IMG1} alt="Dental implant procedure" className="w-full h-full object-cover" /></div>` - Right image: `<div className="flex-1 rounded-xl md:rounded-2xl overflow-hidden"><img src={SECTION3_IMG2} alt="Dental restoration" className="w-full h-full object-cover" /></div>` **3. Consultation Card:** - `<div>`: `rounded-xl md:rounded-2xl bg-zinc-200 p-5 md:p-7 flex items-end justify-between flex-[0.8] min-h-[160px] md:min-h-0` - Animated: `s3Reveal.getAnimStyle(2)` - Left content block: - Label: `<p>` with `text-xs md:text-sm font-semibold text-black mb-2 md:mb-3`, text "Consultation" - Heading: `<h3>` with `text-xl md:text-3xl font-bold text-black leading-6 md:leading-8`, content: "Dental" `<br/>` "Restoration" `<br/>` "Services" - Button: `px-5 py-3 md:px-8 md:py-5 bg-white rounded-full text-black text-base md:text-xl font-bold hover:scale-105 transition-transform`, text "Book Online" #### RIGHT COLUMN: Single tall image card - `<div>`: `rounded-xl md:rounded-2xl overflow-hidden relative min-h-[350px] md:min-h-0` - Animated: `s3Reveal.getAnimStyle(3)` - Background image: `<img src={SECTION3_BG} alt="Smiling patient" className="w-full h-full object-cover" />` - **Overlay container:** `absolute bottom-3 left-3 right-3 md:bottom-5 md:left-5 md:right-5 flex gap-1.5 md:gap-2` **Overlay Card 1 (white, left):** - `flex-1 bg-white rounded-xl md:rounded-2xl p-3 md:p-5 flex flex-col justify-between h-36 md:h-52` - Heading: `<h4>` with `text-lg md:text-2xl font-bold text-black leading-5 md:leading-7`, content: "The Process" `<br/>` "of Installing" `<br/>` "Implants" - Arrow icon: `self-end w-9 h-9 md:w-12 md:h-12 rounded-full border border-black flex items-center justify-center` - SVG: `width="14" height="14" viewBox="0 0 14 14" fill="none"`, class `rotate-[-45deg]` - Path: `d="M1 7h12m0 0L8 2m5 5L8 12"` with `stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"` **Overlay Card 2 (glass, right):** - `flex-1 bg-white/20 backdrop-blur-xl rounded-xl md:rounded-2xl p-3 md:p-5 flex flex-col justify-between h-36 md:h-52` - Heading: `<h4>` with `text-lg md:text-2xl font-bold text-white leading-5 md:leading-7`, content: "Caring" `<br/>` "for Dental" `<br/>` "Implants" - Arrow icon: `self-end w-9 h-9 md:w-12 md:h-12 rounded-full border border-white flex items-center justify-center` - Same SVG as above but with added class `text-white` --- ### OUTER WRAPPER The entire app is wrapped in `<div className="bg-white">` containing: 1. `{showSplash && <SplashScreen />}` (conditionally rendered) 2. `<Navbar />` 3. Section 1 4. Section 2 5. Section 3 --- ### KEY DESIGN RULES - **Spacing between sections:** Only `pb-1.5 md:pb-2` on each section and `pt-1.5 md:pt-2` on sections 2 and 3 -- virtually seamless. - **Border radius:** All cards use `rounded-xl md:rounded-2xl` with `overflow-hidden`. - **Color palette:** Strictly black, white, and translucent white (`bg-white/20`, `bg-white/90`) with `backdrop-blur-md` or `backdrop-blur-xl`. - **Background fills:** `bg-stone-50` and `bg-zinc-200` for Section 3 solid cards. - **Typography:** Heavy bold/extrabold, `clamp()` for responsive headings, extremely tight leading (0.79, 0.9, 0.95, 1.05). - **Interactions:** `hover:scale-105 transition-transform` on CTA buttons. - **Responsive:** Single `md:` (768px) breakpoint. Stacked on mobile, grid on desktop. - **No external packages** beyond React and Tailwind.

Source heat

Stability

待复测

View case →

AI Coding (UI)X@viktoroddy →

Claude Auto-Generated Single-Page Animated Site

A website case by @viktoroddy made with Claude, including the public result, full prompt, and original source.

Skill · viktoroddy · Landing-page information structure

Prompt

Access ALL prompts for stunning animated websites in one click: Prompt: Build a single-page landing site using React + TypeScript + Vite + Tailwind CSS + framer-motion + lucide-react. The entire page has a bg-black background. The font loaded via Google Fonts is Instrument Serif (italic and regular). Import it in index.css: @import url(''); LIQUID GLASS CSS (in index.css, inside @layer components) Create a reusable .liquid-glass class used on every glass element: .liquid-glass { background: rgba(255, 255, 255, 0.01); background-blend-mode: luminosity; backdrop-filter: blur(4px); -webkit-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 -- HERO (full-viewport, in Index.tsx) Full-screen (min-h-screen) container with overflow-hidden relative flex flex-col. Background video: absolute, covers the entire viewport (absolute inset-0 w-full h-full object-cover object-bottom). URL: Attributes: muted, autoPlay, playsInline, preload="auto". Starts at opacity: 0. Video fade logic (vanilla JS via refs, no CSS transitions): On canplay: play the video, then animate opacity from 0 to 1 over 500ms using requestAnimationFrame. On timeupdate: when remaining time <= 0.55s, animate opacity from current to 0 over 500ms. On ended: set opacity to 0, wait 100ms, reset currentTime to 0, play again, fade back to 1 over 500ms. This creates a seamless loop with smooth crossfade to black between plays. Navbar (relative z-20, px-6 py-6): A liquid-glass rounded-full pill, max-w-5xl mx-auto, px-6 py-3, flex between left/right. Left: Globe icon (24px, white) + "Asme" text (white, font-semibold, text-lg). Hidden on mobile: nav links "Features", "Pricing", "About" (text-white/80 hover:text-white text-sm font-medium, gap-8 ml-8). Right: "Sign Up" text button (white, text-sm, font-medium) + "Login" button (liquid-glass rounded-full px-6 py-2, white text-sm font-medium). Hero content (relative z-10, flex-1 flex flex-col items-center justify-center, px-6 py-12 text-center, -translate-y-[20%]): Heading: text-7xl md:text-8xl lg:text-9xl, white, tracking-tight whitespace-nowrap, font-family 'Instrument Serif', serif. Text: Know it then <em>all</em>. Email input: max-w-xl w-full. A liquid-glass rounded-full pill with pl-6 pr-2 py-2 flex items-center gap-3. Inside: transparent <input> with placeholder "Enter your email" (text-white placeholder:text-white/40). A white circular submit button (bg-white rounded-full p-3 text-black) containing ArrowRight icon (20px). Subtitle: text-white text-sm leading-relaxed px-4. Text: "Stay updated with the latest news and insights. Subscribe to our newsletter today and never miss out on exciting updates." Manifesto button: liquid-glass rounded-full px-8 py-3 text-white text-sm font-medium hover:bg-white/5 transition-colors. Social icons footer (relative z-10, flex justify-center gap-4 pb-12): Three liquid-glass rounded-full p-4 buttons for Instagram, Twitter, Globe icons (20px). text-white/80 hover:text-white hover:bg-white/5 transition-all. SECTION 2 -- ABOUT SECTION (separate component AboutSection.tsx) Uses framer-motion useInView (ref, { once: true, margin: "-100px" }). bg-black pt-32 md:pt-44 pb-10 md:pb-14 px-6 overflow-hidden. Subtle radial gradient overlay: bg-[radial-gradient(ellipse_at_top,_rgba(255,255,255,0.03)_0%,_transparent_70%)]. Label: "About Us" -- text-white/40 text-sm tracking-widest uppercase. Animates: opacity: 0, y: 20 -> opacity: 1, y: 0, duration 0.6. Heading: text-4xl md:text-6xl lg:text-7xl text-white leading-[1.1] tracking-tight. Animates: opacity: 0, y: 40 -> opacity: 1, y: 0, duration 0.8, delay 0.1. Text structure: Pioneering then ideas (Instrument Serif italic, text-white/60) for Line break (hidden on mobile) minds that then create, build, and inspire. (all Instrument Serif italic, text-white/60) SECTION 3 -- FEATURED VIDEO (separate component FeaturedVideoSection.tsx) bg-black pt-6 md:pt-10 pb-20 md:pb-32 px-6 overflow-hidden. Max-w-6xl. A rounded-3xl overflow-hidden aspect-video container that animates opacity: 0, y: 60 -> opacity: 1, y: 0, duration 0.9. Video: w-full h-full object-cover, muted, autoPlay, loop, playsInline, preload="auto". URL: Gradient overlay on video: bg-gradient-to-t from-black/60 via-transparent to-transparent. Bottom overlay content (absolute bottom-0 left-0 right-0 p-6 md:p-10): Flex row on desktop, column on mobile. Left: a liquid-glass rounded-2xl p-6 md:p-8 max-w-md card. Label "Our Approach" (text-white/50 text-xs tracking-widest uppercase mb-3). Body text (text-white text-sm md:text-base leading-relaxed): "We believe in the power of curiosity-driven exploration. Every project starts with a question, and every answer opens a new door to innovation." Right: "Explore more" button (liquid-glass rounded-full px-8 py-3, white text-sm font-medium) with whileHover={{ scale: 1.05 }} and whileTap={{ scale: 0.95 }}.

Source heat

Stability

待复测

View case →

AI Coding (UI)X@viktoroddy →

Nano Banana + Flow + AntiGravity Animated Website

A website case by @viktoroddy created with Nano Banana · Flow · AntiGravity, including the public result, full prompt, and original source.

Skill · viktoroddy · Landing-page information structure

Prompt

Prompt: Build a premium, high-end hero section for a video editing agency named 'Logoisum' with the following specifications: Background: Implement a full-screen, looping video background using this URL: . The video must be muted, autoplaying, and set to object-cover to fill the section without any color overlays. Navigation Bar: A floating white navigation bar with rounded-[16px] and a subtle shadow. Left: The agency logo. Center: A menu with links for 'About', 'Works', 'Services', and 'Testimonial' using 14px Barlow Medium font. Right: A dark (#222) primary CTA button labeled 'Book A Free Meeting' featuring a unique 45-degree arrow icon in a circular housing. Typography & Hero Content: Primary Headline: Centered layout. The first line 'Agency that makes your' should use a bold/medium Barlow font with tight tracking (tracking-[-4px]). The second line 'videos & reels viral' must use a large, elegant 'Instrument Serif' italic font (text-[84px]). Subtext: Below the headline, add the text 'Short-form video editing for Influencers, Creators and Brands' in Barlow Medium, 18px, centered. Secondary CTA: A large white pill-shaped button below the subtext labeled 'See Our Workreel' with a small play icon on the left. Overall Aesthetic: The design should be minimal, ultra-modern, and responsive. Ensure all text and buttons are layered on top of the video background with clear visibility and proper spacing (min-h-[90vh])."

Source heat

Stability

待复测

View case →

AI Coding (UI)X@viktoroddy →

Claude + Fable: Aethera Fintech Landing Page

A website case by @viktoroddy made with Claude · Fable, including the public result, full prompt, and original source.

Skill · viktoroddy · Landing-page information structure

Prompt

Access ALL prompts for stunning animated websites in one click: > Build a single-page landing page for a brand called **"Aethera"** (a fintech/AI company for lending). Use **React + TypeScript + Vite + Tailwind CSS + lucide-react**. The page has a white background (`#fff`), no scrolling animations -- just a clean, minimal, editorial design. > > ### Fonts > - **Heading/serif font:** "P22 Mackinac W01 Book" loaded from `` > - **Body/sans font:** "Inter" (weights 300, 400, 500, 600) from Google Fonts > - Configure Tailwind: `fontFamily.sans = ['Inter', 'sans-serif']`, `fontFamily.serif = ['P22 Mackinac W01 Book', 'Georgia', 'serif']` > > ### Page Title > `<title>Build Lasting Relationships</title>` > > ### Background Video It has to be centered vertically on the page > Use this **exact** CloudFront video URL: > ``` > > ``` > The video is positioned **absolutely** behind the hero using: top: '50%', transform: 'translateY(-50%)' and CSS filter `brightness(1) contrast(1.2)`. It uses `object-contain`, is muted, playsInline, preload="auto". It plays once on load and pauses when ended (no looping, no boomerang reversal -- just plays forward once and stops). > > ### Navbar > - `relative z-20`, max-width `max-w-7xl`, centered, `px-8 py-6`, flex between. > - **Logo (left):** Text "Aethera" with a superscript registered mark -- `font-serif text-3xl tracking-tight text-[#000000]` with `<sup className="text-xs align-super">®</sup>` > - **Navigation links (center, hidden on mobile `hidden md:flex`):** "Home" (active, `text-[#000000]`), "Studio", "About", "Journal", "Reach Us" (inactive, `text-[#6F6F6F]`). Each is `text-sm` with hover to black. > - **CTA button (right):** "Begin Journey" -- `rounded-full px-6 py-2.5 text-sm bg-[#000000] text-white` with `hover:scale-[1.03] transition-transform duration-200`. > > ### Hero Section > - Wrapper: `relative flex flex-col items-center` > - Inner container: `relative w-full min-h-[60vh] sm:min-h-[65vh] md:min-h-[70vh] flex flex-col items-center` > - Content container: `relative z-10 flex flex-col items-center text-center pt-16 sm:pt-20 md:pt-28 px-4 sm:px-6` with inline style `marginTop: '-70px'` > - **Headline:** `font-serif text-4xl sm:text-5xl md:text-7xl lg:text-8xl leading-[1.1] tracking-tighter text-[#191919] font-normal` -- text is "Forge trust," on line 1, "drive results." on line 2 (using `<br />`) > - **Subtext:** `mt-5 sm:mt-6 md:mt-8 max-w-sm sm:max-w-md text-sm md:text-base text-[#191919]/70 leading-relaxed px-2` -- "Intelligent AI agents designed for today's lending companies -- software that manages every borrower touchpoint via phone, text, and email." > - **Button:** "Get Started" -- `mt-6 sm:mt-8 md:mt-10 px-6 sm:px-8 py-3 sm:py-3.5 bg-[#191919] text-white text-sm font-medium rounded-lg hover:bg-[#191919]/90 transition-colors duration-200` > > ### Info Box (overlapping below hero) > - Container: `relative z-10 w-full max-w-7xl px-4 sm:px-8 -mt-8 sm:-mt-12 md:-mt-16` > - Box: `bg-white/90 backdrop-blur-sm border border-gray-200 pt-8 sm:pt-12 md:pt-16 px-5 sm:px-8 md:px-12 pb-0 shadow-sm flex flex-col overflow-hidden` > - **Row 1 (two-column grid `grid-cols-1 md:grid-cols-2 gap-6 sm:gap-8 md:gap-16`):** > - Left: Label `text-[11px] uppercase tracking-[0.2em] text-[#191919]/50 font-medium` -- "How do we help?". Heading `mt-3 text-2xl sm:text-3xl md:text-4xl font-normal leading-tight tracking-tight text-[#191919] font-serif` -- "Dialogues that\nspark progress" (line break hidden on mobile `hidden sm:block`) > - Right: `flex items-end` with paragraph `text-sm md:text-[15px] text-[#191919]/70 leading-relaxed` -- "Conversational AI made for compliant financial organizations. Agents that carry a real dialogue, tie into the tools you use, and document their actions." > - **Divider:** `mt-6 sm:mt-8 md:mt-10 h-px bg-gray-200 w-full` > - **Row 2 (three feature pills, `grid-cols-1 sm:grid-cols-3 gap-2 sm:gap-3`, `mt-6 sm:mt-8 md:mt-10`):** > - Each pill: `group flex items-center justify-between bg-[#F4F3F3] px-4 sm:px-6 py-3.5 sm:py-4 hover:bg-[#eaeaea] transition-all duration-200 cursor-pointer` > - Content: Number (`text-[#191919]/40`) + separator (`/` in `text-[#191919]/30 mx-2`) + label (`font-medium`) > - Items: "01 / Multichannel", "02 / Integrated", "03 / Auditable" > - Right icon: `ArrowRight` from lucide-react, `w-4 h-4 text-gray-400` with `group-hover:text-gray-700 group-hover:translate-x-0.5 transition-all duration-200` > > ### Global CSS (index.css) > ```css > @tailwind base; > @tailwind components; > @tailwind utilities; > > * { > box-sizing: border-box; > } > > body { > font-family: 'Inter', sans-serif; > -webkit-font-smoothing: antialiased; > -moz-osx-font-smoothing: grayscale; > } > ``` > > ### Key Behaviors > - The video plays forward exactly once, then pauses. No loop, no reverse. > - The page is fully responsive with breakpoints at sm, md, lg. > - Minimal hover animations: button scale, arrow translate, color transitions. > - No additional sections below the info box. ---

Source heat

Stability

待复测

View case →

AI Coding (UI)X@viktoroddy →

GPT Image 2 + Veo 3 + Lovable Marketing Site

A web case by @viktoroddy using GPT Image 2 · Veo 3 · Lovable, including the public result, full prompt, and original source.

Skill · viktoroddy · Landing-page information structure

Prompt

Access ALL prompts for stunning animated websites in one click: # PROMPT: Recreate this landing page exactly Build a production-quality marketing landing page for a thoughtful newsletter platform called "Mindloop" as a Vite + React + TypeScript app using Tailwind CSS, shadcn/ui, framer-motion, and lucide-react. The aesthetic is calm, editorial, cinematic — black background, white foreground, serif italic accents, ambient looping background videos, and a signature "liquid glass" effect on interactive surfaces. No purple/indigo hues. ## Stack & dependencies - Vite + React 18 + TypeScript - Tailwind CSS with shadcn/ui design tokens (HSL CSS variables) - `framer-motion` for animation - `lucide-react` for icons - `@fontsource/inter` (400, 500, 600, 700) and `@fontsource/instrument-serif` (400, 400-italic) for fonts - Do NOT install other UI libraries ## Global theme (src/index.css) Import fontsource CSS at top, then Tailwind layers. Pure black/white palette via HSL vars: ```css @import "@fontsource/inter/400.css"; @import "@fontsource/inter/500.css"; @import "@fontsource/inter/600.css"; @import "@fontsource/inter/700.css"; @import "@fontsource/instrument-serif/400.css"; @import "@fontsource/instrument-serif/400-italic.css"; @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 0%; --foreground: 0 0% 100%; --card: 0 0% 5%; --card-foreground: 0 0% 100%; --popover: 0 0% 5%; --popover-foreground: 0 0% 100%; --primary: 0 0% 100%; --primary-foreground: 0 0% 0%; --secondary: 0 0% 12%; --secondary-foreground: 0 0% 85%; --muted: 0 0% 15%; --muted-foreground: 0 0% 65%; --accent: 170 15% 45%; --accent-foreground: 0 0% 100%; --border: 0 0% 20%; --input: 0 0% 18%; --ring: 0 0% 40%; --hero-subtitle: 210 17% 95%; --radius: 0.5rem; } } @layer base { * { @apply border-border; } html, body { margin: 0; padding: 0; background-color: hsl(var(--background)); color: hsl(var(--foreground)); font-family: Inter, system-ui, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { @apply bg-background text-foreground; } } .font-serif { font-family: "Instrument Serif", ui-serif, Georgia, serif; } /* Liquid glass effect — frosted surface with inset highlight + animated gradient border */ .liquid-glass { background: rgba(255, 255, 255, 0.01); background-blend-mode: luminosity; backdrop-filter: blur(4px); -webkit-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; } ``` Tailwind config extends `fontFamily.sans = Inter`, `fontFamily.serif = "Instrument Serif"`, and maps all colors to the HSL vars. Dark mode is class-based (but the whole site is black by default). ## Shared animation helper (src/lib/animations.ts) ```ts export const fadeUp = (delay: number = 0) => ({ initial: { opacity: 0, y: 20 }, whileInView: { opacity: 1, y: 0 }, viewport: { once: true, margin: "-100px" }, transition: { duration: 0.6, delay, ease: "easeOut" as const }, }); ``` ## App structure (src/App.tsx) ```tsx <div className="bg-background text-foreground min-h-screen font-sans"> <Navbar /> <main> <Hero /> <SearchChanged /> <Mission /> <Solution /> <CTA /> </main> <Footer /> </div> ``` ## Logo component The logo is a PNG placed at `public/image.png`. Component renders `<img src="/image.png" className="h-7 w-auto" />` with an optional `className` prop to resize it (e.g. `h-12 w-auto` in the CTA). --- ## Section 1 — Navbar (fixed, shrinks to liquid-glass pill on scroll) - `fixed top-0 left-0 right-0 z-50`, centered flex wrapper `pt-4 px-4`. - Inner container: `max-w-6xl rounded-full`, transitions over 500ms between two states: - Not scrolled: `bg-transparent px-6 py-3` - Scrolled (>20px): `liquid-glass px-5 py-2.5` - Left: `<Logo />` only (no text). - Center (desktop): links "Home", "How It Works", "Philosophy", "Use Cases" in `text-muted-foreground`, hover to `foreground`, with an animated underline that grows from width 0 to full on hover. - Right (desktop): three circular 9x9 icon buttons for Instagram / LinkedIn / Twitter (lucide), strokeWidth 1.5, hover bg `white/5`. - Mobile: hamburger (`Menu`) that toggles a `liquid-glass rounded-2xl` dropdown panel below the bar. ## Section 2 — Hero (fullscreen, looping background video) - Section: `relative min-h-screen w-full overflow-hidden`. - Full-bleed autoplay/muted/loop/playsInline `<video>` covering the viewport: - src: `` - Bottom fade overlay: `absolute bottom-0 h-64 bg-gradient-to-t from-background to-transparent z-[1]`. - Content `z-10 pt-28 md:pt-32` centered column: 1. Social proof row (fade+slide in): three overlapping round avatars (`w-8 h-8 rounded-full border-2 border-background`) from Pexels (use IDs 415829, 774909, 1222271 with `?auto=compress&cs=tinysrgb&w=100&h=100&fit=crop`) + muted text "7,000+ people already subscribed". 2. H1: `text-5xl md:text-7xl lg:text-8xl font-medium tracking-[-2px] max-w-5xl leading-[1.02]`, content: `Get <span className="font-serif italic font-normal">Inspired</span> with Us`. 3. Subhead in `--hero-subtitle` color, `text-lg max-w-2xl mt-8`: "Join our feed for meaningful updates, news around technology and a shared journey toward depth and direction." 4. Email capture form: `liquid-glass rounded-full p-2 max-w-lg w-full mt-10 flex items-center gap-2`. Transparent input, pill button `bg-foreground text-background rounded-full px-8 py-3 text-xs font-semibold tracking-[2px]` labeled "SUBSCRIBE" with framer hover scale 1.03 / tap 0.98. - Each element fades in sequentially (delays 0, 0.1, 0.25, 0.4s). ## Section 3 — SearchChanged (the shift) - `pt-52 md:pt-64 pb-20 px-6 md:px-8`. - Header grid (12 col): left 7 — eyebrow "THE SHIFT" (uppercase tracking-[3px]) + H2 `text-5xl md:text-7xl lg:text-8xl font-medium tracking-[-2px] leading-[0.95]` reading `Search has <italic serif>changed.</italic><br/>Have you?`. Right 5 — body copy: "The way people discover ideas has quietly shifted. Answers arrive synthesized, personal, and instant — and the old playbook of SEO keywords is running on borrowed time." - Three-card grid using 1px `bg-border/40` gaps inside a `rounded-3xl overflow-hidden` wrapper so the divider lines look like hairlines. Each card `bg-background p-8 md:p-10` with hover `bg-white/[0.02]`. - Card header: `liquid-glass` rounded-2xl 12x12 icon tile (left) + `ArrowUpRight` (right) that translates up/right on group hover. - Big stat `text-4xl md:text-5xl font-medium tracking-[-1px]` + muted label. - Name (semibold) + muted description. - Cards: ChatGPT / 400M weekly users / "Conversational answers…"; Perplexity / 15M daily queries / "Cited, sourced responses…"; Google AI / 2B+ AI overviews / mo / "Generative overviews replacing classic search result pages." - Below: centered quote framed by two `h-px w-12 bg-border` hairlines: `If you don't answer the questions, <foreground>someone else will.</foreground>` - Every block animates with `fadeUp` staggered. ## Section 4 — Mission (scroll-driven word reveal over parallax video) - Outer: `relative w-full`, inner wrapper `h-[130vh] md:h-[150vh] overflow-hidden`. - Background `<>` with parallax: `y` transforms from `-6%` to `6%` across scroll progress, and `scale` bounces `1.08 → 1.02 → 1.08`. Video src: `` - Overlays for legibility: - `bg-gradient-to-b from-background via-transparent to-background` + `bg-background/25` - Top `h-32` and bottom `h-40` fades to background. - Sticky content container `sticky top-0 h-screen flex items-end justify-center pb-16 md:pb-24`. - Eyebrow: hairline + "OUR MISSION" (uppercase tracking-[3px]). - Two stacked paragraphs where each word animates from `opacity 0.2 → 1` and `blur(6px) → blur(0)` based on its own slice of `useScroll({ target, offset: ["start 0.85","end 0.2"] })` progress. - Paragraph 1 (large `text-2xl md:text-4xl lg:text-6xl font-medium tracking-[-1.5px] leading-[1.12]`): "We're building a space where curiosity meets clarity — where readers find depth, writers find reach, and every newsletter becomes a conversation worth having." The words **curiosity**, **meets**, **clarity** are highlighted full-white with a slightly stronger text-shadow; other words use `--hero-subtitle` color with a soft text-shadow `0 2px 20px rgba(0,0,0,0.6)`. - Paragraph 2 (smaller `text-xl md:text-2xl lg:text-3xl`): "A platform where content, community, and insight flow together — with less noise, less friction, and more meaning for everyone involved." - Tag row with bullet dots: `Depth`, `Reach`, `Meaning` (uppercase tracking-[3px] muted). ## Section 5 — Solution (sticky 12-col grid) - `py-32 md:py-44 border-t border-border/30 px-6 md:px-8`. - Left column (`lg:col-span-5 lg:sticky lg:top-32`): - Eyebrow "SOLUTION". - H2 `text-4xl md:text-5xl lg:text-6xl font-medium tracking-[-1px]`: `The platform for <italic serif>meaningful</italic> content`. - Body: "Four tools, one quiet ecosystem — built so writing, reading, and discovering all reward the same thing: depth." - Video card `rounded-2xl overflow-hidden aspect-video` with src: `` - Right column (`lg:col-span-7`): vertical list of 4 feature rows separated by `border-b border-border/40` (no border on last). Each row has a `liquid-glass` 12x12 rounded-2xl icon tile, title `text-xl md:text-2xl font-semibold tracking-[-0.5px]`, right-aligned index `01–04` in muted tracking-[2px], and muted description under the title. Icons + copy: 1. `Compass` — Curated Feed — "Editorial-quality recommendations that match your pace and depth." 2. `PenLine` — Writer Tools — "A calm canvas with the scaffolding serious writers ask for." 3. `Users` — Community — "Thoughtful readers and creators rewarded for their attention." 4. `Radio` — Distribution — "Reach built on signal, not noise — measured by meaning." ## Section 6 — CTA (video background + centered content) - `relative py-32 md:py-44 border-t border-border/30 overflow-hidden px-6 md:px-8`. - Background video (cover, z-0) src: `` - Overlay `absolute inset-0 bg-background/45 z-[1]`. - Centered content (max-w-3xl): - `<Logo className="h-12 w-auto" />` at the top. - H2 `text-4xl md:text-6xl lg:text-7xl font-medium tracking-[-1px] mt-8 leading-[1.05]`: `<italic serif>Start</italic> Your Journey`. - Muted lede: "Step into a quieter internet. Join the readers and writers shaping what comes next." - Buttons row (hover scale 1.03, tap 0.98): - Primary: `bg-foreground text-background rounded-lg px-8 py-3.5 text-sm font-semibold` — "Subscribe Now". - Secondary: `liquid-glass rounded-lg px-8 py-3.5 text-sm font-semibold` — "Start Writing". - Each element `fadeUp` with delays 0, 0.1, 0.2, 0.3. ## Section 7 — Footer - `border-t border-border/30 px-6 md:px-8`, inner `max-w-7xl pt-20 pb-12`. - Top block: 12-col grid split 5/7, with a `border-b border-border/30 pb-16`. - Left 5 cols: `<Logo />` only (no "Mindloop" text) + paragraph "A quieter internet for readers and writers. Meaningful updates, every week." + row of three `liquid-glass` 10x10 rounded-full icon buttons (Instagram, LinkedIn, Twitter). - Right 7 cols: three link columns, each with a uppercase tracking-[3px] muted heading and 4 links: - Product: How It Works, Philosophy, Use Cases, Changelog - Resources: Writer Guide, Reader FAQ, Press Kit, Brand - Company: About, Careers, Contact, Journal - Bottom bar `pt-8 flex md:flex-row items-center justify-between`: `© 2026 Mindloop. All rights reserved.` left; Privacy / Terms / Cookies right. - Giant decorative watermark: a non-interactive div rendering the word `mindloop` at `text-[18vw] leading-none font-serif italic text-foreground/[0.04] tracking-[-0.02em] text-center -mb-[4vw]`, giving a subtle oversized serif backdrop behind the footer. ## Video URLs summary (use exactly these) - Hero: `` - Mission: `` - Solution: `` - CTA: `` ## Animation rules - All reveal animations use `fadeUp(delay)` (`y: 20 → 0`, `opacity: 0 → 1`, 0.6s easeOut, once, `margin: -100px`). - Hero elements animate in on mount, not on scroll. - Navbar transitions between transparent and liquid-glass over 500ms when `window.scrollY > 20`. - Buttons use `whileHover={{ scale: 1.03 }}`, `whileTap={{ scale: 0.98 }}`. - Mission section uses `useScroll` + per-word `useTransform` for opacity and blur (`6px → 0px`). - SearchChanged cards: `ArrowUpRight` group-hover translates `-translate-y-0.5 translate-x-0.5`, underline links grow via `w-0 → w-full`. ## Typography rules - Body: Inter, line-height ~1.5. - Headings: Inter `font-medium` with very tight negative tracking (`-2px` on display, `-1.5px`/`-1px` on section heads). - Italic accent words wrap in `<span className="font-serif italic font-normal">…</span>` using Instrument Serif to contrast with the geometric sans. - Eyebrows use `text-xs uppercase tracking-[3px] text-muted-foreground`. ## Quality bar - Fully responsive down to 375px mobile; grids collapse to single column; fonts scale with `md:` / `lg:` variants. - Keep black (`#000`) background consistent; all text white or muted grays — no purple/indigo. - Videos must be `autoplay muted loop playsInline` and `object-cover`. - No external images besides the three Pexels avatars and the logo at `/image.png`. - Build must pass `npm run build` without TS errors.

Source heat

Stability

待复测

View case →

AI Coding (UI)X@viktoroddy →

Gemini vs Claude: Velorah Electric RV Landing Page

A web case by @viktoroddy created with Gemini · Claude, including the public result, full prompt, and original source.

Skill · viktoroddy · Landing-page information structure

Prompt

Access ALL prompts for stunning animated websites in one click: Build a Velorah landing page -- a premium, dark-themed single-page site for an electric RV/camper brand. Use React, TypeScript, Tailwind CSS, and the hls.js library. The page has 6 sections stacked vertically. The entire page background is pure black (hsl(0,0%,0%)). Use the font Instrument Serif (loaded from Google Fonts via <link> in index.html) for all headings and display text, and Inter for body text. GLOBAL STYLES (index.css): Import Google Fonts at the top: @import url(''); CSS custom properties (dark-only, no light mode): --background: 201 100% 13% --foreground: 0 0% 100% (white) --card: 0 0% 6% --card-foreground: 0 0% 100% --primary: 0 0% 100% --primary-foreground: 0 0% 4% --secondary: 0 0% 10% --secondary-foreground: 0 0% 100% --muted: 0 0% 10% --muted-foreground: 240 4% 66% --accent: 0 0% 10% --accent-foreground: 0 0% 100% --destructive: 0 84.2% 60.2% --destructive-foreground: 0 0% 100% --border: 0 0% 18% --input: 0 0% 18% --ring: 0 0% 100% --radius: 0.5rem Body uses font-family: var(--font-body) which maps to Inter. Liquid Glass CSS class (.liquid-glass): background: rgba(255, 255, 255, 0.01) with background-blend-mode: luminosity backdrop-filter: blur(4px) and -webkit-backdrop-filter: blur(4px) border: none box-shadow: inset 0 1px 1px rgba(255,255,255,0.1) position: relative; overflow: hidden ::before pseudo-element creates a gradient border effect: 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%) Uses -webkit-mask with xor composite and mask-composite: exclude to create the border-only effect Animations: @keyframes fade-rise: from opacity:0; translateY(24px) to opacity:1; translateY(0) .animate-fade-rise: animation: fade-rise 0.8s ease-out both .animate-fade-rise-delay: same with 0.2s delay .animate-fade-rise-delay-2: same with 0.4s delay index.html: Load Instrument Serif from Google Fonts via <link> tags: <link rel="preconnect" href="" /> <link rel="preconnect" href="" crossorigin /> <link href="" rel="stylesheet" /> HLS VIDEO COMPONENT: Create an HlsVideo component that accepts a src prop. It uses hls.js -- if Hls.isSupported(), create an HLS instance, load the source, and attach to a <video> element. Otherwise fall back to native HLS if the browser supports application/vnd.apple.mpegurl. The video element has classes: absolute inset-0 w-full h-full object-cover z-0 and attributes: autoPlay loop muted playsInline. VIDEO URLS (use these exact URLs): Hero background: Feature section right card: Big Statement section (HLS stream): CTA/Join section: SECTION 1 -- HERO: Full-screen section (min-h-screen, relative, overflow-hidden) Background: <video> tag (not HLS component) using Hero URL, with autoPlay loop muted playsInline, classes absolute inset-0 w-full h-full object-cover z-0 Bottom gradient overlay: absolute inset-x-0 bottom-0 h-[40%] bg-gradient-to-t from-black via-black/60 to-transparent z-[1] Navbar (relative z-10, flex items-center justify-between, px-8 py-6, max-w-7xl mx-auto): Left: Brand name "Velorah" with registered trademark superscript, text-foreground text-3xl tracking-tight, font-family 'Instrument Serif', serif Center: Nav links (Home, Studio, About, Journal, Reach Us) -- hidden md:flex items-center gap-10 text-sm text-white. All links are text-white with hover:text-white/80 transition-colors Right: "Begin Journey" button with liquid-glass rounded-full px-6 py-2.5 text-sm text-foreground transition-transform hover:scale-[1.03] Hero content (relative z-10 flex flex-col items-center justify-center text-center px-6 pt-[28px] pb-40): Heading: animate-fade-rise text-foreground text-5xl sm:text-7xl md:text-8xl leading-[0.95] tracking-[-2.46px] max-w-7xl font-normal, font-family 'Instrument Serif', serif. Text: Where dreams rise through the silence. -- the words "dreams" and "through the silence." are wrapped in <em className="not-italic text-white"> Paragraph: animate-fade-rise-delay text-white text-base sm:text-lg max-w-2xl mt-8 leading-relaxed. Text: "We're designing tools for deep thinkers, bold creators, and quiet rebels. Amid the chaos, we build digital spaces for sharp focus and inspired work." Button: animate-fade-rise-delay-2 liquid-glass rounded-full px-14 py-5 text-base text-foreground mt-12 transition-transform hover:scale-[1.03] cursor-pointer. Text: "Begin Journey" SECTION 2 -- TAGLINE: flex items-center justify-center min-h-[70vh] px-6 bg-[hsl(0,0%,0%)] Heading: text-foreground text-4xl sm:text-6xl md:text-7xl leading-[1.05] tracking-[-1.5px] text-center max-w-4xl, font-family 'Instrument Serif', serif. Text: "So you can feel at home, anywhere." SECTION 3 -- FEATURE SPLIT: px-6 md:px-12 max-w-7xl mx-auto py-0 Grid: grid md:grid-cols-2 gap-4 rounded-2xl overflow-hidden min-h-[520px] Left card (bg-card rounded-2xl p-10 md:p-14 flex flex-col justify-between): Top: Small circle icon (inline-block w-8 h-8 rounded-full border border-border mb-8), heading "100% Electric" (text-foreground text-3xl sm:text-5xl tracking-[-1px] mb-6, Instrument Serif), paragraph "No more fossil fuels, buzzing generators, and propane tanks. Velorah has power for days." (text-muted-foreground text-sm sm:text-base leading-relaxed max-w-sm) Bottom: Feature tabs array: [{label:"Living Electric",id:"electric"},{label:"Charge Faster",id:"charge"},{label:"Sleep Well",id:"sleep"},{label:"Acoustic Comfort",id:"acoustic"},{label:"5+ Seasons",id:"seasons"}]. Each tab is a <button> with text-xs px-4 py-2 rounded-full border transition-colors. Active state: bg-foreground text-primary-foreground border-foreground. Inactive: border-border text-muted-foreground hover:text-foreground. Use useState("electric") for active tab. Progress bar: w-full h-0.5 bg-border rounded-full mb-6 with inner div h-full bg-foreground rounded-full at width: 35% Button: liquid-glass rounded-full px-8 py-3 text-sm text-foreground transition-transform hover:scale-[1.03]. Text: "Explore the Velorah Flow" Right card (relative rounded-2xl overflow-hidden min-h-[400px]): <video> using Feature section URL, absolute inset-0 w-full h-full object-cover, autoPlay loop muted playsInline SECTION 4 -- BIG STATEMENT: relative flex flex-col items-center justify-center min-h-[90vh] px-6 overflow-hidden Background: <HlsVideo> component using the Mux HLS URL Content (relative z-10 flex flex-col items-center text-center max-w-5xl): Label: text-muted-foreground text-xs sm:text-sm tracking-[0.3em] uppercase mb-6. Text: "Intelligent Companion" Heading: text-foreground text-4xl sm:text-6xl md:text-7xl leading-[1.05] tracking-[-1.5px], Instrument Serif. Text: "Adventure inspired. App driven." Paragraph: text-muted-foreground text-base sm:text-lg max-w-2xl mt-8 leading-relaxed. Text: "One app to control climate, lighting, navigation, and energy. Monitor every system in real time, automate your routines, and let Velorah learn how you live on the road." Stats grid: grid grid-cols-2 sm:grid-cols-4 gap-8 sm:gap-12 mt-14. Four items (OTA / "Over-the-air updates", 360 degrees / "System visibility", AI / "Adaptive routines", 24/7 / "Remote monitoring"). Each stat value is text-foreground text-3xl sm:text-4xl font-light in Instrument Serif, label is text-muted-foreground text-xs sm:text-sm Button: liquid-glass rounded-full px-10 py-4 text-sm text-foreground mt-12 transition-transform hover:scale-[1.03]. Text: "Discover the App" SECTION 5 -- CTA / JOIN: relative min-h-[90vh] flex flex-col items-center justify-center text-center px-6 overflow-hidden Background: <video> using CTA URL, absolute inset-0 w-full h-full object-cover z-0, autoPlay loop muted playsInline Content (relative z-10 flex flex-col items-center max-w-4xl): Price label: text-muted-foreground text-xs sm:text-sm tracking-[0.3em] uppercase mb-4. Text: "Starting at $99,000" Heading: text-foreground text-5xl sm:text-7xl md:text-8xl leading-[0.95] tracking-[-2px], Instrument Serif. Text: "Join the ride" Paragraph: text-muted-foreground text-base sm:text-lg max-w-xl mt-6 leading-relaxed. Text: "Reserve your Velorah today with a fully refundable $500 deposit. Early adopters receive priority delivery and exclusive founding-member benefits." Two buttons in a flex flex-col sm:flex-row items-center gap-4 mt-10: "Preorder Now": liquid-glass rounded-full px-10 py-4 text-sm text-foreground transition-transform hover:scale-[1.03] "Schedule a Tour": rounded-full px-10 py-4 text-sm text-muted-foreground border border-border hover:text-foreground hover:border-foreground/30 transition-colors SECTION 6 -- FOOTER: bg-[hsl(0,0%,0%)] border-t border-border px-6 md:px-12 py-16 max-w-7xl mx-auto Grid: grid grid-cols-1 md:grid-cols-3 gap-12 mb-16 Col 1: Heading "Where home meets the road." (text-foreground text-2xl sm:text-3xl leading-tight, Instrument Serif) Col 2: Links list -- product, app, company, community, press, preorder. Each is text-sm text-muted-foreground hover:text-foreground transition-colors capitalize Col 3: Text "Subscribe for the latest Velorah updates." (text-sm text-muted-foreground mb-4) and a "Subscribe" button (liquid-glass rounded-full px-6 py-2.5 text-sm text-foreground transition-transform hover:scale-[1.03]) Bottom bar: flex flex-col md:flex-row items-center justify-between gap-4 pt-8 border-t border-border text-xs text-muted-foreground. Left: "Velorah" with registered trademark (text-foreground text-xl tracking-tight, Instrument Serif, <sup className="text-[8px]">). Right: "Privacy Policy" and "Terms & Conditions" links (hover:text-foreground transition-colors) TAILWIND CONFIG: Standard shadcn/ui Tailwind config with all the HSL color variables mapped, darkMode: ["class"], tailwindcss-animate plugin, and accordion keyframes/animations. DEPENDENCIES: React 18, react-router-dom, Tailwind CSS, shadcn/ui primitives, hls.js, lucide-react, @tanstack/react-query, tailwindcss-animate.

Source heat

Stability

待复测

View case →

AI Coding (UI)X@viktoroddy →

ChatGPT Image Design-to-React Native Website

A website case by @viktoroddy made with ChatGPT Image 2.0 · Claude Opus 4.6, including the public result, full prompt, and original source.

Skill · viktoroddy · Landing-page information structure

Prompt

Access ALL prompts for stunning animated websites in one click: EXACT RECREATION PROMPT Project Setup Stack: React 19 + Vite 6 + Tailwind CSS 4 + Motion (Framer Motion) + Lucide React icons + TypeScript package.json dependencies: - `react`, `react-dom` ^19.0.1 - `vite` ^6.2.3 - `@tailwindcss/vite` ^4.1.14, `tailwindcss` ^4.1.14 - `motion` ^12.23.24 - `lucide-react` ^0.546.0 - `@vitejs/plugin-react` ^5.0.4 - `typescript` ~5.8.2 Fonts (loaded via Google Fonts in `index.css`): - Sans: Inter (weights: 300, 400, 500, 600) - Mono: JetBrains Mono (weights: 400, 500) ```css /* index.css */ @import url(''); @import "tailwindcss"; @theme { --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace; } @layer utilities { .text-mega { font-size: 21vw; line-height: 0.75; letter-spacing: -0.04em; } } ``` Global styling: Background `#fcfcfc`, text `#111`, selection color `bg-black text-white`, `overflow-x-hidden`, `font-sans` (Inter). --- DATA ```tsx const chaptersData = [ { name: "Age of Dinosaurs", image: "" }, { name: "Fossils of Ancient Life", image: "" }, { name: "Reptiles of the Mesozoic", image: "" }, { name: "Marine Fossil Gallery", image: "" }, { name: "Prehistoric Giants", image: "" } ]; ``` --- STATE ```tsx const [showVideo, setShowVideo] = useState(false); const [activeChapter, setActiveChapter] = useState(2); // starts at "Reptiles of the Mesozoic" const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false); ``` - `showVideo` flips to `true` after a 2800ms delay (setTimeout) - `activeChapter` auto-cycles every 3500ms via setInterval, wrapping `(prev + 1) % 5` --- ANIMATION VARIANTS ```tsx const fadeUp = { initial: { opacity: 0, y: 20 }, animate: { opacity: 1, y: 0 }, }; const letterBlock = { initial: { y: 120, opacity: 0 }, animate: { y: 0, opacity: 1, transition: { duration: 1.2, ease: [0.16, 1, 0.3, 1] } } }; ``` --- SECTION 1: HERO (full viewport height) Container: `relative w-full min-h-screen flex flex-col overflow-hidden` 1A. HEADER (NHM Logo) - `motion.header` with `staggerChildren: 0.1, delayChildren: 0.1` - Padding: `pt-6 px-6 md:px-16`, `z-20` - The "NHM" logo is a custom inline SVG with `viewBox="0 0 840 100"`, `fill-[#111]`, full width - The SVG is wrapped in `motion.h1` with `variants` that animate from `scale: 1.03` to `scale: 1` with `staggerChildren: 0.06, delayChildren: 0.1` - Each polygon of each letter uses the `letterBlock` variant (slides up from `y: 120`) - Letter N (translate 0,0): Three polygons -- left vertical `0,0 14,0 14,100 0,100`, right vertical `200,0 214,0 214,100 200,100`, diagonal `0,0 33,0 214,100 181,100` - Letter H (translate 280,0): Three polygons -- left vertical `0,0 14,0 14,100 0,100`, right vertical `200,0 214,0 214,100 200,100`, crossbar `14,43 200,43 200,57 14,57` - Letter M (translate 560,0): Four polygons -- left vertical `0,0 14,0 14,100 0,100`, right vertical `266,0 280,0 280,100 266,100`, left diagonal `0,0 26,0 153,100 127,100`, right diagonal `254,0 280,0 153,100 127,100` 1B. SUB-NAV BAR - Below the SVG logo, `flex justify-between items-start mt-8` - Font: `text-[10px] md:text-[11px] font-mono tracking-[0.2em] uppercase` - Uses `fadeUp` variant with `duration: 0.8, ease: "easeOut"` Left column (15% width): Three lines -- "Natura" / "History" / "Museum" Arrow separator (5% width, hidden on mobile): `ArrowRight` from lucide, size 14, strokeWidth 1, `text-gray-400` Center column (flex-1 on mobile, 30% on desktop): "Exploring the story of life on earth through science, discovery and wonder." -- Split differently on desktop (3 lines) vs mobile (4 lines). `text-gray-800 leading-relaxed font-mono` Arrow separator (5% width, hidden on mobile): Same as above Right column (15% width, hidden on mobile): Nav links list -- Visit, Exhibitions, Discover, Learn, About. `text-gray-800`, `hover:text-black hover:underline` Hamburger button (far right, z-60): Two horizontal lines (`w-8 h-[1.5px] bg-black`), `gap-[6px]`. Hover: first line shrinks to `w-6`, second expands to `w-10`. When open: first rotates 45deg + translateY, second rotates -45deg + translateY (forming an X). Transition: `duration-300`. 1C. MOBILE MENU OVERLAY - `AnimatePresence` wrapping a `motion.div` - Appears below the header, slides in from `y: -20`, `opacity: 0` to `y: 0, opacity: 1` - `bg-[#fcfcfc] border-b border-gray-200 shadow-xl`, only visible on `md:hidden` - Contains the same nav links as the desktop version, `text-sm font-mono tracking-[0.2em] uppercase`, `space-y-6` 1D. BACKGROUND VIDEO - Appears after 2800ms delay (controlled by `showVideo` state) - `absolute top-0 left-0 w-full h-full pointer-events-none z-0` - Video: `autoPlay loop muted playsInline`, `w-full h-full object-cover` - Video URL: `` 1E. LEFT SIDEBAR CONTENT - `motion.div` with `staggerChildren: 0.15, delayChildren: 0.6` - Position: `px-10 md:px-16`, `mt-20 sm:mt-28 md:mt-32`, `w-[320px]`, `z-10` Section indicator: `01` + horizontal line (`w-16 h-[1.5px] bg-black/20`), `text-xs font-mono` Headline: "TIMELESS WONDERS" -- `text-[3.5rem] md:text-[5rem] font-normal tracking-tight leading-[1]`. Line break between "TIMELESS" and "WONDERS". Description: "Step into the natural world and / discover the stories written / millions of years ago." -- `text-[13px] md:text-[14px] text-gray-700 w-[240px] leading-[1.6]` CTA Button ("Explore Now"): - Container: `bg-[#1a1a1a] px-6 py-3.5 border border-[#1a1a1a] rounded-md shadow-sm` - Hover: slides up 0.5px, adds `shadow-[3px_3px_0px_rgba(17,17,17,0.5)]` - Active: resets translate and shadow - Has a sliding background panel: `bg-[#fcfcfc]` that slides from `-translate-x-[101%]` to `translate-x-0` on hover, `duration-700 ease-[cubic-bezier(0.16,1,0.3,1)]` - Icon: Custom SVG leaf/plant shape (4 paths forming a stylized leaf), white by default, turns `#111` on hover with `scale-110 -rotate-12 -translate-y-1` transform - Text: "Explore Now", `text-[15px] font-medium`, white turning to `#111` on hover 1F. RIGHT SIDEBAR (hidden on mobile) - `motion.div` with `staggerChildren: 0.15, delayChildren: 0.9` - Position: `w-[200px] mt-12 md:mt-20`, `hidden md:flex` Specimen info: "Tyrannosaurus Rex" heading (`text-[10px] font-bold font-mono tracking-widest uppercase`), subtext "Late Cretaceous period / 68-66 million years ago" (`text-[12px] text-gray-600 leading-[1.6]`) Stats: "Length" label + "12.3 m" value, "Height" label + "4.0 m" value. Labels: `text-[10px] font-mono tracking-widest uppercase text-gray-500`. Values: `text-[13px] font-medium`. View Details button: Circle (`w-10 h-10 rounded-full border border-gray-400`) with `Plus` icon (size 16, strokeWidth 1.5), text "View Details" (`text-[10px] font-mono uppercase tracking-widest font-bold`). Hover: circle gets `border-black bg-[#111]`, icon turns white. 1G. BOTTOM-LEFT "SCROLL TO EXPLORE" - `absolute bottom-10 left-[2.5rem] md:left-[4rem]`, `hidden md:flex` - Fade up animation: `delay: 1.2` - Circle (`w-12 h-12 rounded-full border border-gray-300`) containing two thin vertical lines (`w-[1px] h-[12px] bg-gray-600`, `gap-[4px]`) representing a pause icon - Text: "Scroll to explore" -- `text-[10px] font-mono tracking-widest uppercase text-gray-500 font-semibold` --- SECTION 2: "EXPLORE OUR WORLD" Container: `relative w-full min-h-[75vh] md:min-h-screen bg-[#fcfcfc]`, flex column centered, `pt-24 md:pt-32 pb-0 z-20` 2A. SECTION LABEL `[ 02 ] Explore Our World` -- `text-[10px] md:text-[11px] font-mono tracking-[0.2em]`, `mb-12`. "02" in `text-gray-500`, "Explore Our World" in `text-gray-900 font-bold uppercase`. 2B. MAIN HEADING "Unearth the stories of our planet's past through fossils, minerals, and ancient wonders." -- `text-[2.2rem] md:text-[3.5rem] lg:text-[4.2rem] leading-[1.1] font-medium tracking-tight text-[#111]`, max-width 1000px, text-center. Line break on desktop after "past". Animates with `whileInView` from `y: 40, opacity: 0` to `y: 0, opacity: 1`, `once: true`, margin `-100px`. 2C. ACTION PILLS Five pill buttons in a flex-wrap row, `gap-3 md:gap-4`, `mb-10 md:mb-24`. Staggered reveal animation (`staggerChildren: 0.1, delayChildren: 0.3`). Each pill: `rounded-full border border-gray-300 text-[11px] font-medium uppercase tracking-wider bg-white/50 backdrop-blur-sm text-gray-800`. Hover: `border-black bg-black text-white`. Icons from lucide (size 14, strokeWidth 2): 1. `Bone` + "Dinosaurs" 2. `Dna` + "Ancient Life" 3. `Gem` + "Minerals" 4. `Leaf` + "Fossils" 5. `BookOpen` + "Learn More" 2D. SPACER `min-h-[220px] md:min-h-[450px]` -- provides room for the pterodactyl image from Section 3 to overlap upward. 2E. BOTTOM TEXT Absolute positioned at bottom, `px-8 md:px-16 pb-8 md:pb-12`, `pointer-events-none`. Two text elements at `justify-between`: - Left: "WE DON'T JUST TELL STORIES." - Right: "PALEONTOLOGY (C) 2026" - Both: `text-[10px] font-mono tracking-widest uppercase text-gray-500 font-medium`, hidden on mobile. --- SECTION 3: "ANCIENT COLLECTION" (Dark Section) Container: `relative w-full bg-[#0a0a0a] text-white flex flex-col z-30` 3A. PTERODACTYL IMAGE (Overlapping) - Absolute positioned at top, centered horizontally (`left-1/2 -translate-x-1/2`) - Width: `w-[160vw] md:w-[1100px]` - Image URL: `` - Animates with `whileInView` from `y: "-65%", opacity: 0` to `y: "-78%", opacity: 1`, `duration: 1.4, ease: "easeOut"`, viewport margin `100px` - `pointer-events-none z-0`, `mix-blend` not applied here 3B. HEADING AREA - Padding: `px-8 md:px-16 pt-32 md:pt-48 mb-16`, `z-10` - Two-column layout on xl (`flex-col xl:flex-row justify-between`) Left -- Main heading: "Curated from millions of years of wonder [3 circle icons] & discovery." -- `text-[1.8rem] md:text-[3rem] lg:text-[3.8rem] xl:text-[4rem] leading-[1.15] font-medium tracking-tight text-white`. The three circle icons are inline (`inline-flex gap-2 md:gap-3 align-middle mx-2 md:mx-4 translate-y-[-4px]`), each `w-10 h-10 md:w-14 md:h-14 rounded-full border border-gray-600 bg-black text-gray-400`. Hover: `bg-white text-black border-white`. Icons: `Bone`, `Dna`, `Leaf` (size 22). Right -- Tagline + pills: - Tagline: "WE DON'T JUST DISPLAY FOSSILS / WE SHARE EARTH'S STORY" -- `text-[9px] md:text-[10px] font-mono tracking-widest text-gray-400 uppercase mb-6 leading-relaxed` - Three pills: "Educational", "Authentic", "Inspiring" -- `px-5 py-2 rounded-full border border-gray-600 text-[9px] font-mono tracking-widest uppercase text-gray-300`. Hover: `bg-white text-black border-white`. 3C. TWO-COLUMN PANEL Separated by `h-[1px] bg-gray-800` line. Flex row on desktop, column on mobile. Left panel (35% width): - `border-r border-gray-800` on desktop, `border-b` on mobile - `min-h-[400px] md:min-h-[500px]` - Top: `***` text (`text-gray-500 text-xl tracking-[0.3em]`) - Center: Chapter image using `SandTransitionImage` component (SVG filter-based sand/dissolve transition). Image: `absolute inset-0 w-[80%] h-[80%] m-auto object-contain mix-blend-lighten`. Uses `AnimatePresence mode="wait"`. - Bottom: Chapter counter `01 / 05` style, with animated number (`motion.div` slides vertically). `text-[10px] font-mono tracking-widest text-[#888] uppercase`. Counter numeral color `#888`, divider `text-[#333]`. Right panel (65% width): - Top bar: "Explore the past. Understand the present." + animated "Chapter 0X" label. `border-b border-gray-800 p-8 text-[10px] font-mono text-gray-400 tracking-widest`. - Chapter list: 5 items, each `border-b border-gray-800/80 py-8`. Active: `text-white`, inactive: `text-[#444] hover:text-[#999]`. Chapter name: `text-2xl md:text-[2rem] font-medium tracking-tight`. Active item shows `ArrowUpRight` icon (size 22, strokeWidth 1, `text-gray-400`) that animates in/out. - Clicking a chapter sets `activeChapter`. 3D. BOTTOM FOOTER - `h-[1px] bg-gray-800` divider - Text: "DIGGING INTO OUR PLANET'S PAST" -- `px-8 py-8 text-[10px] font-mono tracking-widest text-gray-500 uppercase bg-[#0a0a0a]` --- SandTransitionImage COMPONENT A custom component that creates a sand/particle dissolve effect using SVG filters: ```tsx function SandTransitionImage({ src, alt, className }) { // Uses usePresence() from motion/react for AnimatePresence awareness // Unique filterId per instance via useRef // requestAnimationFrame loop over 900ms // Easing: entering = quartic ease-out (1 - Math.pow(1-t, 4)), exiting = cubic (Math.pow(t, 3)) // SVG filter chain: // 1. feTurbulence: fractalNoise, baseFrequency 1.8, numOctaves 4 // 2. feDisplacementMap: scale up to 150 based on progress // 3. feOffset: dy up to -80 (enter) or 120 (exit), dx up to -30/+30 // 4. feGaussianBlur: up to 6px // 5. feColorMatrix: opacity fades (1 - progress * 1.2) // Image has crossOrigin="anonymous" and referrerPolicy="no-referrer" } ``` --- ALL EXTERNAL ASSET URLs Video: - `` Images: - Chapter 1: `` - Chapter 2: `` - Chapter 3: `` - Chapter 4: `` - Chapter 5: `` - Pterodactyl: `` (Note: these are Cloudinary URLs, not CloudFront. The project uses Cloudinary for all hosted media assets.) --- KEY DESIGN DETAILS - Color palette: `#fcfcfc` (off-white bg), `#111` / `#1a1a1a` (near-black), `#0a0a0a` (dark section bg). Gray scale via Tailwind: `gray-300` through `gray-800`. - No purple/indigo anywhere. Strictly monochrome black/white/gray. - Typography hierarchy: Large display headings (3.5-5rem), mono labels (10-11px), body text (13-14px). - Spacing: 8px base system throughout. - Transitions: Most hover transitions 300-700ms. Button slide effect uses `cubic-bezier(0.16, 1, 0.3, 1)`. Letter animations use same cubic bezier. - The page is entirely a single `App.tsx` component plus the `SandTransitionImage` helper function in the same file.

Source heat

Stability

待复测

View case →

AI Coding (UI)X@viktoroddy →

Nano Banana + Veo 3 + Lovable Animated Site

A website case by @viktoroddy created with Lovable · Nano Banana · Veo 3, including the public result, full prompt, and original source.

Skill · viktoroddy · Landing-page information structure

Prompt

Access ALL prompts for stunning animated websites in one click: Create a single-page hero section with a fullscreen looping background video, glassmorphic navigation, and cinematic typography. Use React + Vite + Tailwind CSS + TypeScript with shadcn/ui. Video Background: Fullscreen <video> element with autoPlay, loop, muted, playsInline Source URL: Positioned absolute inset-0 w-full h-full object-cover z-0 Fonts: Import from Google Fonts: Instrumental Serif (display) and Inter weights 400/500 (body) CSS variables: --font-display: 'Instrumental Serif', serif and --font-body: 'Inter', sans-serif Body uses var(--font-body), headings use inline fontFamily: "'Instrument Serif', serif" Color Theme (dark, HSL values for CSS variables): --background: 201 100% 13% (deep navy blue) --foreground: 0 0% 100% (white) --muted-foreground: 240 4% 66% (muted gray) --primary: 0 0% 100%, --primary-foreground: 0 0% 4% --secondary: 0 0% 10%, --muted: 0 0% 10%, --accent: 0 0% 10% --border: 0 0% 18%, --input: 0 0% 18% Navigation Bar: relative z-10, flex row, justify-between, px-8 py-6, max-w-7xl mx-auto Logo: "Velorah®" (® as <sup className="text-xs">), text-3xl tracking-tight, Instrument Serif font, text-foreground Nav links (hidden on mobile, md:flex): Home (active, text-foreground), Studio, About, Journal, Reach Us — all text-sm text-muted-foreground with hover:text-foreground transition-colors CTA button: "Begin Journey", liquid-glass rounded-full px-6 py-2.5 text-sm text-foreground, hover:scale-[1.03] Hero Section: relative z-10, flex column, centered, text-center, px-6 pt-32 pb-40 py-[90px] H1: "Where dreams rise through the silence." — text-5xl sm:text-7xl md:text-8xl, leading-[0.95], tracking-[-2.46px], max-w-7xl, font-normal, Instrument Serif. The words "dreams" and "through the silence." wrapped in <em className="not-italic text-muted-foreground"> for color contrast Subtext: text-muted-foreground text-base sm:text-lg max-w-2xl mt-8 leading-relaxed — "We're designing tools for deep thinkers, bold creators, and quiet rebels. Amid the chaos, we build digital spaces for sharp focus and inspired work." CTA button: "Begin Journey", liquid-glass rounded-full px-14 py-5 text-base text-foreground mt-12, hover:scale-[1.03] cursor-pointer Liquid Glass Effect (CSS class .liquid-glass): .liquid-glass { background: rgba(255, 255, 255, 0.01); background-blend-mode: luminosity; backdrop-filter: blur(4px); -webkit-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; } Animations (CSS keyframes + classes): @keyframes fade-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } .animate-fade-rise { animation: fade-rise 0.8s ease-out both; } .animate-fade-rise-delay { animation: fade-rise 0.8s ease-out 0.2s both; } .animate-fade-rise-delay-2 { animation: fade-rise 0.8s ease-out 0.4s both; } H1 gets animate-fade-rise Subtext gets animate-fade-rise-delay Hero CTA button gets animate-fade-rise-delay-2 Layout: No decorative blobs, radial gradients, or overlays. Minimalist, cinematic, vertically centered hero. The video provides all visual depth.

Source heat

Stability

待复测

View case →

AI Coding (UI)X@viktoroddy →

Claude + Nano Banana + Kling Animated Website

A website case by @viktoroddy made with Claude Code · Nano Banana Pro · Kling, including the public result, full prompt, and original source.

Skill · viktoroddy · Landing-page information structure

Prompt

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

Source heat

Stability

待复测

View case →

AI Coding (UI)X@viktoroddy →

AntiGravity + Gemini 3.1 Landing Page

A webpage case created by @viktoroddy with AntiGravity · Gemini 3.1 Pro, including the public result, full prompt, and original source.

Skill · viktoroddy · Landing-page information structure

Prompt

Prompt: Build a hero section with the following exact specifications: Overall Layout: Full-width section with background: #000000 (pure black) Overflow hidden Background video playing behind all content (details below) Background Video: Source: Autoplay, loop, muted, playsInline Scaled to 120% of the container (width and height both 120%) Horizontally centered, focal point anchored to the bottom Sits behind all content (lowest z-index) Blurred Background Element: Absolute positioned, horizontally centered, top offset ~215px Size: 801px wide × 384px tall, fully rounded (pill shape) Color: pure black #000000 Blur: 77.5px z-index: 1 (above video, below content) All text and UI content sits at z-index: 2 (above everything) Navbar (top): Max width: 1440px, centered horizontally Horizontal padding: 120px, vertical padding: 16px, height: 102px Flexbox row, space-between alignment Left side: Logo + nav links with 80px gap between them Logo: "LOGOIPSUM" SVG mark, 134px × 25px, white fill Nav links in a row with 10px gap between items Each link: font Manrope, medium weight, 14px size, 22px line-height, white color, padding 10px horizontal / 4px vertical Items: "Home", "Services" (with a 24×24 white chevron-down icon to the right, 3px gap), "Reviews", "Contact us" Right side: Two buttons with 12px gap "Sign In" button: white background, 16px horizontal / 8px vertical padding, 8px border-radius, Manrope semibold 14px/22px, color #171717, with a 1px #d4d4d4 border overlay "Get Started" button: background #7b39fc (purple), 16px/8px padding, 8px border-radius, Manrope semibold 14px/22px, color #fafafa, subtle box-shadow 0px 4px 16px rgba(23,23,23,0.04) Hero Content (centered below navbar): Flex column, centered, max-width 871px, top margin 162px 24px gap between heading block and buttons Heading block: flex column, 10px gap, center-aligned text Line 1: "Automate repetitive." — font Inter, medium weight, 76px, white, letter-spacing -2px, line-height 1.15 Line 2: "Focus on growth." — font Instrument Serif, italic, 76px, white, letter-spacing -2px, line-height 1.15 Subtitle: "The next-generation AI agent platform that handles lead generation, customer support, and data entry while you build." — font Manrope, regular weight, 18px, 26px line-height, color #f6f7f9, opacity 90%, max-width 613px CTA Buttons: flex row, 22px gap, vertically centered "Get Started Free": background #7b39fc, padding 24px horizontal / 14px vertical, 10px border-radius, font Cabin medium 16px, line-height 1.7, white text "Watch 2min Demo": background #2b2344 (dark purple), same padding/radius/font specs, color #f6f7f9 Dashboard Image (below hero content): Centered, top margin 80px, bottom padding 40px Outer container: 1163px wide (max 90% of viewport), 24px border-radius, backdrop-blur 10px, background rgba(255,255,255,0.05) (glassmorphic), transparent border 1.5px Inner padding: 22.5px all sides Image inside: full width, auto height, 8px border-radius, object-fit cover

Source heat

Stability

待复测

View case →

AI Coding (UI)X@viktoroddy →

Gemini 3.1 Generates an Animated Website in One Go

A web case by @viktoroddy created with Gemini 3.1, including the public result, full prompt, and original source.

Skill · viktoroddy · Landing-page information structure

Prompt

PROMPT: Build a premium electric vehicle landing page with a dark, cinematic aesthetic. The entire site uses a black background (hsl(0,0%,0%)) with light text (hsl(0,0%,95%) as primary) and orange accents (hsl(25,100%,50%)). No default fonts — keep it minimal and editorial. Use shadcn/ui design tokens. Here are the sections in order: Design System (index.css) --background: 0 0% 0% --foreground: 0 0% 12% (used for dark elements like CTA button inner circles) --primary: 0 0% 95% (near-white, used for all text) --primary-foreground: 0 0% 12% --accent-warm: 25 90% 55% (orange accent) All section backgrounds are pure black hsl(0,0%,0%) Section 1: Navbar Fixed top, full-width, rounded-full pill shape Transparent initially, on scroll: black bg with backdrop-blur-xl, border primary/10 Logo left: "Electric" with an orange dot "." — logo color changes from black to white on scroll Nav links: Services, About, Team, Contact — hover has a scale-up rounded bg pill effect CTA button right: "Get Started" with a rounded-full pill, contains an ArrowUpRight icon inside a circular foreground bg CTA switches from black bg to white bg on scroll Mobile: hamburger menu, opens a rounded dark overlay with links + CTA Section 2: Hero Full viewport height, video background (/videos/hero_bg.mp4, autoplay, loop, muted) Large heading top-left: "Drive Beyond. / Unlock Pure Power" — white text, 78px on desktop Below heading: "Learn more" link with arrow icon, bordered button (border-foreground), no fill Section 3: Connected Systems (BigLinks) Top half: Video background (/videos/biglinks_bg.mp4) with 60% black overlay Left-aligned content: pill badge "Connected Systems", heading "Seamlessly Integrate / Every System", subtitle paragraph 12-column icon grid (4 cols mobile, 6 tablet, 12 desktop): each icon is 80x80px, rounded-xl, border white/10, bg white/5, backdrop-blur. Icons are orange with glow (drop-shadow-[0_0_8px_hsl(25,100%,50%)]). Icons: Gauge, Zap, Shield, Cog, Fuel, Navigation, Bluetooth, Wifi, Radio, Car, Wrench, Settings (from lucide-react) "Explore All" rounded pill border button Bottom half: 3 big full-width text links stacked vertically: "Find a dealer", "Fleet & lease", "Book a test drive" — each is huge text (110px desktop), with a ChevronRight icon right-aligned, separated by border-b border-primary/10, hover reduces opacity Section 4: Services Video background (/videos/services_card.mp4, autoplay, loop, muted) Centered content: pill badge "Next-Gen Driving", heading "Design, build and perfect / every single detail" Below: a glass-morphism card (max-w-2xl, centered, bg-primary/5 backdrop-blur-xl border-primary/10 rounded-2xl)Heading: "Effortless, All-Electric / Performance" Paragraph describing adaptive tech 3 bullet points with orange Zap icons (with glow): "Full-spectrum torque & drivetrain control", "Personalised driving & comfort profiles", "Track range & plan routes easily" Section 5: About Black bg, left-aligned Label: line + "About Us" text Heading: "Why You Absolutely Should / Experience Our Electric Range" (last part in primary/50) Below: two-column layoutLeft: 3 abstract shape images side by side (shape-1.png, shape-2.png, shape-3.png), each object-contain, 256px tall Right: two paragraphs of body text in primary/70 Section 6: Audience (For Whom?) Black bg, left-aligned Label: line + "For Whom?" Heading: "Who Should Experience / Our Electric Range" (second line in primary/50) 4-column grid of cards:First card: circular with a background image (audience-icon.png), aspect-square rounded-full border-primary/10 Other 3 cards: rounded-3xl bordered cards with lucide icons (Users, Gauge, Wrench) in primary/50, label text below Bottom: rounded info bar with descriptive paragraph Section 7: CTA Black outer bg, inner rounded-2xl card with video bg (/videos/services_card.mp4) + 50% black overlay Left-aligned content: heading "Experience the future / of driving today." Subtitle: "Book your test drive — one click, instant access. / No commitment, pure electric." Rounded-full CTA button: "Book a Test Drive" with ArrowUpRight in a circular foreground-colored badge, pill shape with bg-primary Assets needed: 4 videos: hero_bg.mp4, biglinks_bg.mp4, services_card.mp4 (used twice: services + CTA) 3 abstract shape PNGs: shape-1.png, shape-2.png, shape-3.png 1 audience icon image: audience-icon.png Use lucide-react for all icons Key design patterns: All section padding: px-7 py-16 md:px-12 lg:px-20 lg:py-24, max-w-7xl centered Label pattern: h-px w-6 bg-primary/40 line + small text Badge pattern: rounded-full pill with border primary/30, uppercase tracking-widest CTA button pattern: rounded-full, bg-primary text-primary-foreground, with inner circular icon badge Orange accent color used only for: logo dot, icon glows, specific highlights — always hsl(25,100%,50%) with optional drop-shadow glow

Source heat

Stability

待复测

View case →

viktoroddy · Landing-page information structure

Install into your agent.

Methods stay attached to their makers.

Judge the Skill through finished work.

Gemini + AntiGravity Dental Clinic Website

Claude Auto-Generated Single-Page Animated Site

Nano Banana + Flow + AntiGravity Animated Website

Claude + Fable: Aethera Fintech Landing Page

GPT Image 2 + Veo 3 + Lovable Marketing Site

Gemini vs Claude: Velorah Electric RV Landing Page

ChatGPT Image Design-to-React Native Website

Nano Banana + Veo 3 + Lovable Animated Site

Claude + Nano Banana + Kling Animated Website

AntiGravity + Gemini 3.1 Landing Page

Gemini 3.1 Generates an Animated Website in One Go