GoodCase.ai

Loading…

viktoroddy · 3D and motion hero · Skill | GoodCase.ai

GoodCase.aiAI Case Evidence Library

中文EN

Agent Access

Skill · Creator method

viktoroddy · 3D and motion hero

A recurring 3d and motion hero method derived from 6 published cases by viktoroddy.

Verified installable Agent Skill

SKILL.md + .skill

Install into your agent.

npx skills add LearnPrompt/goodcaseai --skill web-3d-motion-hero-by-197q59i --global --copy --yes --full-depth

Download .skill ↓Inspect source ↗

Method skeleton

01Choose one visual protagonist
02Specify scroll or interaction triggers
03Limit first-load assets and mobile fallback

Creator evidence

Methods stay attached to their makers.

6 CasesviktoroddyView creator →

Case evidence

Judge the Skill through finished work.

6 Cases

AI Coding (UI)X@viktoroddy →

Full-Screen Animated Space Travel Hero

A web case by @viktoroddy using React · Vite · TypeScript, including the public result, full prompt, and original source.

Skill · viktoroddy · 3D and motion hero

Prompt

Unlimited Aniamted AI Heros - Here’s the exact prompt I used: Build a full-screen cinematic hero section for a space travel website using React, Vite, TypeScript, Tailwind CSS, and the motion/react (Framer Motion) library. Recreate every detail exactly as described below. 1. Fonts Import Instrument Serif (italic) and Barlow (weights 300, 400, 500, 600) from Google Fonts: @import url(''); Register them in tailwind.config.ts: fontFamily: { heading: ["'Instrument Serif'", "serif"], body: ["'Barlow'", "sans-serif"], } Set --radius: 9999px for fully rounded elements. Use an HSL-based color system where --background: 213 45% 67% (muted sky blue) and --foreground: 0 0% 100% (white). 2. Background Video Use a full-screen <video> element positioned absolute inset-0 with object-cover, z-0, and these attributes: autoPlay loop muted playsInline preload="auto". Video URL: Poster image: /images/hero_bg.jpeg Overlay: A div with absolute inset-0 bg-black/5 z-0 on top of the video. In index.html, add preload hints in <head>: <link rel="preload" as="image" href="/images/hero_bg.jpeg" type="image/jpeg" /> <link rel="preload" as="video" href="" type="video/mp4" /> 3. Liquid Glass CSS Define two utility classes in index.css under @layer components: .liquid-glass (light): .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; } .liquid-glass-strong (heavy, for CTA buttons): .liquid-glass-strong { background: rgba(255, 255, 255, 0.01); background-blend-mode: luminosity; backdrop-filter: blur(50px); -webkit-backdrop-filter: blur(50px); border: none; box-shadow: 4px 4px 4px rgba(0,0,0,0.05), inset 0 1px 1px rgba(255,255,255,0.15); position: relative; overflow: hidden; } Same ::before pseudo-element as .liquid-glass but with 0.5 and 0.2 alpha values instead of 0.45 and 0.15. 4. Navbar Fixed position: fixed top-4 left-0 right-0 z-50, with px-8 lg:px-16. Contains: Left: A logo image (h-12 w-12). Center (desktop only): A liquid-glass rounded-full pill containing nav links: "Home", "Voyages", "Worlds", "Innovation", "Plan Launch" — each styled px-3 py-2 text-sm font-medium text-foreground/90 font-body. Inside pill, last item: A solid white button bg-white text-black rounded-full px-3.5 py-1.5 text-sm font-medium font-body with text "Claim a Spot" and an ArrowUpRight icon (lucide-react, h-4 w-4). 5. Hero Content (centered) Wrapper: flex-1 flex flex-col items-center justify-center text-center px-4 pt-24. a) Badge: A liquid-glass rounded-full px-1 py-1 container with: A solid white pill: bg-white text-black rounded-full px-3 py-1 text-xs font-semibold font-body with text "New". Adjacent text: text-sm text-foreground/90 pr-3 font-body — "Maiden Crewed Voyage to Mars Arrives 2026". mb-2 bottom margin. b) Heading: Use a custom BlurText component (word-by-word blur-in animation from bottom). Props: text="Venture Past Our Sky Across the Universe" className="text-6xl md:text-7xl lg:text-[5.5rem] font-heading italic text-foreground leading-[0.8] max-w-2xl justify-center tracking-[-4px]" delay={100} animateBy="words" direction="bottom" The BlurText component splits text by words, uses IntersectionObserver to trigger, and animates each word with motion.span from {filter: 'blur(10px)', opacity: 0, y: 50} through {filter: 'blur(5px)', opacity: 0.5, y: -5} to {filter: 'blur(0px)', opacity: 1, y: 0} with stepDuration: 0.35 and staggered delay of 100ms per word. c) Subheading: A motion.p with classes mt-1 text-sm md:text-base text-white max-w-2xl font-body font-light leading-tight. Text: "Discover the universe in ways once unimaginable. Our pioneering vessels and breakthrough engineering bring deep-space exploration within reach—secure and extraordinary." Animation: initial={{ filter: 'blur(10px)', opacity: 0, y: 20 }} → animate={{ filter: 'blur(0px)', opacity: 1, y: 0 }}, duration: 0.6, delay: 0.8. d) CTA Buttons: A motion.div with flex items-center gap-6 mt-4, same blur-in animation with delay: 1.1. Primary: liquid-glass-strong rounded-full px-5 py-2.5 text-sm font-medium text-foreground font-body — "Start Your Voyage" + ArrowUpRight icon (h-5 w-5). Secondary: Plain text button — "View Liftoff" + Play icon (h-4 w-4 fill-current). 6. Partners Bar (bottom) Positioned at bottom: flex flex-col items-center gap-4 pb-8. A liquid-glass rounded-full px-3.5 py-1 text-xs font-medium text-white font-body label: "Collaborating with top aerospace pioneers globally". A row of 5 partner names: "Aeon", "Vela", "Apex", "Orbit", "Zeno" — each styled text-2xl md:text-3xl font-heading italic text-white tracking-tight, spaced gap-12 md:gap-16. 7. Z-Index Layering Video + overlay: z-0 All content (navbar, hero, partners): wrapped in a relative z-10 container. Navbar: z-50.

Source heat

Stability

待复测

View case →

AI Coding (UI)X@viktoroddy →

Fable and Opus Same-Prompt Scrolling Page Comparison

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

Skill · viktoroddy · 3D and motion hero

Prompt

❤️‍🔥 Access ALL prompts for Premium AI websites in one click: Build a scroll-driven hero landing page in React + TypeScript + Vite + Tailwind CSS v4. The page has a black background, white text, and 3 main elements: a scroll-scrubbed background video, a floating text overlay that animates out on scroll, a pill-shaped navigation bar, and a glass panel that slides up from below. --- ## VIDEO (Background, scroll-scrubbed) **URL:** `` - Fixed position, full viewport, z-index 0, scaled 1.05 at the wrapper and 1.35 on the video element itself (for parallax mouse effect coverage). - Video is always paused; time is controlled manually via scroll. - Uses HLS.js if the source is `.m3u8`, otherwise native `<video>`. - Scroll-scrubbing logic uses `requestAnimationFrame` loop: - Calculates `scrollProgress = window.scrollY / (document.documentElement.scrollHeight - window.innerHeight)`, clamped 0-1. - `targetTime = progress * (video.duration - 0.05)` - Smooth interpolation: `currentTime += (targetTime - currentTime) * 0.08` - Back-pressure guard: only sets `video.currentTime` when `!video.seeking` and delta > 0.01. - Mouse parallax on the wrapper: on `mousemove`, GSAP tweens `x` and `y` by +/-30px based on normalized mouse position, duration 1.5s, `power2.out` ease. - Shows a loading overlay ("Loading... X%") until `canplay` fires, with buffer progress tracked. --- ## SCROLL FLOAT TEXT **Text:** "Unleash The\nFull Power" (two lines) **Font:** Custom "Dirtyline 36 Days of Type 2022" loaded from `/Dirtyline-36daysoftype-2022.woff2` via `@font-face`. Registered as Tailwind font `font-dirtyline`. - Fixed position, full viewport, flex column, `justify-end`, padding `p-4 md:p-8`, `pointer-events-none`, z-10. - Font size: `clamp(4rem, 15vw, 317px)`, line-height: 0.85, letter-spacing: 0%. - Each character is wrapped in a `<span class="char">` with `display: inline-block`. Words are wrapped in inline-block spans to prevent mid-word breaks. - GSAP ScrollTrigger animation on all `.char` elements: - From: `opacity: 1, yPercent: 0, scaleY: 1, scaleX: 1, transformOrigin: '50% 0%'` - To: `opacity: 0, yPercent: 250, scaleY: 1.2, scaleX: 0.9` - Stagger: 0.05, ease: `power2.inOut`, duration: 1 - ScrollTrigger: trigger `document.body`, start `top top`, end `+=600`, scrub: 1.5 --- ## PILL NAVIGATION - Fixed, centered horizontally, `top: 24px`, z-100. - Font: Manrope (Google Fonts), 600 weight, 14px, uppercase, 0.05em tracking. - Structure: circular logo pill (48x48px, black bg, white SVG 4-petal flower icon) + adjacent rounded pill bar containing nav items. - Nav items: HOME, ABOUT, SERVICES, CONTACT. Each pill has `#f0f0f0` background, black text, `border-radius: 50px`, padding `8px 24px`. - Hover animation (GSAP timeline per pill): - A hidden circle element positioned at bottom expands (`scale: 3`) to fill the pill with black. - Label text slides up (`yPercent: -100`) and a duplicate white label slides in from below (`yPercent: 100 -> 0`). - On leave, reverses. - Entry animation: logo scales from 0 with `back.out(1.7)` ease; nav items width animates from 0 with 0.2s delay. - Logo spins 360 degrees on hover (GSAP `rotation: +=360`, duration 0.2). - HOME click: GSAP `scrollTo: 0`, duration 3s, `power3.inOut`. - ABOUT click: GSAP `scrollTo: document.body.scrollHeight`, duration 3s, `power3.inOut`. - Mobile (<768px): nav items hidden, replaced with hamburger (two white lines that animate to X on click), popover dropdown menu. --- ## GLASS PANEL (Second Section) - Positioned `absolute bottom-0` of a 350vh tall relative container. - Slides up from below viewport using GSAP ScrollTrigger: `y: '100%'` to `y: '0%'`, trigger is the section itself, start `top bottom`, end `bottom bottom`, scrub 1.5, ease `none`. - Mouse parallax: `x/y` +/-20px, plus `rotationY` +/-4deg and `rotationX` +/-4deg based on mouse, `power3.out` ease, 1s duration. - Panel dimensions: `max-w-[1250px]`, `h-[900px]`, `max-h-[85vh]`, `mb-8`, `perspective: 1000px`. - Glass effect: `background-color: rgba(0, 0, 0, 0.16)`, `backdrop-filter: blur(160px)`, `border: 1px solid rgba(255, 255, 255, 0.1)`, `border-radius: 1.5rem`, `transformStyle: preserve-3d`, `willChange: transform`. - Content inside: - Centered text: "About Us" in italic serif (Instrument Serif from Google Fonts), `text-white/70`, `text-base md:text-lg`. - Large heading (Instrument Serif): "We transform sterile concrete into thriving *urban* jungles. Our innovative designs bring wild *nature* back to modern cities. Experience the *bloom*" -- italic words are `<span class="italic">`. Font size `text-4xl md:text-6xl lg:text-[96px]`, leading `1.1 / lg:92.6px`, tracking-tight, max-w-[1000px]. - Bottom marquee: brands VOICEFLOW, ZENDESK, PENDO, GLIDE, CANVA repeated 4x, `border-t border-white/10`, infinite horizontal scroll animation (`translateX(-50%)` over 20s linear), `opacity-40 hover:opacity-100`, uppercase, semibold, `text-sm`, `tracking-widest`, `px-8`. --- ## GLOBAL CSS / FONTS - Google Fonts: `Manrope` (400-700) and `Instrument Serif` (normal + italic). - Custom font: `Dirtyline36Daysoftype2022` from `/Dirtyline-36daysoftype-2022.woff2`. - Tailwind v4 `@theme` block defines `--font-sans`, `--font-serif`, `--font-dirtyline`, and `--animate-marquee` keyframes. - Body: `background-color: black; color: white;` --- ## PAGE STRUCTURE (App.tsx) ``` <ScrollVideo src={VIDEO_SRC} /> (fixed fullscreen) <PillNav /> (fixed top center) <div style="position: relative; height: 350vh"> <ScrollFloat>Unleash The\nFull Power</ScrollFloat> (fixed overlay) <GlassPanel /> (absolute bottom-0) </div> ``` --- ## DEPENDENCIES - `react`, `react-dom` (v19) - `gsap` (v3.12+) with ScrollTrigger and ScrollToPlugin - `hls.js` (v1.5+) - `tailwindcss` v4 with `@tailwindcss/vite` - `lucide-react` - `motion` (v12, installed but not actively used) - `react-router-dom` (v7, installed but not actively used)

Source heat

Stability

待复测

View case →

AI Coding (UI)X@viktoroddy →

Claude Mythos: Lithos Geology Brand Hero

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

Skill · viktoroddy · 3D and motion hero

Prompt

❤️‍🔥Access ALL prompts for stunning animated websites in one click: http:// Build a full-screen, dark-themed hero section for a geology brand called **Lithos**, using **React 18 + TypeScript + Vite + Tailwind CSS** and **lucide-react** for icons. The signature feature is a **cursor-following spotlight that reveals a second image** through a soft circular mask on top of a base image. Match every detail below exactly. ### Fonts Add this to the top of `src/index.css`, then `@tailwind base/components/utilities`: ```css @import url(''); * { font-family: 'Inter', sans-serif; } .font-playfair { font-family: 'Playfair Display', serif; } ``` - Body/UI font: **Inter**. - Display/wordmark accent: **Playfair Display, italic**. ### Asset URLs (use these exactly) - Base image (`BG_IMAGE_1`): `` - Reveal image (`BG_IMAGE_2`): `` ### Layout & structure Root wrapper: `min-h-screen bg-white tracking-[-0.02em]`, inline `fontFamily: "'Inter', sans-serif"`. **Section** (`<section>`): `relative w-full overflow-hidden h-screen bg-black`, inline `style={{ height: '100dvh' }}`. Layers, by z-index: 1. **Base image** (`z-10`): `absolute inset-0 bg-center bg-cover bg-no-repeat`, background = `BG_IMAGE_1`. 2. **Reveal layer** (`z-30`): a `RevealLayer` component (see below) showing `BG_IMAGE_2`. 3. **Heading** (`z-50`): `absolute top-[14%] left-0 right-0 flex flex-col items-center text-center px-5 pointer-events-none`. An `<h1>` with `text-white leading-[0.95]` containing two block spans: - Line 1: `block font-playfair italic font-normal text-5xl sm:text-7xl md:text-8xl`, inline `letterSpacing: '-0.05em'`, text **"Layers hold"**. - Line 2: `block font-normal text-5xl sm:text-7xl md:text-8xl -mt-1`, inline `letterSpacing: '-0.08em'`, text **"tales of time"**. 4. **Bottom-left paragraph** (`z-50`): `hidden sm:block absolute bottom-14 left-10 md:left-14 max-w-[260px]`. `<p className="text-sm text-white/80 leading-relaxed">` — "Every layer of sediment records a chapter of our planet, from ancient seabeds to drifting ash, layered across millions of years beneath us." 5. **Bottom-right block** (`z-50`): `absolute bottom-10 sm:bottom-24 left-5 right-5 sm:left-auto sm:right-10 md:right-14 max-w-full sm:max-w-[260px] flex flex-col items-start gap-4 sm:gap-5`. Contains a `<p className="text-xs sm:text-sm text-white/80 leading-relaxed">` — "Our interactive maps let you peel back the crust to trace how stones, fossils, and deep time combine to shape the ground beneath your feet." — and a **Start Digging** button: `bg-[#e8702a] hover:bg-[#d2611f] text-white text-sm font-medium px-7 py-3 rounded-full transition-all hover:scale-[1.03] active:scale-95 hover:shadow-lg hover:shadow-[#e8702a]/30`. ### The cursor spotlight reveal (core mechanic) In the parent, define `const SPOTLIGHT_R = 260;` and track the mouse with smoothing: - Refs: `mouse` (raw), `smooth` (eased), `rafRef`; state `cursorPos` (init `{x:-999,y:-999}`). - `mousemove` listener stores raw `e.clientX/clientY`. - A `requestAnimationFrame` loop lerps: `smooth.x += (mouse.x - smooth.x) * 0.1` (same for y), then `setCursorPos`. Clean up listener + cancel RAF on unmount. `RevealLayer({ image, cursorX, cursorY })`: - Holds a hidden `<canvas>` (`absolute inset-0 pointer-events-none`, `style={{display:'none'}}`) sized to `window.innerWidth/Height` on mount + resize. - A reveal `<div>` (`absolute inset-0 bg-center bg-cover bg-no-repeat z-30 pointer-events-none`) with the reveal image as background. - On every render: clear canvas, build a **radial gradient** at `(cursorX, cursorY)` from radius 0 → `SPOTLIGHT_R` with stops: `0 → rgba(255,255,255,1)`, `0.4 → 1`, `0.6 → 0.75`, `0.75 → 0.4`, `0.88 → 0.12`, `1 → 0`. Fill an arc of radius `SPOTLIGHT_R` with it. Then `canvas.toDataURL()` and apply it as `maskImage`/`webkitMaskImage` on the reveal div with `maskSize: '100% 100%'`. This makes the second image visible only inside the soft glowing circle that trails the cursor. ### Navigation (fixed, over hero) `<nav className="fixed top-0 left-0 right-0 z-[100] flex items-center justify-between p-4 sm:p-5">`: - **Left**: an inline SVG logo (26×26, viewBox `0 0 256 256`, `fill="#ffffff"`, path `M 256 256 L 128 256 L 0 128 L 128 128 Z M 256 128 L 128 128 L 0 0 L 128 0 Z`) + wordmark `<span className="text-white text-2xl font-playfair italic">Lithos</span>`. - **Center pill** (`hidden md:flex absolute left-1/2 -translate-x-1/2 bg-white/20 backdrop-blur-md border border-white/30 rounded-full px-2 py-2 items-center gap-1`): buttons **Course** (active: full white text), then **Field Guides, Geology, Plans, Live Tour** (`text-white/80 ... hover:bg-white/20 hover:text-white transition-colors`, `px-4 py-1.5 rounded-full text-sm font-medium`). - **Right (desktop)**: `hidden md:block bg-white text-gray-900 text-sm font-semibold px-6 py-2.5 rounded-full hover:bg-gray-100` — **Sign Up**. ### Animations (premium, on load) Add to `index.css`: ```css @keyframes heroReveal { 0%{opacity:0;transform:translateY(28px);filter:blur(12px)} 100%{opacity:1;transform:translateY(0);filter:blur(0)} } @keyframes heroFadeUp { 0%{opacity:0;transform:translateY(20px)} 100%{opacity:1;transform:translateY(0)} } @keyframes heroZoom { 0%{transform:scale(1.12)} 100%{transform:scale(1)} } .hero-anim { opacity:0; animation-fill-mode:forwards; animation-timing-function:cubic-bezier(0.16,1,0.3,1); } .hero-reveal { animation-name:heroReveal; animation-duration:1.1s; } .hero-fade { animation-name:heroFadeUp; animation-duration:1s; } .hero-zoom { animation:heroZoom 1.8s cubic-bezier(0.16,1,0.3,1) forwards; } @media (prefers-reduced-motion: reduce){ .hero-anim,.hero-zoom{ animation:none; opacity:1; } } ``` Apply: - Base image div → add `hero-zoom` (slow Ken Burns zoom-out). - Heading line 1 → `hero-anim hero-reveal`, inline `animationDelay: '0.25s'`; line 2 → same with `'0.42s'` (blur-rise, staggered). - Bottom-left paragraph wrapper → `hero-anim hero-fade`, `animationDelay: '0.7s'`. - Bottom-right wrapper → `hero-anim hero-fade`, `animationDelay: '0.85s'`. ### Responsiveness - Heading scales `text-5xl` → `sm:text-7xl` → `md:text-8xl`. - Center nav pill and desktop Sign Up are `hidden` below `md`; the mobile hamburger is `md:hidden`. - Bottom-left paragraph is `hidden sm:block`; bottom-right block is full-width on mobile (`left-5 right-5`) and right-anchored from `sm`. - Use `100dvh` so mobile browser chrome doesn't clip the section.

Source heat

Stability

待复测

View case →

AI Coding (UI)X@viktoroddy →

Grok Imagine + Grok Build：Veldara Hero

A web case by @viktoroddy using Grok Imagine · Grok Build, including the public result, full prompt, and original source.

Skill · viktoroddy · 3D and motion hero

Prompt

❤️‍🔥 Access Full prompt for stunning animated websites in one click: Create a full-viewport hero section for a product called "Veldara" using React, Tailwind CSS, and Lucide React icons. The page should be a single-screen landing with no scrolling. > **Video Background:** > - Use this exact video URL, do NOT replace it with any other URL: `` > - The video wrapper is `position: absolute; inset: 0; z-index: 0` (NOT negative z-index, NOT fixed) placed as the first child inside the root container > - The root container (`relative h-screen overflow-hidden`) must have NO background-color set (transparent) so the video shows through > - The `<video>` element has: `muted`, `loop`, `playsInline`, `autoPlay`, `preload="auto"`, class `absolute inset-0 w-full h-full object-cover` > - Do NOT add `crossOrigin` attribute on the video (it can block playback on some CDNs) > - All content layers must use positive z-index values above 0 (particles z-[3], nav z-50, hero content z-[2]) > - CRITICAL: Do NOT use `z-index: -1` or `position: fixed` for the video -- it must be inside the stacking context, not behind it **Floating Particles:** - Render a full-screen canvas (fixed, `pointer-events-none`, `z-index: 3`) with animated floating particles - Particle count: `(canvas.width * canvas.height) / 12000` - Each particle: random size 0.5-2px, white with random opacity 0.2-0.8, drifting at velocity 0.3px/frame in random directions - Particles wrap around edges **Navigation Bar (fixed, top, z-50):** - Left side: Bold white logo text "veldara" (text-lg on mobile, text-xl on desktop, tracking-tight), followed by hidden-on-mobile nav links ("Guides", "Journal") in text-sm text-gray-300 with hover:text-white transitions - Right side: Three inline SVG social icons (GitHub, Discord, Twitter/X) in text-gray-300 with hover:text-white transitions, each 20x20px - Padding: px-4 sm:px-6 md:px-10, py-4 sm:py-5 - Gap between logo and links: gap-4 sm:gap-8 - Gap between social icons: gap-3 sm:gap-4 **Hero Content (centered, bottom-aligned within viewport):** - Container: relative z-[2], full height, flex column - A gradient overlay on the section: `bg-gradient-to-t from-black/60 via-transparent to-transparent` - Content is flex-col, items-center, justify-end, with padding-bottom 6rem (sm: 7rem) - Small label: "Our Purpose:" in text-sm md:text-base, text-gray-400, tracking-wide, margin-bottom 0.75rem sm:1rem - Main heading: "Instantly craft immersive 3D worlds on the web." - Font sizes: text-2xl sm:text-3xl md:text-5xl lg:text-6xl, font-semibold, leading-tight, max-w-3xl, text-white - The words "3D worlds" have an inline underline effect: a positioned span with `absolute bottom-1 left-0 w-full h-[10px] bg-[#2C5C88] rounded-sm` behind the text (text is `position: relative` above it) - CTA group below heading (margin-top 2rem sm:2.5rem), flex-col sm:flex-row, gap-3 sm:gap-4: 1. Terminal-style install box: `bg-[#1a1a1a]`, `border border-gray-700/50`, rounded-lg, px-6 sm:px-8, py-3.5 sm:py-4, containing a `>` prompt character in `text-[#2C5C88] font-mono text-sm` and code text "npm i @veldara/core" in `text-xs sm:text-sm text-gray-200 font-mono` 2. "Get Started" button with right arrow: `bg-[#2C5C88] hover:bg-[#3a7aad]`, text-white, font-medium, rounded-lg, px-8, py-3.5 sm:py-4, text-sm, with transition-colors **Scroll Indicator:** - At the bottom of the viewport (pb-8), centered, a Lucide `ChevronDown` icon (w-6 h-6, text-gray-500) with Tailwind's `animate-bounce` class **Font:** - Google Fonts "Inter" (weights 400, 500, 600, 700), loaded via preconnect in the HTML head - Body font-family: `'Inter', sans-serif` **Global Styles:** - `html, body`: overflow-x hidden - Body background: `#010101`, color: white - Universal reset: margin 0, padding 0, box-sizing border-box **Page Structure:** - Root container: `relative h-screen overflow-hidden` (prevents any scrolling) - No additional sections beyond the hero **Color Palette:** - Primary accent: `#2C5C88` (steel blue) - Hover accent: `#3a7aad` - Background: `#010101` / `#0a0a0a` - Card/terminal bg: `#1a1a1a` - Border: `gray-700/50` - Text: white, gray-200, gray-300, gray-400, gray-500 **Tech Stack:** - React 18 with TypeScript - Vite - Tailwind CSS 3 - Lucide React (for ChevronDown icon) - No other dependencies needed

Source heat

Stability

待复测

View case →

AI Coding (UI)X@viktoroddy →

Nano Banana + Kling + Claude Cinematic Hero

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

Skill · viktoroddy · 3D and motion hero

Prompt

Access ALL prompts for stunning animated websites in one click: Prompt: Cinematic Hero Section with Looping Video Background Create a fullscreen single-page hero section using React + Vite + Tailwind CSS + TypeScript with the following specifications: Fonts: Display text (headings, logo): Instrument Serif Body text (navigation, descriptions): Inter Import both fonts in /src/styles/fonts.css Video Background: URL: Position: top: '300px' with inset: 'auto 0 0 0' Implement custom fade-in/fade-out loop logic using React useEffect and useRef: Use requestAnimationFrame to continuously monitor currentTime and duration Fade in over 0.5s at the start (opacity 0 to 1) Fade out over 0.5s before the end (opacity 1 to 0) On ended event: set opacity to 0, wait 100ms, reset currentTime = 0, then play() again This creates a seamless manual loop with smooth fade transitions Add gradient overlays: absolute inset-0 bg-gradient-to-b from-background via-transparent to-background positioned over the video Navigation Bar: Logo: "Aethera®" (with registered trademark symbol as superscript) Logo styling: text-3xl, tracking-tight, Instrument Serif, color #000000 Menu items: Home (color #000000), Studio, About, Journal, Reach Us (all others #6F6F6F) Menu items: text-sm with transition-colors CTA button: "Begin Journey", rounded-full, px-6 py-2.5, text-sm, black background (#000000), white text, hover scale 1.03 Layout: flex justify-between, px-8 py-6, max-w-7xl mx-auto Hero Section: Positioning: paddingTop: 'calc(8rem - 75px)', pb-40 Layout: centered (flex flex-col items-center justify-center text-center), px-6 Headline: Text: "Beyond silence, we build the eternal." Styling: text-5xl sm:text-7xl md:text-8xl, max-w-7xl, font-normal Font: Instrument Serif Line height: 0.95 Letter spacing: -2.46px Color: #000000 for main text, #6F6F6F for italic emphasized words ("silence," and "the eternal.") Animation: animate-fade-rise Description: Text: "Building platforms for brilliant minds, fearless makers, and thoughtful souls. Through the noise, we craft digital havens for deep work and pure flows." Styling: text-base sm:text-lg, max-w-2xl, mt-8, leading-relaxed Color: #6F6F6F Animation: animate-fade-rise-delay Hero CTA Button: Text: "Begin Journey" Styling: rounded-full, px-14 py-5, text-base, mt-12 Colors: black background (#000000), white text (#FFFFFF) Hover: scale 1.03 Animation: animate-fade-rise-delay-2 Colors: Background: white (#FFFFFF) Headlines/logos/buttons: black (#000000) Descriptions/menu items: gray (#6F6F6F) Button text: white (#FFFFFF) Animations (in /src/styles/theme.css): fade-rise: opacity 0 to 1, translateY 20px to 0, duration 0.8s, ease-out fade-rise-delay: same as fade-rise but with 0.2s delay fade-rise-delay-2: same as fade-rise but with 0.4s delay Layout Structure: Container: relative min-h-screen w-full overflow-hidden Background video layer (z-0) Gradient overlay on video Navigation bar (z-10) Hero section (z-10) All elements should be responsive and maintain the glassmorphic aesthetic with the specified padding, positioning, and smooth animations.

Source heat

Stability

待复测

View case →

AI Coding (UI)X / 𝕏@viktoroddy →

Responsive 3D Character Carousel UI

A complete React implementation brief for a full-screen 3D figurine carousel, including assets, responsive behavior, animation timing, layout, and styling.

Skill · viktoroddy · 3D and motion hero

Prompt

Access ALL prompts for stunning animated websites in one click: http://motionsites.ai Build a single full-viewport hero section in React + TypeScript + Vite + Tailwind CSS, using `lucide-react` for icons. The component is a character-figurine carousel called "TOONHUB". **Fonts (load in `index.html` head):** ```html <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link href="https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" /> ``` Body font: `'Inter', sans-serif`. Display font (huge ghost text + bottom-right link): `'Anton', sans-serif`. **Image data (4 items, exact URLs and colors):** ```ts const IMAGES = [ { src: 'https://fifth-gentle-45902158.figma.site/_components/v2/4de492f6d9cf8244ad5293233e5c6f52407d42fc/1.02464a56.png', bg: '#F4845F', panel: '#F79B7F' }, { src: 'https://fifth-gentle-45902158.figma.site/_components/v2/4de492f6d9cf8244ad5293233e5c6f52407d42fc/2.b977faab.png', bg: '#6BBF7A', panel: '#85CC92' }, { src: 'https://fifth-gentle-45902158.figma.site/_components/v2/4de492f6d9cf8244ad5293233e5c6f52407d42fc/3.4df853b4.png', bg: '#E882B4', panel: '#ED9DC4' }, { src: 'https://fifth-gentle-45902158.figma.site/_components/v2/4de492f6d9cf8244ad5293233e5c6f52407d42fc/4.4457fbce.png', bg: '#6EB5FF', panel: '#8DC4FF' }, ]; ``` Preload all 4 images on mount via `new Image()`. **State & logic:** - `activeIndex` (0–3), `isAnimating` boolean lock, `isMobile` (`window.innerWidth < 640`, updated on resize). - `navigate('next' | 'prev')`: ignore if animating; set `isAnimating=true`; bump `activeIndex` `(prev+1)%4` or `(prev+3)%4`; release lock after `650ms`. - Roles derived from activeIndex: `center=activeIndex`, `left=(activeIndex+3)%4`, `right=(activeIndex+1)%4`, `back=(activeIndex+2)%4`. **Layout structure:** Outer `<div>` has `backgroundColor: IMAGES[activeIndex].bg`, transition `background-color 650ms cubic-bezier(0.4,0,0.2,1)`, `fontFamily: 'Inter, sans-serif'`, `relative w-full overflow-hidden`. Inside, a `relative w-full` div with `height: 100vh; overflow: hidden`. 1. **Grain overlay** (`absolute inset-0 pointer-events-none`, zIndex 50): SVG fractalNoise data URI, `baseFrequency=0.9`, `numOctaves=4`, opacity 0.08 inside SVG, container `opacity: 0.4`, `backgroundSize: 200px 200px`, repeat. 2. **Giant ghost text "3D SHAPE"** (`absolute inset-x-0 flex items-center justify-center pointer-events-none select-none`, zIndex 2, `top: 18%`): font Anton, `fontSize: clamp(90px, 28vw, 380px)`, weight 900, color white, opacity 1, lineHeight 1, uppercase, letterSpacing `-0.02em`, whiteSpace nowrap. 3. **Top-left brand label "TOONHUB"** (`absolute top-6 left-4 sm:left-8`, zIndex 60): `text-xs font-semibold uppercase`, white, opacity 0.9, letterSpacing `0.18em`. 4. **Carousel** (`absolute inset-0`, zIndex 3): map all 4 IMAGES; each item is `position:absolute`, `aspectRatio: '0.6 / 1'`, with role-based styles below. Inside, an `<img>` `width:100%; height:100%; objectFit:contain; objectPosition:bottom center; draggable=false`. Per-role style: - **center**: `transform: translateX(-50%) scale(${isMobile?1.25:1.68})`, no blur, opacity 1, zIndex 20, `left:50%`, `height: isMobile?'60%':'92%'`, `bottom: isMobile?'22%':0`. - **left**: `translateX(-50%) scale(1)`, blur 2px, opacity 0.85, zIndex 10, `left: isMobile?'20%':'30%'`, `height: isMobile?'16%':'28%'`, `bottom: isMobile?'32%':'12%'`. - **right**: same as left but `left: isMobile?'80%':'70%'`. - **back**: `translateX(-50%) scale(1)`, blur 4px, opacity 1, zIndex 5, `left:50%`, `height: isMobile?'13%':'22%'`, `bottom: isMobile?'32%':'12%'`. Transition on each item: `transform 650ms cubic-bezier(0.4,0,0.2,1), filter 650ms ..., opacity 650ms ..., left 650ms ...`. `willChange: transform, filter, opacity`. 5. **Bottom-left text + nav buttons** (`absolute bottom-6 left-4 sm:bottom-20 sm:left-24`, zIndex 60, `maxWidth:320px`): - `<p>` "TOONHUB FIGURINES" — bold uppercase, tracking-widest, `mb-2 sm:mb-3 text-base sm:text-[22px]`, white, opacity 0.95, letterSpacing `0.02em`. - `<p>` (hidden on mobile, `hidden sm:block`): "The artwork is stunning, shipped fully prepared. The finish is a vision, the 3D craft is flawless. Many thanks! Wishing you the win. Order now." — `text-xs sm:text-sm`, white, opacity 0.85, lineHeight 1.6, `mb-4 sm:mb-5`. - Two circular buttons (`w-12 h-12 sm:w-16 sm:h-16`, transparent bg, 2px white border, white icon): `ArrowLeft` and `ArrowRight` from lucide-react, size 26, strokeWidth 2.25. On hover: scale 1.08 + bg `rgba(255,255,255,0.12)`. Transition `transform 150ms, background-color 150ms`. Click triggers `navigate('prev')` / `navigate('next')`. 6. **Bottom-right link "DISCOVER IT"** (`absolute bottom-6 right-4 sm:bottom-20 sm:right-10`, zIndex 60): `<a>` flex items-center, font Anton, `fontSize: clamp(20px, 4vw, 56px)`, weight 400, white, opacity 0.95→1 on hover (200ms), letterSpacing `-0.02em`, lineHeight 1, uppercase, no underline. Followed by `ArrowRight` (`w-5 h-5 sm:w-8 sm:h-8`, strokeWidth 2.25). **Behavior summary:** clicking arrows rotates roles; background color, image positions, scales, blurs, and opacities all crossfade simultaneously over 650ms with `cubic-bezier(0.4,0,0.2,1)`. The character images sit at the bottom of the screen overlapping the giant "3D SHAPE" text behind them.

Source heat

Stability

View case →