Start with the work. Trace it back to the maker and method.

Weekend experimentation turned into something fun. One single prompt — and @claudeai + @MCP360AI marketplace MCP generated an entire webpage with images. Here’s the exact prompt I used: "Create a website for a GYM with images using mcp360 imagegen in dark theme." MCP360’s next update coming soon. Stay tuned. 🚀

Tried Sonnet 5(high) on cursor Prompt: "Build a production-quality, cinematic FIFA World Cup website with realistic visuals, match schedules, immersive animations, and premium UI/UX" Here’s what happened 👇 On the first try It made a decent dashboard with matches, standings and fixtures… but it’s nothing fancy yet. Image generation didn’t work (as expected), so I told it to grab whatever images it could. Still testing how good this new model actually is.What should I test next with Sonnet 5? Drop your ideas👇

Claude Sonnet 5 has an interesting frontend design taste. And I like it. Built with this just one prompt: > create an amazing looking personal website where i can write about myself, show my projects, and some other stuff. use dummy data.

WTF!! this was one shotted by Claude Opus 4.7 🔥 Exact single prompt i used: "Build a landing page for a fictional espresso subscription service. Don't ask me questions. Make every typography, color, and spacing decision yourself. Single HTML file. I want to see your taste."

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 🛒

How I built with Claude 👇 1. Prompt: "Build a storytelling website where each scroll section reveals a new chapter with fluid color transitions" 2. Use Three.js for the painted texture background that reacts to cursor 3. Prompt: "Add GSAP ScrollTrigger so each section animates in as a cinematic scene" 4. Use Lenis.js for that buttery smooth scroll that premium sites have

Claude Opus 5 makes a complete landing page for a fictional AI Prompt: "Create a complete landing page for a fictional next-generation AI model called Dreamer. Use a minimalist design with no gradients, strong typography, subtle animations, benchmark cards, pricing, documentation previews, and a responsive mobile layout. Make it look human-designed rather than like a generic AI website."

I rebuilt my landing page in one day using Claude Design, Codex, Gemini, and OpenClaw together. a 10-step process where each tool handled a different part of the job. here's everything I did: 1. generate range fast here's the guiding principle: diverge first, converge last. first I wrote one prompt to generate 5 different landing page aesthetics. each one is a detailed prompt I could use to one-shot a sample landing page. this gives me 5 UI directions in parallel. that step matters because it kills blank-canvas mode immediately. credit to @cloudxdev for inspo of the prompt here: You are a world-class frontend designer and creative director with 15 years of experience crafting award-winning digital experiences for high-profile tech startups. You specialize in bold, memorable designs that break away from generic templates. Your work has been featured in Awwwards, CSS Design Awards, and The FWA. You're helping me generate 5 separate prompts for 5 radically different landing page directions for "<company_name>" - <company_description>. The company targets <target_audience>. They differentiate through <key_differentiators>. The landing page will be the primary conversion funnel for leads. Avoid the "AI slop" aesthetic at all costs: NO purple/blue gradients on white backgrounds, NO generic fonts (Inter, Roboto, Arial, system-ui), NO predictable hero-CTA-features-testimonials templates, NO generic geometric shapes or abstract blobs, NO stock-looking imagery or clichéd visuals. Generate 5 radically different aesthetic approaches and commit fully to each one: Option A, Option B, Option C, Option D, Option E. The 5 options must feel meaningfully different from each other in art direction, typography, color usage, layout philosophy, and interaction style. Do not give me 5 variations of the same landing page. For each option, create a fully self-contained prompt that I can paste into another model to generate the landing page. Each prompt should lock in one aesthetic direction only and should not mention the other 4 options. Before the prompt for each option, briefly outline: which aesthetic direction you're choosing and why, the specific font pairing, the color palette, the hero hook concept, and one unique interactive element you'll implement. Each generated prompt should instruct the model to build these sections with creative interpretation: 1. Hero Section - a hook that creates immediate intrigue, an interactive element that demonstrates capability, a clear value proposition in ≤12 words, primary CTA: "<primary_cta>", and trust signals (logos, security badges). 2. Problem/Solution Narrative - tell a story, don't list features, use scroll-triggered reveals for dramatic effect, and include real-world scenario visualization. 3. Product Showcase - interactive demo preview or animated mockup, show the product in action visually, and include technical credibility indicators. 4. Social Proof - testimonials from target personas, metrics that matter to <target_audience>, and a customer grid with hover states. 5. Technical Differentiators - clean comparison or feature grid, integration/API preview (if applicable), and security & compliance badges. 6. Conversion Section - secondary CTA with urgency, quick form (Name, Email, Company), and alternative action: "<secondary_cta>". 7. Footer - minimal, sophisticated, essential links only, and newsletter capture. Each generated prompt should also tell the model to output a single, complete HTML file with embedded CSS and JavaScript that opens immediately in any browser with no dependencies, uses realistic placeholder content instead of Lorem ipsum, and feels production-ready. Technical requirements to include in each generated prompt: mobile-responsive with fluid typography and adaptive layouts, smooth scroll behavior, page load animations with staggered reveals (use animation-delay), Intersection Observer for scroll-triggered effects, micro-interactions on hover states, CSS custom properties for theming, semantic HTML5 structure, performance-optimized with no heavy libraries, and load Google Fonts for typography. Motion design requirements to include in each generated prompt: Page Load: orchestrated reveal sequence (0ms → 200ms → 400ms stagger). Scroll: fade-in-up with subtle parallax on key visuals. Hover: scale transforms, color transitions, underline animations. Interactive: cursor-following effects, magnetic buttons. Background: subtle ambient motion (floating particles, gradient shifts). Color guidance to include in each generated prompt: if you choose a dark theme, use a deep background in the #0a0a0f to #12121a range, pure white (#ffffff) for headlines, muted (#a0a0a0) for body text, and ONE bold accent color used sparingly such as electric cyan, hot coral, or acid green. If you choose a light theme, use an off-white or cream background, deep charcoal text, and one bold unexpected accent such as terracotta, forest, or sapphire. Typography guidance to include in each generated prompt: pick a distinctive combination with headlines in a display serif (Playfair Display) or geometric sans (Clash Display, Cabinet Grotesk), body text should be readable but still have character (Source Serif Pro, Satoshi), use JetBrains Mono or IBM Plex Mono for technical elements, and avoid at all costs: Inter, Roboto, Arial, SF Pro, Open Sans. Output format: return exactly 5 sections labeled Option A through Option E. For each option, include: (1) a short name for the aesthetic, (2) a short explanation of the direction, and (3) the full prompt wrapped in a code block. Do not generate any HTML yourself. Only generate the 5 prompts. here's what the prompt actually returned for me: A - Swiss Brutalist: cream + ink with an acid green accent, magnetic grid that snaps your cursor to data points B - Terminal Luxury: deep space + cyan, a real command-line input that simulates list generation C - Editorial Authority: forest + paper + coral, parallax "ink bleed" transitions between sections D - Bauhaus Engineering: navy + hot coral, interactive blueprint overlay showing the AI logic E - Kinetic Minimalism: midnight + cobalt, liquid-metal cursor trails that react to page velocity five real directions, all with opinions. Time: 2 min 2. run the 5 prompts and pick a winner so here's the best way to "vibe code" 5 landing pages for free: 1. open 5 tabs of aistudio(.)google(.)com/apps 2. paste in your 5 prompts from above 3. watch them run most people don't know this but gemini 3.1 pro has by far the best visual taste, better than opus 4.7 (yes), and gpt 5.5 (lol) this step is where the aesthetics stop being abstract directions and turn into real UI you can feel. once you see all 5 rendered out, it gets pretty obvious which one fits your idea best. then I simply picked the winner. one funny side note: my first landing version is I used a very basic version from the winner I picked here. it's literally a hero with one testimonial below. and it got me my first 20 customers. worth remembering. a rough page with the right message beats a beautiful page that says nothing. and maybe that's all you need for now. Time: 10 min 3. take the winning direction into Claude Design from here export and upload the best design into Claude Design. Claude Design has a dedicated "set up your design system" option - use that. drop your winner html from step 2 and it'll extract colors, fonts, components, and a reusable system you can apply to the rest of your site. Time: 2 min 4. do the research pre-work for copy while claude design is cooking, I started on the copy by spawning 11 agents using `claude -p` to analyze 10 competitor landing pages and my ICP. this was pre-work for copy. before you write a page you need to know what your buyers want and what everyone else is claiming. all of it is useful context to feed into the next step. Time: 5 min 5. turn the research into positioning then I gave zoe (my openclaw) all of that and she combined it with everything about our business (meeting notes, emails, CRM) she generated a 10-section landing page breakdown: what the hero needed to claim, what objections needed to get handled early, what proof needed to show up above the fold, and what the visitor should believe by the time they hit the CTA. one of the biggest unlocks in the whole process. the breakdown it gave back: 1. hero - one-line value prop + chatbox 2. social proof - press logos + testimonials 3. how it works - 3 steps, story → match → pitch 4. features - 4 rows, each paired with the buyer objection it answers 5. case studies - real press coverage 6. pricing 7. FAQ - remaining objections 8. comparison - us vs legacy vs DIY vs hiring 9. founder letter - why I built it 10. final CTA - chatbox reprise Time: 10 min 6. generate 5 variants for each section now claude design has finished the design system from step 3. I dumped the 10-section landing page breakdown into claude design and asked it to generate 5 variants for each section. this is where the workflow really clicked. instead of comparing 5 whole landing pages, I was comparing 5 heroes, 5 proof sections, 5 workflow sections, 5 CTA blocks. same diverge-first principle as step 1, applied at the section level. you're not deciding "which page is best" - you're deciding "which hero is best." way less cognitive load, way better outcome. Time: 1 min (plus 20 min waiting) 7. pick your favorites and stitch them together I went through each section, picked my favorite variant, gave feedback where it needed sharpening, and had claude design stitch everything into one cohesive page. my prompt was something like "ABDEADABC" lol. this is the converge half. diverge in step 6, converge here. Time: 5 min 8. split animation into its own lane while the structure was cooking, I opened a separate session just for the 4 animations. the models can't see the animations like they can see the page, so this requires more back and forth. Time: 20 min 9. export, implement, and lock the design system once the design was ready, I exported it as HTML and used /goal in codex with playwright to implement it end to end. this part still feels mildly illegal. usually there's a huge translation tax between design and implementation. now a lot of that just disappears with /goal. quick bonus for your codex agent: google launched a DESIGN .md recently. use it to lock the design system so future agents don't drift away from the visual language you just implemented. Time: 2 min (+1 hr waiting...) 10. the longest part was still the copy while codex is cooking it's time to finalize the copy. at this point the page already had a rough draft from the positioning work above. but it was still AI copy. directionally right. too safe. too generic. the biggest copy lesson applied in this whole rewrite: say the damn thing. stop writing these: - "unlock the full potential of your outreach" - "the all-in-one platform for modern sales teams" if your page reads like this you are begging your customers to not read it. say what you actually mean. name the competitor. say the feature for what it does. name competitor's absurdity. for example, I changed claude's copy of the eyebrow above our pricing section: before: "transparent pricing" after: "why does a media database still cost $15,000 a year?" that one line does more work than three paragraphs of "unlock" copy. it names the problem, names the competitor, and anchors pricing, which makes our price the obvious answer before we've even shown it. this is the part still needs human judgment. Time: 4 hours the takeaway total time: 6 hours 14 minutes. of that, 4 hours was copy. the design and build was under 2. does this win a design award? obviously no. does it convert strangers? absolutely yes. I'm optimizing for a $1M ARR SaaS, not a designer job. different game here. and don't take my word for it - open the top 20 sites on trustmrr .com leaderboard, none of them win design awards, all of them make money. and here's where we are at now: AI gets you a top 10% on design fast, and you can layer that with a top 10% copy, and a top 10% product. then you have a strong, high-converting page - all without hiring a designer or a developer or a copywriter. best part is all this is just iteration one. from here I'm wiring page analytics back into openclaw so zoe can run A/B tests automatically on hero, h1, h2, CTAs and self-improve the page. so 6 hours to ship the page. then 6 months to figure out what it should say. AI never changed the hard part. it just took away the excuses.

I am building an animated loader and icon library as my second project. This weekend I tried building a landing page for this. But I made an experiment to build it completely with claude code : Sonnet 4.6 I am quite happy what it has built at the very first shot. Here is the exact prompt I have used > I want you to create a landing page for this library. 1. hero section 2. features with CTA buttons and any section if u think can be important take all the components for example Heading.tsx paragraph.tsx from components folders Use `max-w-5xl`, Colours : white and black based (use neutral, stone and white from tailwindcss I want to use specifi pattern to use in the landing page to make it a thoughtfl design inspired by tailwindplus homepage Here is the grid patter use it purposefully, with a good taste as a pro design engineer <div class="relative grid min-h-screen grid-cols-[1fr_2.5rem_auto_2.5rem_1fr] grid-rows-[1fr_1px_auto_1px_1fr] bg-white [--pattern-fg:var(--color-gray-950)]/5 dark:bg-gray-950 dark:[--pattern-fg:var(--color-white)]/10"> <div class="col-start-3 row-start-3 flex max-w-lg flex-col bg-gray-100 p-2 dark:bg-white/10"> <div class="rounded-xl bg-white p-10 text-sm/7 text-gray-700 dark:bg-gray-950 dark:text-gray-300"> <img src="/img/logo.svg" class="mb-11.5 h-6 dark:hidden" alt="Tailwind Play" /> <img src="/img/logo-dark.svg" class="mb-11.5 h-6 not-dark:hidden" alt="Tailwind Play" /> <hr class="my-6 w-full border-(--pattern-fg)" /> <p class="mb-3">Want to dig deeper into Tailwind?</p> <p class="font-semibold"> <a href="" class="text-gray-950 underline decoration-sky-400 underline-offset-3 hover:decoration-2 dark:text-white">Read the docs &rarr;</a> </p> </div> </div> <div class="relative -right-px col-start-2 row-span-full row-start-1 border-x border-x-(--pattern-fg) bg-[image:repeating-linear-gradient(315deg,_var(--pattern-fg)_0,_var(--pattern-fg)_1px,_transparent_0,_transparent_50%)] bg-[size:10px_10px] bg-fixed"></div> <div class="relative -left-px col-start-4 row-span-full row-start-1 border-x border-x-(--pattern-fg) bg-[image:repeating-linear-gradient(315deg,_var(--pattern-fg)_0,_var(--pattern-fg)_1px,_transparent_0,_transparent_50%)] bg-[size:10px_10px] bg-fixed"></div> <div class="relative -bottom-px col-span-full col-start-1 row-start-2 h-px bg-(--pattern-fg)"></div> <div class="relative -top-px col-span-full col-start-1 row-start-4 h-px bg-(--pattern-fg)"></div> </div> Here is the result @mannupaaji any advice how I can improve prompts? What's you would like to add on here to have a better output?

❤️‍🔥 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)

❤️‍🔥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.

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 }}.

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. ---

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.

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.

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.

Access ALL prompts for stunning animated websites in one click: Full Prompt to Recreate the Landing Page Create a dark, premium SaaS landing page for a fictional company called "APEX" — a revenue acceleration platform. The design uses a "liquid glass" aesthetic with ultra-dark backgrounds, translucent glassmorphic elements, and green accent color. The page is built with React, Vite, TypeScript, Tailwind CSS, shadcn/ui, and hls.js for video streaming. GLOBAL DESIGN SYSTEM Font: Geist Sans (install @fontsource/geist-sans, weights 400, 500, 600, 700). Apply via font-family: 'Geist Sans', 'Inter', system-ui, sans-serif on body. Color Palette (HSL, CSS variables in :root): --background: 260 87% 3% (near-black with slight purple) --foreground: 40 6% 95% (warm off-white) --primary: 121 95% 76% (vivid green — accent only) --primary-foreground: 0 0% 5% --secondary: 240 4% 16% --border: 240 4% 20% --hero-heading: 40 10% 96% (bright warm white for headings) --hero-sub: 40 6% 82% (muted warm gray for subtext) --card: 240 6% 9% --muted: 240 4% 16% --muted-foreground: 240 5% 65% --radius: 0.75rem Map all colors in tailwind.config.ts as hsl(var(--token)). Add hero.heading and hero.sub as custom colors. "Liquid Glass" utility class (in index.css under @layer utilities): .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; } Button Variants (in shadcn button.tsx): hero: bg-primary text-primary-foreground rounded-full px-6 py-3 text-base font-medium hover:bg-primary/90 heroSecondary: liquid-glass text-foreground rounded-full px-6 py-3 text-base font-normal hover:bg-white/5 Marquee animation (tailwind.config.ts keyframes): marquee: { "0%": { transform: "translateX(0%)" }, "100%": { transform: "translateX(-50%)" } } Animation: marquee 20s linear infinite SECTION 1: HERO Full-viewport hero with a background MP4 video playing behind all content. Video URL: Use a standard <video> tag with <source> (not HLS). Attributes: autoPlay loop muted playsInline. Positioned absolute inset-0 w-full h-full object-cover. Gradient overlay (absolute, pointer-events-none): linear-gradient(to bottom, transparent 0%, transparent 30%, hsl(260 87% 3% / 0.1) 45%, hsl(260 87% 3% / 0.4) 60%, hsl(260 87% 3% / 0.75) 75%, hsl(260 87% 3%) 95%) Content (relative z-10, flex column, min-h-screen): Navbar — centered, liquid-glass rounded-3xl container (max-w-[850px]) containing:Logo: small SVG crosshair icon in a w-7 h-7 rounded-lg bg-gradient-to-b from-secondary to-mutedbox + "APEX" text (text-xl font-semibold) Nav items: "Features" (dropdown chevron), "Solutions", "Plans", "Learning" (dropdown chevron) — plain text buttons CTA: <Button variant="hero" size="sm">Sign Up</Button> Announcement Badge — liquid-glass rounded-full pill: "Nova+ Launched!" + nested "Explore" badge with ChevronRight icon Heading — text-hero-heading text-4xl sm:text-6xl lg:text-7xl font-semibold leading-[1.05] tracking-tight max-w-5xl:Accelerate Your Revenue Growth Now Subheading — text-hero-sub text-lg max-w-md mt-4 opacity-80: "Drive your funnel forward with clever workflows, analytics, and seamless lead management." CTA Buttons — flex gap-4 mt-8: "Start Free Right Now" (hero variant) + "Schedule a Consult" (heroSecondary variant) Social Proof Bar — at bottom of hero. Left text: "Relied on by brands across the globe" (2-line, text-foreground/50 text-sm). Right: infinite marquee scrolling 6 fake brand names (Vortex, Nimbus, Prysma, Cirrus, Kynder, Halcyn) each with a liquid-glass w-6 h-6 rounded-lg icon showing the first letter. Array is duplicated for seamless loop. Uses animate-marquee. SECTION 2: FEATURES (3-Column Cards with Background Video) Background HLS Video: Use hls.js for playback. Video is absolute inset-0 object-cover behind the section. Gradient overlays on top of video: Top: bg-gradient-to-b from-background via-background/80 to-transparent(height 40%) Bottom: bg-gradient-to-t from-background via-background/80 to-transparent(height 40%) Overall darkening: bg-background/40 Section header: Badge: liquid-glass rounded-full pill — "Core Platform" + "Overview" with ChevronRight Heading: text-hero-heading text-3xl sm:text-5xl font-semibold: "Built for Teams That / Ship Relentlessly" Sub: "Three pillars that keep your revenue engine humming without the operational drag." 3 Feature Cards (grid md:grid-cols-3 gap-6), each liquid-glass rounded-3xl p-8: Lightning Workflows — "Automate repetitive tasks with intelligent pipelines that adapt to your team's rhythm and velocity." Stat: "3.2x faster" / "pipeline throughput" Deep-Dive Analytics — "Uncover patterns hiding in your funnel. Real-time cohort analysis with zero configuration required." Stat: "148%" / "avg. conversion lift" Compliance Engine — "SOC 2, GDPR, and HIPAA guardrails baked into every interaction. Audit trails generated automatically." Stat: "Zero" / "compliance incidents" Each card has a border-t border-border/50 divider above the stat. Hover: hover:bg-white/[0.03]. SECTION 3: CHESS SECTION (Video Left, Content Right) py-32 px-4, max-w-6xl, grid lg:grid-cols-2 gap-20 items-center. Left — Video:liquid-glass rounded-3xl aspect-[4/3] overflow-hidden HLS video: Right — Content: Badge: "Smart Routing" + "New" Heading: "Every Lead Finds / Its Perfect Path" Body: "Intelligent lead scoring meets adaptive routing. Each prospect is matched to the rep, sequence, and cadence most likely to convert — in real time." Bullet list (3 items with w-1.5 h-1.5 rounded-full bg-primarydots): "AI-scored lead qualification", "Dynamic rep assignment", "Multi-touch attribution" Buttons: "See It in Action" (hero) + "Read the Docs" (heroSecondary) SECTION 4: REVERSE CHESS SECTION (Content Left, Video Right) Same layout as Chess but reversed with order- classes for mobile-first. Left — Content (order-2 lg:order-1): Badge: "Pipeline Studio" + "Beta" Heading: "Design Funnels / That Actually Close" Body: "Drag-and-drop pipeline builder with live conversion metrics at every stage. See exactly where deals stall and why." 4 stat cards in a grid grid-cols-2 gap-4, each liquid-glass rounded-2xl p-4:"47.2%" / "win-rate increase" "12 days" / "shorter sales cycle" "2.8x" / "deal velocity" "91%" / "forecast accuracy" Button: "Try Pipeline Studio" (hero) Right — Video (order-1 lg:order-2):liquid-glass rounded-3xl aspect-[4/3] HLS video: SECTION 5: NUMBERS SECTION (Full-Width Background Video) Background HLS Video: Gradient overlay: linear-gradient(to top, hsl(260 87% 3%) 0%, hsl(260 87% 3% / 0.85) 15%, hsl(260 87% 3% / 0.4) 40%, hsl(260 87% 3% / 0.15) 60%, hsl(260 87% 3% / 0.3) 100%) Content (relative z-10, py-32): Hero metric (centered): $4.7B in text-7xl sm:text-[8rem] lg:text-[10rem] font-semibold tracking-tighter+ label "Revenue influenced" + description. mb-24. Bottom two metrics in a liquid-glass rounded-3xl p-12 grid md:grid-cols-2 with a vertical md:border-r border-border/50 divider:"18M" / "Leads processed monthly" "99.97%" / "Platform uptime" SECTION 6: TESTIMONIALS py-32, centered header + 3-column card grid. Header: "Trusted by Revenue / Leaders Everywhere" "Hear from the teams that made the switch." 3 Testimonial cards (liquid-glass rounded-3xl p-8), middle card offset with md:-translate-y-6: Clara Whitfield, VP Revenue, Meridian Health (initials "CW") Derek Tanaka, Growth Lead, Baseform (initials "DT") Simone Reuter, CRO, Alpenhaus Group (initials "SR") Each card: quoted text + divider + avatar circle (w-10 h-10 rounded-full bg-secondary) with initials + name/role. SECTION 7: CTA + FOOTER WRAPPER (Background Video) Wrapper component with shared background HLS video behind both CTA and Footer. HLS Video: Gradient overlay: linear-gradient(to bottom, hsl(260 87% 3%) 0%, hsl(260 87% 3% / 0.85) 15%, hsl(260 87% 3% / 0.4) 40%, hsl(260 87% 3% / 0.15) 60%, hsl(260 87% 3% / 0.3) 100%) CTA Section (relative z-10): liquid-glass rounded-[2rem] p-12 sm:p-20 centered card Heading: "Ready to Outpace / Your Pipeline Targets?" Sub: "Join 2,400+ teams already accelerating revenue with APEX. No credit card required." Buttons: "Start Free Today" (hero) + "Talk to Sales" (heroSecondary) Footer (relative z-10): 5-column grid: Brand (2-col span with logo + tagline) + "Product" (Features, Pricing, Integrations, Changelog, Roadmap) + "Company" (About, Blog, Careers, Press) + "Resources" (Documentation, Community, Support, Status) Bottom bar: "© 2026 APEX Inc." + Privacy / Terms / Cookies links Borders: border-t border-border/30 KEY DEPENDENCIES hls.js, @fontsource/geist-sans, lucide-react, class-variance-authority, tailwindcss-animate, @radix-ui/react-slot, shadcn/ui components, react-router-dom, @tanstack/react-query PAGE STRUCTURE (Index.tsx) <HeroSection /> <FeaturesSection /> <ChessSection /> <ReverseChessSection /> <NumbersSection /> <TestimonialsSection /> <CTAFooterWrapper /> (contains CTASection + FooterSect

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

Method / Code

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.