Morph Prompts

<inputs> Ask me for: 8 to 12 UI states I want the shape to become (e.g. button, loader, player, slider, toggle, tabs, chart, command palette, toast), pure black and white or one accent color, and a royalty-free song around 120 BPM (e.g. Mixkit, free for commercial use). </inputs> <direction> Dribbble-level UI motion. One shape, never cut: every state is the same element morphing its size, radius and color while its content swaps with a short blur. A cursor drives every change with real clicks and drags. Light warm-gray canvas, black and white components, one clean UI font (Geist). Springs everywhere, a tiny overshoot at most. The camera zooms so each state fills the frame. The last frame is the first frame, so it loops. Banned: bouncy easing, particle bursts, glows, gradients on UI chrome, mismatched icon strokes, dead time, anything that looks like a template. </direction> <structure> 120 BPM, 7 bars, something happens on every beat. Button → loader → check → dynamic island → music player with a play/pause morph → scrub the progress bar → it becomes a volume slider that stretches when dragged past max → a toggle flips on the beat → the knob becomes a liquid tab indicator → the tabs open into a chart that draws itself, with a tooltip on hover → it collapses into ⌘K → type to filter → enter → toast → back to the button. </structure> <build> 1. One HTML file, square 1440x1440. Every style is computed from time inside seek(t): no CSS transitions, no timers, no state carried between frames. 2. Springs are closed-form step responses. A value that changes target many times is the sum of one spring per change, so it stays a pure function of time. 3. The tab indicator's two edges ride different springs, so the leading edge stretches ahead of the trailing one. Same trick for the toggle knob. 4. Drags are direct manipulation: while the cursor is held, the value is computed from its position. On release it springs back from wherever it was. 5. Analyze the song with numpy for the beat grid and start on a downbeat. Place every UI sound by its measured peak. 6. Render with Playwright: 4 subframes per frame, blended with ffmpeg tmix for motion blur at 60fps. 7. Render one frame per beat before the full render. Fix anything off the grid, cramped or hard to read. </build> <gotchas> Never put will-change on anything the camera scales or the text renders blurry. Text that swaps inside a morphing container needs its own enter and exit timing or it overlaps. Make the last frame identical to the first, cursor position and speed included, or the loop stutters. </gotchas> <start> Ask me for the inputs, then show me the state list on the beat grid before you write any code. </start>

Build a production-ready, responsive landing page using React, Tailwind CSS v4, and Vite. The design should feature a high-end, dark-mode "glassmorphism" aesthetic with specific purple/pink gradients. 1. Tech Stack & Libraries: Use hls.js for video streaming. Use motion/react (formerly Framer Motion) for animations. Use react-use-measure for sizing logic. Use clsx and tailwind-merge for class management. Use lucide-react for standard icons (if needed), but I will provide custom SVG paths for specific UI elements. 2. Global Styling: Background: Dark/Black (#010101). Primary Gradient: A diagonal gradient used for accents: from-[#FA93FA] via-[#C967E8] to-[#983AD6]. Typography: Modern sans-serif, center-aligned hero text. 3. Hero Section Components: Announcement Pill: A pill-shaped top badge. Background: Semi-transparent dark (bg-[rgba(28,27,36,0.15)]) with a subtle border. Icon: A "Zap" icon inside a gradient-filled box with a glow effect. Text: "Used by founders. Loved by devs." in light grey. Main Headline (H1): Large text (responsive sizing: 48px mobile to 80px desktop). Text: "Your Vision" on line 1, "Our Digital Reality." on line 2. Style: Text should have a gradient fill (White to Purple/Pink). Subheadline: Text: "We turn bold ideas into modern designs that don’t just look amazing, they grow your business fast." Color: text-white/80. CTA Button: "Book a 15-min call" text. Rounded full button with a white background and black text. Includes a circle icon with an arrow inside, styled with the primary purple gradient. Outer border wrapper with a glass effect. 4. Hero Video Integration (Critical Details): Source: HLS Stream URL: https://customer-cbeadsgr09pnsezs.cloudflarestream.com/697945ca6b876878dba3b23fbd2f1561/manifest/video.m3u8 Fallback: If HLS fails, fallback to this MP4: /_videos/v1/f0c78f536d5f21a047fb7792723a36f9d647daa1 Implementation: Do NOT use react-player. Use a native <video> tag with a custom useEffect hook implementation of hls.js. Styling: Blend Mode: Use mix-blend-screen so the video black background blends into the page. Positioning: The video should be at the bottom of the hero. Apply a negative top margin (-mt-[150px]) so it overlaps behind the text. Z-Index: Ensure the text content is z-20 (above) and video is z-10 (below). Layout: The video must be 100% width (w-full), auto height, and stretch edge-to-edge without being cropped (do not use object-contain or fixed heights). Overlay: Add a gradient fade (from-[#010101] via-transparent to-[#010101]) over the video container. 5. Logo Cloud Section (Animated): Place this section immediately below the video. Background: Semi-transparent glass (bg-black/20 backdrop-blur-sm) with a top border (border-white/5). Layout: Desktop: "Powering the best teams" text on the left, separated by a vertical divider. Animated logo slider on the right. Mobile: Stacked vertically. Animation: Create an InfiniteSlider component using motion/react that scrolls logos horizontally forever. Logos: Use these SVG URLs (OpenAI, Nvidia, GitHub, etc.) and apply brightness-0 invert to make them white. https://html.tailus.io/blocks/customers/openai.svg https://html.tailus.io/blocks/customers/nvidia.svg (Include others similarly) Please assemble these into a cohesive Hero.tsx, App.tsx, and components/ui/infinite-slider.tsx structure.

UI/UX web design for an [insert company], dark mode, minimalist, premium corporate tech aesthetic. Abstract 3D flowing fluid background shapes, glowing luminescent gradients in deep blue, purple, and emerald green. Card-based layout with subtle glassmorphism, clean sans-serif typography, high contrast white text, and generous negative space. High fidelity, 8k, Dribbble style, sleek and futuristic.

# Header A full-viewport travel landing hero for the **Triverra** brand, featuring a slow-motion looping background video, a floating glassmorphic navbar, a large centered headline with a premium dual-arrow hover reveal on the CTA buttons, and a subtle ambient float animation applied to the entire content column. ## Tech stack - React ("use client") - framer-motion (motion, AnimatePresence) - lucide-react (Menu, X icons) - Tailwind CSS for all styling ## Fonts & global styles Use the **Gantari** font family for all text. Load it via: ```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=Gantari:wght@400;500;600;700&display=swap" rel="stylesheet" /> ``` Apply `font-family: 'Gantari', sans-serif;` to the root element of the section. All original code uses a `font-gantari` utility — resolve this to the Gantari Google font above. ## Section container The root is a `<main>` with classes: `relative w-full h-screen min-h-[650px] overflow-hidden flex flex-col justify-between select-none`. Text color throughout is white on top of the dark video. ## Structure, section by section 1. **Background video layer** — an absolutely positioned `div` (`absolute inset-0 -z-10 w-full h-full overflow-hidden`) holding a `<video>` with classes `w-full h-full object-cover scale-[1.02]`, `autoPlay loop muted playsInline`. On mount, set `videoRef.current.playbackRate = 0.8` for a slow cinematic feel. Source: the URL in Assets. 2. **Ambient float wrapper** — a `motion.div` (`w-full h-full flex flex-col relative z-20`) wrapping ALL content that gently drifts: `animate={{ y: [0,-8,0], rotate: [0,0.5,0] }}`, `transition={{ duration: 8, ease: 'easeInOut', repeat: Infinity }}`. 3. **Navbar** (`motion.header`, `w-full pt-[16px] px-6 md:px-[48px] min-[1440px]:px-[64px]`, enters with `initial opacity:0 y:-20`, `animate opacity:1 y:0`, `duration 0.8 ease easeOut`). Inner container is `flex items-center justify-between w-full gap-6 lg:gap-[48px]`. - **Brand logo** (left): an `<img>` at `h-[22px] md:h-[24px] lg:h-[34px] w-auto object-contain` linking to `#`, hover opacity 0.9. - **Desktop menu pill** (`hidden lg:flex`): a glass pill `py-2 px-4 gap-6 rounded-full bg-white/10 backdrop-blur-md border border-white/5`. Menu items: Home, Services, Tours, Destinations, Contacts. Each is a button, `text-[16px] tracking-[-0.2px]`. Active item is `text-white font-semibold`, inactive `text-white/80 font-normal hover:text-white`. The active item shows a shared-layout animated dot (`layoutId="activeDot"`) — a `w-1 h-1 rounded-full bg-white` positioned `absolute -bottom-1 left-1/2 -translate-x-1/2`, transition `type:'spring' stiffness:300 damping:30`. - **Register button** (desktop, `hidden lg:block`): `py-[10px] px-[18px] rounded-full border border-white/60 bg-transparent text-white font-semibold text-[16px] tracking-[-0.2px]`, on hover border becomes fully white (rgba(255,255,255,1)). Label: "Register Now". - **Mobile trigger** (`block lg:hidden`): a circular button `p-2.5 rounded-full bg-white/10 hover:bg-white/20 border border-white/15 text-white` showing the lucide `Menu` (or `X` when open) at size 20. 4. **Spacer 1x** — `div` with `flexGrow: 1, minHeight: 24px`. 5. **Hero content** — centered column `max-w-[580px]` text-center. - **Title badge** (p, delay 0.2 duration 0.8, from opacity:0 y:15): text "Your AI Travel Companion - Plan Smarter. Explore Deeper." at `text-[14px] md:text-[18px] font-normal tracking-[-0.4px] md:tracking-[-0.72px] opacity-90 mb-1 lg:mb-2`. - **Headline** (h1, delay 0.4 duration 1.0 ease `[0.16,1,0.3,1]`, from opacity:0 y:25): two stacked spans "Dream deeper." and "Travel farther." at `text-[42px] sm:text-[60px] lg:text-[80px] font-normal leading-[100%] tracking-[-2px] sm:tracking-[-4px] lg:tracking-[-6px] mb-8 lg:mb-[40px]`, flex-col centered. - **Button row** (delay 0.6 duration 0.8): `flex flex-col sm:flex-row items-center gap-[12px] mb-6 lg:mb-[18px]`. - **Primary button** "Build My Trip Free": `w-[240px] sm:w-auto py-[14px] px-[16px] rounded-[12px] bg-white text-[#0C120C] font-medium text-[18px] sm:text-[20px] tracking-[-0.8px] sm:tracking-[-1px] shadow-lg`. - **Secondary button** "See How It Works": same sizing but `border border-white/40 bg-[#0C120C]/10 text-white backdrop-blur-sm`, hover border rgba(255,255,255,0.7). - Both buttons use TWO signature hover effects (see Animations): a vertical text-swap slide and a dual-arrow cross-fade. - **Trusted stat** (p, delay 0.8 duration 0.8): "8370+" (bold white) then " trips planned • Rated " then "4.9" (bold white) then " by travelers worldwide" at `text-white/80 text-[14px] md:text-[16px] tracking-[-0.4px]`. 6. **Spacer 3x** — `div` with `flexGrow: 3, minHeight: 72px`. 7. **Footer description** (motion.footer, delay 1.0 duration 1.0, from opacity:0 y:20): `w-full pb-[32px] px-6`, inner `max-w-[560px] text-center`, paragraph: "Triverra uses advanced AI to create travel plans tailored to your preferences, budget, and pace. Say goodbye to many tabs and decision overload. Enjoy one smart itinerary — ready for your trip." at `text-white/90 text-[14px] md:text-[18px] leading-[140%] tracking-[-0.4px] md:tracking-[-0.72px]`. 8. **Mobile drawer** — wrapped in `AnimatePresence`; when open, a fixed overlay `fixed inset-0 z-50 bg-white/[0.01] backdrop-blur-md lg:hidden flex flex-col pt-[76px] pb-12 px-6 overflow-y-auto`, entering `opacity:0 y:-20` -> `opacity:1 y:0`, exit reverse, `duration 0.4 ease easeInOut`. A close `X` button top-right (`top-[16px] right-6`). Menu list `flex flex-col items-center gap-8 mt-[40px]`, each item `text-[22px] tracking-[-0.4px]` (active white bold / inactive text-white/60). A "Register Now" pill button below with `mt-[64px] w-full max-w-[280px]`. ## Assets (every URL) - Background video: `https://cdn.jiro.build/Jahid/Random/Triverra/All%20Images/Header%20BG%20travel.mp4` - Brand logo SVG: `https://cdn.jiro.build/Jahid/Random/Triverra/All%20SVG/brand%20logo%20triverra.svg` - Arrow right SVG: `https://cdn.jiro.build/Jahid/Random/Triverra/All%20SVG/arrow-right.svg` - Arrow up-right SVG: `https://cdn.jiro.build/Jahid/Random/Triverra/All%20SVG/arrow-up-right.svg` All images use `referrerPolicy="no-referrer"`. ## Animations - **Ambient float**: entire content column drifts `y: [0,-8,0]` and `rotate: [0,0.5,0]`, 8s easeInOut infinite. - **Entrance stagger**: navbar (0), badge (0.2s), headline (0.4s), buttons (0.6s), stat (0.8s), footer (1.0s), each fading up. - **Active menu dot**: framer-motion shared layout via `layoutId="activeDot"`, spring stiffness 300 damping 30. - **Button text-swap on hover** — a masked vertical slide. The label appears twice stacked; on hover the inner column translates up 50%: ```jsx <span className="relative inline-block overflow-hidden h-[24px] sm:h-[28px] leading-none"> <span className="flex flex-col transition-transform duration-500 ease-[cubic-bezier(0.16,1,0.3,1)]" style={{ transform: isHovered ? 'translateY(-50%)' : 'translateY(0%)' }} > <span className="h-[24px] sm:h-[28px] flex items-center justify-center leading-none">Build My Trip Free</span> <span className="h-[24px] sm:h-[28px] flex items-center justify-center leading-none">Build My Trip Free</span> </span> </span> ``` - **Dual-arrow cross-fade on hover** — an 18x18 masked box holding two absolutely-positioned arrow SVGs. The right arrow fades/slides out to top-right; the up-right arrow fades/slides in, duration 700ms `cubic-bezier(0.16,1,0.3,1)`: ```jsx <div className="relative w-[18px] h-[18px] shrink-0 overflow-hidden"> <img src="...arrow-right.svg" className="absolute inset-0 w-full h-full object-contain transition-all duration-700 ease-[cubic-bezier(0.16,1,0.3,1)]" style={{ opacity: isHovered ? 0 : 1, transform: isHovered ? 'translate(6px,-6px) scale(0.8)' : 'translate(0,0) scale(1)' }} /> <img src="...arrow-up-right.svg" className="absolute inset-0 w-full h-full object-contain transition-all duration-700 ease-[cubic-bezier(0.16,1,0.3,1)]" style={{ opacity: isHovered ? 1 : 0, transform: isHovered ? 'translate(0,0) scale(1)' : 'translate(-6px,6px) scale(0.8)' }} /> </div> ``` - Primary button arrows are recolored dark green via CSS filter: `invert(7%) sepia(19%) saturate(1441%) hue-rotate(80deg) brightness(96%) contrast(96%)`. - Secondary button arrows are recolored white via CSS filter: `brightness(0) invert(1)`. ## Responsive behavior - **lg (1024px+)**: desktop glass menu pill and Register button visible; mobile trigger hidden. Headline scales up to `80px` with `-6px` tracking; horizontal padding grows to `48px`, then `64px` at 1440px. - **Below lg**: desktop menu and Register button hidden; hamburger trigger shown; tapping opens the full-screen backdrop-blur drawer with a 64px gap before the Register pill. - **sm (640px+)**: buttons switch from full-width stacked (`w-[240px]`, flex-col) to auto-width row; headline `60px`, button text `20px`. - **Base/mobile**: headline `42px`, buttons full-width stacked, smaller type throughout. ## Key design principles - Everything sits over a slow (0.8x) looping travel video with a subtle 1.02 scale. - Glassmorphism (white/10 fills, backdrop-blur, faint white borders) unifies nav, buttons, and drawer. - Tight negative letter-spacing on large type for a modern editorial feel. - The whole content column breathes via a slow ambient float. - Premium micro-interactions: masked text swap + dual-arrow cross-fade on both CTAs. ## Common mistakes to avoid - Do not use backtick template literals in the code — use string concatenation. - Do not omit `playbackRate = 0.8` or the video will play too fast. - Do not forget `key` on AnimatePresence children. - Keep the two stacked label copies identical in the text-swap effect. - Preserve the exact CSS filters so arrow colors match each button. ## Page title Triverra — Your AI Travel Companion ## Integration (build-safety — do not skip) - Add this section as a **new** component file with a unique name. Don't edit or overwrite any existing file except to add its import and render it. - Render it **after** all existing sections; keep every previously built section exactly as-is — never replace or remove them. - If no project exists, create a minimal React + Tailwind app; if one exists, use it as-is — don't re-scaffold or change the Tailwind/build config or version. - Keep it self-contained: scope its fonts and any resets to this section; never set global `body`/`html`/`*` styles or a global font. - Install only the libraries this section names.