Reusable prompts

Here's a comprehensive prompt you can use to generate similar websites:

---

**Website Generation Prompt**

Create a premium, dark-themed business website with the following structure and aesthetic:

## Design & Visual Style
- **Color Palette:** Deep blacks (#060606), golds (#d4af37, #f0d488), silvers (#cdd1d8), whites for text
- **Typography:** Space Grotesk for headlines, Inter for body text
- **Layout:** Dark modern with subtle luxury feel, smooth animations and transitions
- **Background:** Fixed canvas with:
  - Drifting starfield across entire page
  - Glowing particle orb behind hero section that fades on scroll
  - Soft grid overlay and minimal blur glows
  - Respects `prefers-reduced-motion`

## Page Sections (in order)
1. **Navigation** — Sticky header with logo, nav links, CTA button; glassmorphic blur on scroll
2. **Hero** — Large headline with accent gradient, subheadline, two CTAs, trust badges/client chips
3. **Stats Grid** — 4 key metrics with numbers and labels
4. **Services/Features** — 3-card grid with icons, descriptions, and checklists; featured card has special styling
5. **Work/Portfolio** — 3-card grid (2 case studies + CTA card) with gradient overlays and tags
6. **Social/Reels** — Embedded Instagram grid section
7. **Process/Steps** — 4-step numbered timeline (Discovery → Concept → Production → Launch)
8. **About** — Left text + right panel with value propositions in key/value rows
9. **Contact Form** — 2-column form (name, email, service dropdown, message) that opens WhatsApp pre-filled on submit
10. **Footer** — Brand info, nav links, social icons, copyright

## Key Features
- **Reveal animations** — Elements fade in and slide up on scroll with staggered timing
- **Hover effects** — Cards lift, borders highlight, buttons glow
- **Responsive design** — Mobile-first, adapts to tablet and desktop
- **Form handling** — Contact form triggers WhatsApp Business link with pre-filled message
- **Smooth scrolling** — Native and via CSS
- **No dependencies** — Vanilla JS, pure CSS (can use Tailwind or write custom)

## Tone & Copy Style
- Professional but approachable
- Action-oriented ("We make brands move", "Start your project")
- Trust-building (mention awards, clients, guarantees, custom work)
- Clear value propositions and service descriptions

## Technical Requirements
- Single-page or multi-page structure
- CSS animations (no heavy JS libraries unless necessary)
- Mobile hamburger menu that works smoothly
- SEO-friendly (semantic HTML, meta tags, structured data)
- GitHub Pages ready (optional)
- Optional: Canvas-based particle engine for the background

## Optional Enhancements
- Dark/light mode toggle
- Advanced particle morphing (orb → helix → wave as user scrolls)
- Video backgrounds on sections
- Live counters or stats animations
- Newsletter signup
- Testimonials carousel

---

**Usage:** You can copy this prompt and:
- Give it to Claude to generate a complete HTML/CSS/JS site
- Customize the color palette, text, and services to your brand
- Use it as a brief for a designer
- Modify sections to match your specific industry (replace "Services" with your offerings, etc.)

The structure is flexible — remove/add sections as needed for your business model.

"use client";
import React, { useState, useEffect, useMemo, useRef } from "react";
import { motion, useTransform, useSpring, useMotionValue } from "framer-motion";

// --- Utility ---
// function cn(...inputs: ClassValue[]) {
//   return twMerge(clsx(inputs));
// }

// --- Types ---
export type AnimationPhase = "scatter" | "line" | "circle" | "bottom-strip";

interface FlipCardProps {
  src: string;
  index: number;
  total: number;
  phase: AnimationPhase;
  target: { x: number; y: number; rotation: number; scale: number; opacity: number };
}

// --- FlipCard Component ---
const IMG_WIDTH = 60; // Reduced from 100
const IMG_HEIGHT = 85; // Reduced from 140

function FlipCard({
  src,
  index,
  total,
  phase,
  target,
}: FlipCardProps) {
  return (
    <motion.div
      // Smoothly animate to the coordinates defined by the parent
      animate={{
        x: target.x,
        y: target.y,
        rotate: target.rotation,
        scale: target.scale,
        opacity: target.opacity,
      }}
      transition={{
        type: "spring",
        stiffness: 40,
        damping: 15,
      }}
      // Initial style
      style={{
        position: "absolute",
        width: IMG_WIDTH,
        height: IMG_HEIGHT,
        transformStyle: "preserve-3d", // Essential for the 3D hover effect
        perspective: "1000px",
      }}
      className="cursor-pointer group"
    >
      <motion.div
        className="relative h-full w-full"
        style={{ transformStyle: "preserve-3d" }}
        transition={{ duration: 0.6, type: "spring", stiffness: 260, damping: 20 }}
        whileHover={{ rotateY: 180 }}
      >
        {/* Front Face */}
        <div
          className="absolute inset-0 h-full w-full overflow-hidden rounded-xl shadow-lg bg-gray-200"
          style={{ backfaceVisibility: "hidden" }}
        >
          <img
            src={src}
            alt={`hero-${index}`}
            className="h-full w-full object-cover"
          />
          <div className="absolute inset-0 bg-black/10 transition-colors group-hover:bg-transparent" />
        </div>

        {/* Back Face */}
        <div
          className="absolute inset-0 h-full w-full overflow-hidden rounded-xl shadow-lg bg-gray-900 flex flex-col items-center justify-center p-4 border border-gray-700"
          style={{ backfaceVisibility: "hidden", transform: "rotateY(180deg)" }}
        >
          <div className="text-center">
            <p className="text-[8px] font-bold text-blue-400 uppercase tracking-widest mb-1">View</p>
            <p className="text-xs font-medium text-white">Details</p>
          </div>
        </div>
      </motion.div>
    </motion.div>
  );
}

// --- Main Hero Component ---
const TOTAL_IMAGES = 20;
const MAX_SCROLL = 3000; // Virtual scroll range

// Unsplash Images
const IMAGES = [
  "https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?w=300&q=80",
  "https://images.unsplash.com/photo-1519710164239-da123dc03ef4?w=300&q=80",
  "https://images.unsplash.com/photo-1497366216548-37526070297c?w=300&q=80",
  "https://images.unsplash.com/photo-1506744038136-46273834b3fb?w=300&q=80",
  "https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?w=300&q=80",
  "https://images.unsplash.com/photo-1506765515384-028b60a970df?w=300&q=80",
  "https://images.unsplash.com/photo-1441974231531-c6227db76b6e?w=300&q=80",
  "https://images.unsplash.com/photo-1472214103451-9374bd1c798e?w=300&q=80",
  "https://images.unsplash.com/photo-1500485035595-cbe6f645feb1?w=300&q=80",
  "https://images.unsplash.com/photo-1469474968028-56623f02e42e?w=300&q=80",
  "https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=300&q=80",
  "https://images.unsplash.com/photo-1518020382113-a7e8fc38eac9?w=300&q=80",
  "https://images.unsplash.com/photo-1465146344425-f00d5f5c8f07?w=300&q=80",
  "https://images.unsplash.com/photo-1470252649378-9c29740c9fa8?w=300&q=80",
  "https://images.unsplash.com/photo-1493246507139-91e8fad9978e?w=300&q=80",
  "https://images.unsplash.com/photo-1494438639946-1ebd1d20bf85?w=300&q=80",
  "https://images.unsplash.com/photo-1483729558449-99ef09a8c325?w=300&q=80",
  "https://images.unsplash.com/photo-1518173946687-a4c8892bbd9f?w=300&q=80",
  "https://images.unsplash.com/photo-1523961131990-5ea7c61b2107?w=300&q=80",
  "https://images.unsplash.com/photo-1496568816309-51d7c20e3b21?w=300&q=80",
];

// Helper for linear interpolation
const lerp = (start: number, end: number, t: number) => start * (1 - t) + end * t;

export default function IntroAnimation() {
  const [introPhase, setIntroPhase] = useState<AnimationPhase>("scatter");
  const [containerSize, setContainerSize] = useState({ width: 0, height: 0 });
  const containerRef = useRef<HTMLDivElement>(null);

  // --- Container Size ---
  useEffect(() => {
    if (!containerRef.current) return;

    const handleResize = (entries: ResizeObserverEntry[]) => {
      for (const entry of entries) {
        setContainerSize({
          width: entry.contentRect.width,
          height: entry.contentRect.height,
        });
      }
    };

    const observer = new ResizeObserver(handleResize);
    observer.observe(containerRef.current);

    // Initial set
    setContainerSize({
      width: containerRef.current.offsetWidth,
      height: containerRef.current.offsetHeight,
    });

    return () => observer.disconnect();
  }, []);

  // --- Virtual Scroll Logic ---
  const virtualScroll = useMotionValue(0);
  const scrollRef = useRef(0); // Keep track of scroll value without re-renders

  useEffect(() => {
    const container = containerRef.current;
    if (!container) return;

    const handleWheel = (e: WheelEvent) => {
      // Prevent default to stop browser overscroll/bounce
      e.preventDefault();

      const newScroll = Math.min(Math.max(scrollRef.current + e.deltaY, 0), MAX_SCROLL);
      scrollRef.current = newScroll;
      virtualScroll.set(newScroll);
    };

    // Touch support
    let touchStartY = 0;
    const handleTouchStart = (e: TouchEvent) => {
      touchStartY = e.touches[0].clientY;
    };
    const handleTouchMove = (e: TouchEvent) => {
      const touchY = e.touches[0].clientY;
      const deltaY = touchStartY - touchY;
      touchStartY = touchY;

      const newScroll = Math.min(Math.max(scrollRef.current + deltaY, 0), MAX_SCROLL);
      scrollRef.current = newScroll;
      virtualScroll.set(newScroll);
    };

    // Attach listeners to container instead of window for portability
    container.addEventListener("wheel", handleWheel, { passive: false });
    container.addEventListener("touchstart", handleTouchStart, { passive: false });
    container.addEventListener("touchmove", handleTouchMove, { passive: false });

    return () => {
      container.removeEventListener("wheel", handleWheel);
      container.removeEventListener("touchstart", handleTouchStart);
      container.removeEventListener("touchmove", handleTouchMove);
    };
  }, [virtualScroll]);

  // 1. Morph Progress: 0 (Circle) -> 1 (Bottom Arc)
  // Happens between scroll 0 and 600
  const morphProgress = useTransform(virtualScroll, [0, 600], [0, 1]);
  const smoothMorph = useSpring(morphProgress, { stiffness: 40, damping: 20 });

  // 2. Scroll Rotation (Shuffling): Starts after morph (e.g., > 600)
  // Rotates the bottom arc as user continues scrolling
  const scrollRotate = useTransform(virtualScroll, [600, 3000], [0, 360]);
  const smoothScrollRotate = useSpring(scrollRotate, { stiffness: 40, damping: 20 });

  // --- Mouse Parallax ---
  const mouseX = useMotionValue(0);
  const smoothMouseX = useSpring(mouseX, { stiffness: 30, damping: 20 });

  useEffect(() => {
    const container = containerRef.current;
    if (!container) return;

    const handleMouseMove = (e: MouseEvent) => {
      const rect = container.getBoundingClientRect();
      const relativeX = e.clientX - rect.left;

      // Normalize -1 to 1
      const normalizedX = (relativeX / rect.width) * 2 - 1;
      // Move +/- 100px
      mouseX.set(normalizedX * 100);
    };
    container.addEventListener("mousemove", handleMouseMove);
    return () => container.removeEventListener("mousemove", handleMouseMove);
  }, [mouseX]);

  // --- Intro Sequence ---
  useEffect(() => {
    const timer1 = setTimeout(() => setIntroPhase("line"), 500);
    const timer2 = setTimeout(() => setIntroPhase("circle"), 2500);
    return () => { clearTimeout(timer1); clearTimeout(timer2); };
  }, []);

  // --- Random Scatter Positions ---
  const scatterPositions = useMemo(() => {
    return IMAGES.map(() => ({
      x: (Math.random() - 0.5) * 1500,
      y: (Math.random() - 0.5) * 1000,
      rotation: (Math.random() - 0.5) * 180,
      scale: 0.6,
      opacity: 0,
    }));
  }, []);

  // --- Render Loop (Manual Calculation for Morph) ---
  const [morphValue, setMorphValue] = useState(0);
  const [rotateValue, setRotateValue] = useState(0);
  const [parallaxValue, setParallaxValue] = useState(0);

  useEffect(() => {
    const unsubscribeMorph = smoothMorph.on("change", setMorphValue);
    const unsubscribeRotate = smoothScrollRotate.on("change", setRotateValue);
    const unsubscribeParallax = smoothMouseX.on("change", setParallaxValue);
    return () => {
      unsubscribeMorph();
      unsubscribeRotate();
      unsubscribeParallax();
    };
  }, [smoothMorph, smoothScrollRotate, smoothMouseX]);

  // --- Content Opacity ---
  // Fade in content when arc is formed (morphValue > 0.8)
  const contentOpacity = useTransform(smoothMorph, [0.8, 1], [0, 1]);
  const contentY = useTransform(smoothMorph, [0.8, 1], [20, 0]);

  return (
    <div ref={containerRef} className="relative w-full h-full bg-[#FAFAFA] overflow-hidden">
      {/* Container */}
      <div className="flex h-full w-full flex-col items-center justify-center perspective-1000">

        {/* Intro Text (Fades out) */}
        <div className="absolute z-0 flex flex-col items-center justify-center text-center pointer-events-none top-1/2 -translate-y-1/2">
          <motion.h1
            initial={{ opacity: 0, y: 20, filter: "blur(10px)" }}
            animate={introPhase === "circle" && morphValue < 0.5 ? { opacity: 1 - morphValue * 2, y: 0, filter: "blur(0px)" } : { opacity: 0, filter: "blur(10px)" }}
            transition={{ duration: 1 }}
            className="text-2xl font-medium tracking-tight text-gray-800 md:text-4xl"
          >
            The future is built on AI.
          </motion.h1>
          <motion.p
            initial={{ opacity: 0 }}
            animate={introPhase === "circle" && morphValue < 0.5 ? { opacity: 0.5 - morphValue } : { opacity: 0 }}
            transition={{ duration: 1, delay: 0.2 }}
            className="mt-4 text-xs font-bold tracking-[0.2em] text-gray-500"
          >
            SCROLL TO EXPLORE
          </motion.p>
        </div>

        {/* Arc Active Content (Fades in) */}
        <motion.div
          style={{ opacity: contentOpacity, y: contentY }}
          className="absolute top-[10%] z-10 flex flex-col items-center justify-center text-center pointer-events-none px-4"
        >
          <h2 className="text-3xl md:text-5xl font-semibold text-gray-900 tracking-tight mb-4">
            Explore Our Vision
          </h2>
          <p className="text-sm md:text-base text-gray-600 max-w-lg leading-relaxed">
            Discover a world where technology meets creativity. <br className="hidden md:block" />
            Scroll through our curated collection of innovations designed to shape the future.
          </p>
        </motion.div>

        {/* Main Container */}
        <div className="relative flex items-center justify-center w-full h-full">
          {IMAGES.slice(0, TOTAL_IMAGES).map((src, i) => {
            let target = { x: 0, y: 0, rotation: 0, scale: 1, opacity: 1 };

            // 1. Intro Phases (Scatter -> Line)
            if (introPhase === "scatter") {
              target = scatterPositions[i];
            } else if (introPhase === "line") {
              const lineSpacing = 70; // Adjusted for smaller images (60px width + 10px gap)
              const lineTotalWidth = TOTAL_IMAGES * lineSpacing;
              const lineX = i * lineSpacing - lineTotalWidth / 2;
              target = { x: lineX, y: 0, rotation: 0, scale: 1, opacity: 1 };
            } else {
              // 2. Circle Phase & Morph Logic

              // Responsive Calculations
              const isMobile = containerSize.width < 768;
              const minDimension = Math.min(containerSize.width, containerSize.height);

              // A. Calculate Circle Position
              const circleRadius = Math.min(minDimension * 0.35, 350);

              const circleAngle = (i / TOTAL_IMAGES) * 360;
              const circleRad = (circleAngle * Math.PI) / 180;
              const circlePos = {
                x: Math.cos(circleRad) * circleRadius,
                y: Math.sin(circleRad) * circleRadius,
                rotation: circleAngle + 90,
              };

              // B. Calculate Bottom Arc Position
              // "Rainbow" Arch: Convex up. Center is highest point.

              // Radius:
              const baseRadius = Math.min(containerSize.width, containerSize.height * 1.5);
              const arcRadius = baseRadius * (isMobile ? 1.4 : 1.1);

              // Position:
              const arcApexY = containerSize.height * (isMobile ? 0.35 : 0.25);
              const arcCenterY = arcApexY + arcRadius;

              // Spread angle:
              const spreadAngle = isMobile ? 100 : 130;
              const startAngle = -90 - (spreadAngle / 2);
              const step = spreadAngle / (TOTAL_IMAGES - 1);

              // Apply Scroll Rotation (Shuffle) with Bounds
              // We want to clamp rotation so images don't disappear.
              // Map scroll range [600, 3000] to a limited rotation range.
              // Range: [-spreadAngle/2, spreadAngle/2] keeps them roughly in view.
              // We map 0 -> 1 (progress of scroll loop) to this range.

              // Note: rotateValue comes from smoothScrollRotate which maps [600, 3000] -> [0, 360]
              // We need to adjust that mapping in the hook above, OR adjust it here.
              // Better to adjust it here relative to the spread.

              // Let's interpret rotateValue (0 to 360) as a progress 0 to 1
              const scrollProgress = Math.min(Math.max(rotateValue / 360, 0), 1);

              // Calculate bounded rotation:
              // Move from 0 (centered) to -spreadAngle (all the way left) or similar.
              // Let's allow scrolling through the list.
              // Total sweep needed to see all items if we start at one end?
              // If we start centered, we can go +/- spreadAngle/2.

              // User wants to "stop on the last image".
              // Let's map scroll to: 0 -> -spreadAngle (shifts items left)
              const maxRotation = spreadAngle * 0.8; // Don't go all the way, keep last item visible
              const boundedRotation = -scrollProgress * maxRotation;

              const currentArcAngle = startAngle + (i * step) + boundedRotation;
              const arcRad = (currentArcAngle * Math.PI) / 180;

              const arcPos = {
                x: Math.cos(arcRad) * arcRadius + parallaxValue,
                y: Math.sin(arcRad) * arcRadius + arcCenterY,
                rotation: currentArcAngle + 90,
                scale: isMobile ? 1.4 : 1.8, // Increased scale for active state
              };

              // C. Interpolate (Morph)
              target = {
                x: lerp(circlePos.x, arcPos.x, morphValue),
                y: lerp(circlePos.y, arcPos.y, morphValue),
                rotation: lerp(circlePos.rotation, arcPos.rotation, morphValue),
                scale: lerp(1, arcPos.scale, morphValue),
                opacity: 1,
              };
            }

            return (
              <FlipCard
                key={i}
                src={src}
                index={i}
                total={TOTAL_IMAGES}
                phase={introPhase} // Pass intro phase for initial animations
                target={target}
              />
            );
          })}
        </div>
      </div>
    </div>
  );
}

Gemini Prompt: Two-Part Luxury Hypercar Commercial

That's even better. Two 10-second clips will usually give Gemini Flow better consistency and higher quality than trying to pack everything into one 20-second generation.

=== VIDEO 1 (0–10s) — Hero Reveal + Macro Details ===

Create a 10-second ultra-premium cinematic automotive commercial featuring a futuristic black hypercar inside a dark luxury studio with a glossy reflective floor. The atmosphere is filled with subtle volumetric fog, floating dust particles, and dramatic cinematic lighting.

Start in complete darkness. Thin beams of light slowly reveal the silhouette of the car while the camera glides elegantly across the body. Gradually transition into extreme macro shots that seamlessly flow between premium components:

• Carbon fiber weave with microscopic detail
• LED headlights performing a futuristic startup animation
• Forged alloy wheel slowly rotating
• Carbon ceramic brake rotor and brake caliper
• Sculpted aerodynamic vents
• Sharp body lines catching moving reflections
• Side mirror with glossy reflections
• Active rear wing beginning to deploy

The camera should continuously move with smooth dolly shots, focus pulls, and cinematic match cuts, making the entire sequence feel like a luxury automotive advertisement.

Style: Hollywood VFX, Bugatti commercial, Pagani craftsmanship, Koenigsegg cinematography, ray-traced reflections, HDR, 8K photorealism, shallow depth of field, anamorphic lens flares, premium product commercial, Unreal Engine 5 quality, physically accurate materials, no people, no text, no logos.

Maintain perfect subject consistency throughout the video. The hypercar must remain identical in design, proportions, wheel design, lighting, environment, and camera quality across every shot. Prioritize cinematic camera motion over fast cuts, with seamless transitions and premium VFX suitable for a luxury automotive commercial.

=== VIDEO 2 (10–20s) — Orbit + Color Morph + Final Hero Shot ===

Continue using the exact same hypercar, maintaining identical proportions, lighting, materials, and visual consistency.

Begin with a smooth cinematic orbit around the vehicle, capturing front three-quarter, side profile, rear, low-angle, and overhead hero perspectives. Use elegant camera choreography with realistic reflections, volumetric light beams, and premium studio lighting.

Midway through the sequence, smoothly transform the vehicle's finish while the camera continues moving:

• Matte Obsidian Black
• Metallic Crimson Red
• Liquid Titanium Silver

The transformation should ripple naturally across the paint without changing the design or camera position.

Finish with the car rolling slightly forward before stopping in a dramatic hero pose. The headlights ignite, reflections sweep across the body panels, the rear wing fully deploys, subtle fog drifts around the vehicle, and the camera slowly pushes toward the front emblem before fading to black.

Style: Luxury hypercar commercial, Hollywood VFX, cinematic masterpiece, premium automotive advertisement, Bugatti launch film aesthetic, Pagani detail shots, Koenigsegg lighting, ray-traced reflections, HDR, volumetric fog, shallow depth of field, 8K photorealism, Unreal Engine 5 quality, no people, no text, no watermark.

Maintain perfect subject consistency throughout the video. The hypercar must remain identical in design, proportions, wheel design, lighting, environment, and camera quality across every shot. Prioritize cinematic camera motion over fast cuts, with seamless transitions and premium VFX suitable for a luxury automotive commercial.

=== Pro Tip ===

The consistency instruction at the end of both prompts gives Gemini Flow better subject coherence when stitching the two clips together. This creates a seamless 20-second commercial that feels like a single professional production.

Premium Fable 5 Website Prompt for APEX Motors

Since you're using Fable 5, don't describe how to build it (e.g., "use GSAP, Lenis"). Instead, describe the experience you want. Fable 5 is much better at choosing the implementation when you specify cinematic direction, interactions, and visual language.

Here's a significantly upgraded prompt:

⸻

Design and build an ultra-premium single-page website for a fictional luxury hypercar manufacturer called APEX Motors. The experience should feel like visiting the websites of Bugatti, Koenigsegg, Apple, or Nothing—minimal, cinematic, immersive, and exceptionally smooth.

Use the two provided cinematic videos as the centerpiece of the experience. The website should be scroll-driven, where scrolling controls the pace of the storytelling, making the visitor feel like they are directing a luxury automotive commercial.

=== HERO EXPERIENCE ===

Start with a full-screen cinematic hero section using the first video as the background. The page loads from black with a subtle fade-in. Large elegant typography appears with premium motion:

APEX MOTORS
Engineering Tomorrow.

As the user scrolls, the typography smoothly scales, fades, and separates while revealing more of the vehicle beneath. The transition should feel luxurious rather than flashy.

⸻

=== SCROLL-DRIVEN CINEMATIC SEQUENCE ===

The first video should remain pinned while the scroll gradually progresses through the footage. Every scroll movement should synchronize naturally with the video's motion, creating the feeling of scrubbing through a luxury automotive commercial.

Overlay minimal floating interface elements that animate into view:

* Top speed
* Horsepower
* 0–100 km/h
* Active aerodynamics
* Carbon monocoque chassis

Each specification should appear with elegant micro-animations and disappear seamlessly as the story progresses.

⸻

=== PERFORMANCE SHOWCASE ===

Transition into a premium editorial section with oversized typography and animated statistics.

Large numbers should count up smoothly while subtle motion graphics and elegant light streaks reinforce the feeling of speed.

Example:

* 480 km/h
* 1,850 HP
* 0–100 in 1.9s
* 1,200 kg

Every interaction should feel refined, cinematic, and premium.

⸻

=== CINEMATIC COLOR REVEAL ===

Transition into the second cinematic video using an elegant morph instead of a hard cut.

As users continue scrolling, introduce three premium finishes:

* Obsidian Black
* Crimson Velocity
* Liquid Titanium

Each color transition should use sophisticated liquid morphing, light sweeps, reflections, and premium motion design rather than simple fades.

⸻

=== ENGINEERING SECTION ===

Use cinematic typography combined with subtle animated diagrams and premium UI cards to showcase:

* Carbon Fiber Monocoque
* Active Aerodynamics
* AI-Assisted Performance
* Electric Torque Vectoring
* Adaptive Suspension

Cards should gently float using subtle parallax while remaining clean and minimal.

⸻

=== HORIZONTAL SHOWCASE ===

Create a pinned horizontal scrolling section displaying dramatic close-up imagery from the videos, showcasing carbon fiber, headlights, wheels, cockpit, aerodynamics, and body details.

Apply layered parallax, glassmorphism, and premium lighting effects to create depth.

⸻

=== FINAL HERO ===

End with a breathtaking full-screen scene using the closing portion of the second video.

The vehicle slowly settles into a dramatic hero pose while the camera pushes forward.

Display:

THE FUTURE HAS ARRIVED
Crafted Without Compromise.

Add a premium glowing "Reserve Yours" call-to-action with elegant hover animations.

⸻

=== DESIGN LANGUAGE ===

* Luxury automotive brand aesthetic
* Apple-level visual polish
* Ultra-minimal layout
* Matte black background
* Glassmorphism panels
* Premium typography
* Cinematic spacing
* HDR-inspired gradients
* Metallic accents
* Animated reflections
* Dynamic light sweeps
* Soft shadows
* Smooth motion blur
* Depth-of-field inspired transitions
* Elegant cursor interactions
* Seamless section transitions
* Premium loading animation
* Subtle ambient particle effects
* Micro-interactions throughout
* Fully responsive
* Optimized for 60 FPS
* High-performance rendering
* No generic templates or stock effects

⸻

The final result should feel like an award-winning Awwwards website and a $10M luxury automotive launch experience, where every scroll delivers a cinematic, premium, emotionally engaging reveal.

====== CLAUDE PROMPT: WEBSITE ======

Build an Awwwards-winning interactive website experience for my personal brand "Built By Ruturaj".

This is NOT a traditional landing page.

The website should feel like an immersive digital product film where the user's scroll physically disassembles and explores an ultra-luxury mechanical watch before reassembling it.

The storytelling style should be comparable to Apple, Rolex, Patek Philippe, Nothing, Tesla product launches, and modern award-winning WebGL experiences.

⸻

OBJECTIVE

The user should feel like they are inside the watch.
Every scroll must reveal something new.
No static sections.
No template layouts.
No boring stacked content.
Every scroll should feel like a new cinematic scene.
The website should be memorable enough to win Awwwards.

⸻

BRANDING

Brand: Built By Ruturaj
Tagline: Crafting Premium AI Experiences.

The watch symbolizes precision engineering, craftsmanship, software architecture and attention to detail.

The website should communicate that my work is engineered—not simply designed.

⸻

LOOK & FEEL

Luxury.
Minimal.
Black background.
Swiss watch aesthetic.
Apple keynote quality.
Highly cinematic.

Materials

• black titanium
• sapphire glass
• brushed aluminum
• polished steel
• subtle gold accents
• premium reflections

Typography

Large bold headlines
Lots of whitespace
Minimal UI
Elegant animations

⸻

VIDEO INTEGRATION

I already have multiple cinematic watch videos.

Use every video as part of the storytelling.

Do NOT simply autoplay videos.

Instead:

Freeze specific frames
Blend between videos
Crossfade seamlessly
Animate masking
Animate clipping
Animate scale
Animate camera transitions
Synchronize videos with scrolling

The transition between videos should be invisible.

⸻

SCROLL EXPERIENCE

Each scroll should reveal another engineering layer.

Scene 01 — Hero

Only silhouette of watch
Tiny glow
Huge typography
Scroll hint
Subtle particles
Mouse movement causes reflections.

⸻

Scene 02 — 3D Rotation

Watch rotates in 3D
Entire screen occupied by watch
Background moves slower than foreground
Parallax lighting
Dynamic shadows

⸻

Scene 03 — Crystal Lift

Sapphire crystal slowly lifts away
As the user scrolls
Glass separates
Reflections animate
Camera slowly zooms inward

⸻

Scene 04 — Bezel Separation

Bezel separates
Tiny screws emerge
Everything floats in zero gravity
Camera rotates

⸻

Scene 05 — Dial Disassembly

Dial opens
Hour markers
Hands
Chapter ring
Date wheel
Separate one after another
Every component animates independently.

⸻

Scene 06 — Inside the Movement

Camera travels INSIDE the movement.
The user should feel microscopic.
Massive gears rotate.
Balance wheel oscillates.
Escapement ticks.
Beautiful macro lighting.

⸻

Scene 07 — Exploded Engineering View

Exploded view with hundreds of components floating.
Depth everywhere.
Mouse movement changes perspective.

⸻

Scene 08 — Feature Storytelling

Each scroll highlights one feature:

Power Reserve
Automatic Rotor
Titanium Case
Sapphire Crystal
Precision Engineering
Shock Resistance
Water Resistance

Each feature becomes the hero.
Other parts become darker.

⸻

Scene 09 — Cross-Section Visualization

Watch sliced open.
Camera moves through layers.
Each layer beautifully animated.

⸻

Scene 10 — Reassembly

Everything begins reassembling.
Components magnetically align.
Tiny screws tighten.
Rotor spins.
Hands align perfectly.
Extremely satisfying.

⸻

Scene 11 — Final Hero

Completed luxury watch.
Slow cinematic orbit.
Beautiful reflections.

⸻

Scene 12 — Brand Reveal

Built By Ruturaj

Large elegant typography appears.

Headline
"Precision. Crafted in Code."

Subheadline
AI Websites
AI Automation
Creative Engineering
3D Digital Experiences

CTA
Book a Project
View My Work

Social icons appear elegantly.

⸻

ANIMATION QUALITY

This website should feel alive.

Use:

GSAP
ScrollTrigger
Lenis
SplitType
Motion Path
Clip-path animations
SVG masking
Blend modes
3D transforms
Layered parallax
Physics-based easing
Spring animations
Momentum
Elastic transitions
Continuous motion
Smooth interpolation
Mouse reactive lighting
Depth of field effects
Subtle floating motion

⸻

VISUAL EFFECTS

Glass morphism (very subtle)
Moving reflections
Specular highlights
Glow bloom
Noise textures
Volumetric lighting
Dust particles
Soft fog
Lens distortion
Depth blur
Ambient occlusion
Moving shadows
Dynamic gradients

⸻

INTERACTION

Mouse movement changes lighting.
Cursor subtly influences reflections.
Hover states feel magnetic.
Buttons deform slightly.
Cards float.
Everything has inertia.

⸻

PERFORMANCE

Maintain 60 FPS.
Lazy load videos.
Optimize rendering.
GPU accelerated transforms.
No scroll lag.
Responsive.
Desktop first.
Excellent mobile fallback.

⸻

DESIGN GOAL

Someone visiting this website should think: "I've never seen a portfolio like this."

Every scroll should create surprise.
Every animation should reveal another engineering layer.
The experience should feel closer to an interactive luxury product launch than a website.
Avoid templates completely.
Do not use generic portfolio layouts.
The entire experience should revolve around cinematic storytelling through the watch, ending with the Built By Ruturaj brand reveal.
Create something worthy of Awwwards, FWA, and CSS Design Awards.

⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻

====== GEMINI PROMPT: VIDEO STORYBOARD (12-Video Sequence) ======

Video 1 – Hero Reveal

Ultra-photorealistic CGI of a luxury Swiss mechanical wristwatch emerging from complete darkness inside a premium black studio. Only a thin rim light reveals the silhouette at first. The camera performs a slow cinematic dolly-in with a subtle orbit. As reflections glide across the sapphire crystal and polished titanium case, more of the watch becomes visible. Soft volumetric lighting, ray-traced reflections, Apple-style product film, Rolex commercial quality, perfectly smooth camera movement, no text, no logo, black background. The final frame is a centered front-facing watch ready for the next scene.

⸻

Video 2 – Crystal & Bezel Separation

Continue from the previous shot. The camera slowly pushes closer toward the watch. The sapphire crystal gently lifts upward while the bezel separates with perfectly smooth mechanical precision. Tiny screws remain aligned as if suspended in zero gravity. Macro cinematic camera orbit with premium studio lighting. Components float only a few centimeters apart. End with the crystal and bezel fully separated while the dial remains intact.

⸻

Video 3 – Dial Exploded View

Continue seamlessly. The camera moves through the opening created by the lifted crystal. The dial, hour markers, hands, chapter ring, and date wheel separate into floating layers while remaining perfectly aligned. Every component rotates slightly to reveal thickness and craftsmanship. Slow orbital camera with macro close-ups, black void background, Swiss luxury engineering aesthetic. End with all dial components suspended in space.

⸻

Video 4 – Journey into the Movement

Continue from the exploded dial. The camera flies smoothly through the floating components and enters the heart of the mechanical movement. Hundreds of polished gears, bridges, ruby jewel bearings, springs, and screws become visible. Every gear rotates naturally. Beautiful macro cinematography with shallow depth of field and ray-traced reflections. End with the balance wheel centered in frame.

⸻

Video 5 – Escapement & Balance Wheel

Extreme macro cinematic shot of the balance wheel oscillating with incredible precision. The escapement ticks realistically while surrounding gears rotate in synchronized motion. Camera performs a slow circular orbit around the balance assembly. Metallic reflections sweep across polished surfaces. Premium Swiss craftsmanship. End with the camera moving toward the mainspring barrel.

⸻

Video 6 – Power System Reveal

Continue into the mainspring barrel. The barrel opens in a beautiful exploded animation, revealing the tightly coiled mainspring storing energy. The power flows visually through the gear train as components rotate together. Camera performs a slow spiral movement around the mechanism. Premium CGI, ultra detailed engineering visualization. End focused on the automatic rotor.

⸻

Video 7 – Automatic Rotor

The camera transitions to the back side of the watch movement. The automatic rotor begins rotating smoothly while transferring energy into the movement. Internal gears engage naturally. Floating cinematic camera circles the rotor while polished metal catches moving highlights. Black studio environment, luxury product film. End with the camera pulling back to reveal the full movement.

⸻

Video 8 – Complete Exploded View

Pull the camera backward while every mechanical component separates into a dramatic exploded view. Reveal the sapphire crystal, bezel, dial, hands, movement, bridges, gear train, escapement, rotor, screws, crown, stem, case, and case back floating in perfect alignment. Every component remains visible with equal spacing. Elegant anti-gravity motion. Finish with the fully exploded watch centered in frame.

⸻

Video 9 – Cross Section

Transform the exploded watch into a precision engineering cross-section. The watch slices vertically while maintaining photorealistic materials. The camera slowly tracks sideways through each layer, revealing sapphire crystal, dial, movement, gear train, rotor, and case construction. Architectural visualization quality with premium lighting. End on the rear case.

⸻

Video 10 – Feature Showcase

Components remain assembled in cross-section while individual engineering features illuminate one by one. Sapphire crystal glows subtly, ceramic bezel becomes highlighted, movement precision is emphasized, jewel bearings sparkle, automatic rotor rotates, water resistance layers appear, titanium case reflects premium light. The camera smoothly orbits around each highlighted feature. End with the watch beginning to reassemble.

⸻

Video 11 – Reassembly

Every floating component moves back into position with satisfying mechanical precision. Tiny screws tighten automatically. Hands align perfectly. The bezel locks into place. The sapphire crystal settles gently onto the case. The camera slowly circles the assembly during the entire process. Ultra-premium CGI with perfect motion. End with the fully assembled watch.

⸻

Video 12 – Final Hero Shot

Fully assembled luxury mechanical watch slowly rotates on a black reflective surface. The camera performs an elegant 360-degree orbit followed by a slow push-in toward the dial. Beautiful reflections glide across sapphire crystal and polished titanium. Soft volumetric lighting, Apple keynote quality, Swiss luxury advertising aesthetic, ray-traced reflections, black background, no text, no logos. Finish with an iconic centered hero composition suitable for the final section of a premium scroll-driven website.

⸻

PRO TIP FOR SEAMLESS WEBSITE SCROLLING

For every prompt, append these continuity instructions:

Maintain visual continuity with the previous clip. Use the last frame as the starting composition. Keep the same watch design, materials, lighting, camera direction, focal length, and black studio environment. Ensure the first and last frames are stable to allow seamless transitions between clips in a GSAP/ScrollTrigger scroll-driven website.

This structure gives you about 120 seconds of unique, high-quality footage, with each 10-second clip mapping naturally to a separate scroll section on the website.

7-Star Luxury Hotel Website Prompt

You are an award-winning Creative Director, Motion Designer, Three.js engineer, GSAP expert, and interaction designer.

Your task is to build an Awwwards / FWA quality website for an ultra-luxury 7-star hotel using three attached cinematic videos.

The website should not feel like a normal landing page.

It should feel like an interactive luxury experience where the user is physically walking through the hotel.

Every scroll should reveal a new architectural space.

The website must feel comparable to:

• Apple product launches
• Aman Resorts
• Bulgari Hotels
• Lexus Experience websites
• Rolls Royce configurator
• Cartier digital experiences
• Awwwards Site of the Day winners

==================================================

CORE CONCEPT

The three videos together form ONE continuous journey.

Do NOT play them as three separate videos.

Synchronize them into a single scroll timeline.

Scrolling forward should move the camera naturally through the hotel.

Scrolling backward should reverse perfectly.

There should never be visible jumps between sections.

The visitor should feel like they are controlling the camera.

==================================================

DESIGN STYLE

Ultra minimal.

Extremely premium.

Luxury hospitality.

Dark elegant aesthetic.

Warm architectural lighting.

Large typography.

Massive whitespace.

Beautiful cinematic transitions.

No cheap effects.

No glassmorphism.

No neumorphism.

No gradients unless physically believable.

Every pixel should feel intentional.

==================================================

SCROLL EXPERIENCE

The website should use scroll as the main interaction.

Each scroll movement advances the camera.

Every architectural reveal should trigger animations.

Examples:

Arrival
↓
Entrance doors open
↓
Lobby lighting brightens
↓
Hotel name appears
↓
Reception information fades in
↓
Camera continues
↓
Grand staircase
↓
Luxury dining
↓
Spa
↓
Gym
↓
Pool
↓
Private suites
↓
Balcony
↓
Sky lounge
↓
Final aerial reveal

Every reveal should feel cinematic.

==================================================

VIDEO SYNCHRONIZATION

Pin each video while it is playing.

Use frame-perfect scroll synchronization.

No autoplay.

No looping.

No sudden cuts.

The camera movement must exactly match scrolling.

When video 1 ends:
Smoothly transition into video 2.

When video 2 ends:
Smoothly transition into video 3.

Transitions should feel invisible.

==================================================

MOTION DESIGN

Every section should include advanced motion design.

Examples include:

Letters revealing individually
Split text animations
Headline masking
Paragraph stagger
Image clipping
Architectural line drawing
Light rays
Shadow movement
Reflection movement
Micro parallax
Floating particles
Depth-based animation
Perspective transforms
Smooth opacity transitions

Content should animate only when it reaches the correct position in the cinematic journey.

==================================================

3D EFFECTS

Enhance the videos using Three.js effects.

Examples:

Depth overlays
Floating architectural grids
Soft volumetric particles
Moving light beams
Subtle reflections
Animated shadows
Glass reflections
Luxury shimmer
Lens depth

Everything should be subtle.

Nothing should distract from the hotel.

==================================================

INTERFACE

Minimal navigation.

Top left:
Hotel logo

Top right:
Menu
Book Stay

Bottom:
Scroll progress indicator
Current section indicator
Section number
Animated scroll hint

Navigation should disappear while scrolling and reappear when scrolling stops.

==================================================

TYPOGRAPHY

Massive elegant headlines.

Luxury serif combined with modern sans-serif.

Perfect spacing.

Minimal copy.

Example:

Experience Timeless Luxury

Beyond Five Stars

Architecture Designed for Serenity

Every Stay Becomes a Memory

Where Light Meets Luxury

No long paragraphs.

==================================================

CONTENT PANELS

As the visitor reaches spaces:

Lobby
Restaurant
Pool
Spa
Gym
Suite
Balcony
Sky Lounge

Display floating content cards.

Cards should emerge naturally from architecture.

Never cover important visuals.

Cards dissolve away as scrolling continues.

==================================================

SCROLL PHYSICS

Scrolling must feel physical.

Heavy.

Luxury.

Smooth.

Use inertial scrolling.

Elastic easing.

Perfect interpolation.

No lag.

No jitter.

60 FPS minimum.

==================================================

VISUAL DETAILS

Every frame should include subtle luxury motion.

Examples:

Moving sunlight
Water reflections
Tree movement
Curtain movement
Pool ripples
Floating dust particles
Ambient fog
Light shafts
Soft bloom
Architectural reflections
Dynamic shadows

Everything should remain realistic.

==================================================

FINAL REVEAL

The final section should slowly rise above the rooftop.

The hotel fills the screen.

Background transitions into sunset.

The logo fades in.

A premium CTA appears:

Reserve Your Experience

The ending should feel emotional rather than promotional.

==================================================

TECHNICAL

React
Next.js
Three.js
GSAP ScrollTrigger
Lenis smooth scrolling
Framer Motion
GPU optimized
Lazy loading
Video preloading
Responsive
Performance optimized

Maintain 60 FPS.

==================================================

GOAL

Create a website that feels like a luxury cinematic journey rather than a website.

Every scroll should reveal another layer of the hotel.

The visitor should finish the experience feeling as though they have personally walked through one of the world's finest hotels.

The final result should be worthy of winning Awwwards Site of the Day.

You are an award-winning creative developer, motion designer, and UI/UX director who has won Awwwards Site of the Day.

Your task is to build an ultra-premium, scroll-driven cinematic fan experience website for "India's Got Latent Season 2".

IMPORTANT
This is NOT a normal landing page.

It should feel like watching a premium Netflix intro mixed with Apple product pages and Awwwards-winning immersive experiences.

The website should feel alive.

Every single scroll should reveal something new.

Every component should have purpose.

The experience should be smooth, cinematic, and highly interactive while remaining clean, readable, and performant.

────────────────────────

## Assets available

1. Hero banner image
2. Three cinematic background videos
3. Images of the five winners

Use these assets throughout the experience.

Never stretch images.

Use proper masking and blending.

Videos should autoplay, muted, loop, and pause naturally when off-screen.

────────────────────────

## Visual Identity

Primary Colors

Deep Black
#050505

Neon Yellow
#FFD400

Accent Red
#FF2B2B

Dark Gray
#111111

White
#F7F7F7

────────────────────────

Textures

Subtle film grain

CRT noise

Soft vignette

Light bloom

Very subtle chromatic aberration

Spotlight gradients

Industrial shadows

No excessive blur

────────────────────────

Typography

Massive bold headlines

Wide letter spacing

Uppercase

Comedy club marquee styling

Elegant sans-serif body copy

Large spacing

Minimal text

────────────────────────

Animation Style

Extremely smooth

Luxury motion

Apple-level easing

No gimmicky effects

Use

Framer Motion

GSAP

Lenis smooth scrolling

Intersection Observer

Motion values

GPU accelerated transforms

Everything should animate at 60 FPS.

────────────────────────

Website Structure

SECTION 1

Full-screen hero

Background:
Video 1

Overlay:
Dark gradient

Headline:

INDIA'S GOT LATENT

Huge typography

Subheadline

Season 2 Fan Experience

Animated CTA

↓

Scroll to Enter

Mouse indicator pulses.

Very subtle parallax.

As user scrolls

Hero text slowly fades

Video scales slightly

Spotlight follows scroll.

────────────────────────

SECTION 2

Background Video 2

Reveal experience

Floating glass panels

Panels slide upward.

Each panel reveals

Audition

Comedy

Chaos

Ratings

The cards slightly tilt with cursor.

Use perspective transforms.

Cards cast realistic shadows.

────────────────────────

SECTION 3

Interactive Latent Score

A huge split-flip card.

Front

RATE YOUR LATENT

User clicks.

Card flips.

Random score

0–100

Number rolls like a mechanical scoreboard.

Confetti only if score >90.

Button

Try Again

Everything uses premium easing.

────────────────────────

SECTION 4

Horizontal Scroll Story

Pinned section.

Vertical scroll controls horizontal movement.

Use GSAP ScrollTrigger.

Timeline

Auditions

Stand-up

Roasts

Internet Break

Comeback

Season 2

Each card reveals using

Depth

Lighting

Scale

Opacity

Rotation

Very cinematic.

────────────────────────

SECTION 5

Winner Gallery

Use the five winner images.

Large cinematic portraits.

Each portrait fills almost the entire viewport.

Hover

Portrait slowly zooms.

Background light changes.

Name slides upward.

Marquee appears.

WINNER

Camera flash effect.

────────────────────────

SECTION 6

Stats

Background Video 3

Huge animated counters.

45M+

Views

Episodes

Contestants

Judges

Everything counts upward.

Numbers glow.

Light pulses.

────────────────────────

SECTION 7

Comedy Club Marquee

Infinite marquee.

Moving continuously.

Text

NEXT AUDITION

COMEDY

LATENT

SEASON 2

STAND-UP

ROAST

Use alternating yellow and red.

────────────────────────

SECTION 8

Final CTA

Massive spotlight.

Dark background.

Large typography

Ready To Rate Your Latent?

Animated glowing button.

ENTER EXPERIENCE

Particles float upward.

Light rays slowly move.

Footer fades in.

────────────────────────

Micro Interactions

Buttons slightly compress.

Hover adds glow.

Cards tilt.

Text reveals letter-by-letter.

Cursor changes into spotlight.

Page transitions fade smoothly.

Videos fade seamlessly.

Every heading reveals using masking.

Images reveal using clip-path.

────────────────────────

Background Effects

Floating dust

Very subtle particles

Film grain

Soft noise

Light leaks

Spotlights

Moving gradients

No distracting effects.

────────────────────────

Performance

Code splitting

Lazy loading

Image optimization

Video preloading

Responsive

No layout shifts

GPU transforms only

────────────────────────

Tech Stack

React

Next.js

TypeScript

Tailwind CSS

Framer Motion

GSAP

Lenis

Lucide Icons

Motion One where useful

Use reusable components.

No inline styles.

No placeholder lorem ipsum.

Everything production-ready.

────────────────────────

Creative Direction

The site should feel like entering a secret underground comedy club before a live show begins.

The scroll should feel like a camera moving through a cinematic world.

Avoid clutter.

Use negative space.

Focus on premium typography.

Premium lighting.

Luxury motion.

Every scroll should feel rewarding.

The final result should be worthy of Awwwards Site of the Day and significantly more premium than a typical landing page.