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