Viktor Oddy

Nano Banana + VEO 3 + Lovable Prompt below ↓

Access ALL prompts for stunning animated websites in one click: motionsites.ai Prompt to recreate this design: Create a landing page hero section with the following exact specifications: Background: Full-screen background video covering the entire viewport with object-cover, autoplaying, looping, muted, inline playback, and preloaded Video URL: d8j0ntlcm91z4.cloudfront.net/user_38xzZboKV… A subtle bg-black/5 overlay on top of the video Fonts: Import: @0;1&family=Barlow:wght@300;400;500;600&display=swap" target="_blank" rel="nofollow noopener">fonts.googleapis.com/css2?family=In… However, the actual font-family used is the system font stack: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', system-ui, sans-serif for both heading and body Color Tokens (HSL, in CSS variables): --background: 213 45% 67% --foreground: 0 0% 100% (white) --heading: 205 52% 5% (near-black) --description: 180 9% 33% (muted dark gray) --primary: 0 0% 100% (white) --primary-foreground: 0 0% 0% (black) --radius: 9999px (fully rounded) Navbar (fixed, top 30px): Fixed position, top-[30px], full width, z-50, horizontal padding px-8 lg:px-16, flex row with space-between Left: Logo text "Railroad.ai" in heading font, text-2xl, white, tight tracking Center: A liquid-glass pill with rounded-full containing 4 nav links: "Home", "Voyages", "Worlds", "Innovation" — each text-sm font-medium text-foreground/90, hidden on mobile (hidden md:flex) Right: "Get Started" button with ArrowUpRight icon, bg-primary text-primary-foreground rounded-full px-4 py-2 text-sm font-medium Hero Content (centered, vertically): Container: flex-1 flex flex-col items-center justify-center text-center px-4 pt-24 pb-[200px] Badge: A liquid-glass rounded-full pill with bg-black/10, containing text "10K+ already subscribed" in text-sm text-foreground/90 px-3 font-body Heading: "Focus in a Constantly Distracted World" — uses a custom BlurText component that splits text into words and animates each word individually with framer-motion: blur(10px) → blur(0px), opacity 0→1, y 50→0, duration 0.35s, staggered delay of 100ms per word. Styled as text-6xl md:text-7xl lg:text-[5.5rem] font-heading text-heading leading-[0.85] tracking-[-4px] max-w-3xl Subheading: "Cut through the noise of notifications, endless feeds, and constant interruptions. Learn how to reclaim your attention and do meaningful work that truly matters." — framer-motion animation: blur(10px)→blur(0px), opacity 0→1, y 20→0, duration 0.6s, delay 0.8s. Styled as text-[calc(1rem+3px)] md:text-[calc(1.125rem+3px)] text-description max-w-2xl leading-tight tracking-[-0.05em] Email Input: framer-motion animated (same blur/fade pattern, delay 1.1s). A liquid-glass rounded-full container with inline styles: backdropFilter: blur(100px), background: rgba(0,0,0,0.25), padding p-1.5 pl-6. Inside: a transparent with placeholder "Enter your email" and a white rounded-full "Join Waitlist" button with ArrowUpRight icon (bg-primary text-primary-foreground rounded-full px-5 py-2.5 text-sm font-medium) Liquid Glass CSS (critical): .liquid-glass { background: rgba(255,255,255,0.01); background-blend-mode: luminosity; 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; } Tech Stack: React, Vite, TypeScript, Tailwind CSS, framer-motion, lucide-react (ArrowUpRight icon), shadcn/ui design tokens.

Maybe animate the BG to something like this? Here’s the exact prompt to recreate this ↓

Access ALL prompts for stunning animated websites in one click: motionsites.ai Build a modern, futuristic landing page using React + Vite + TypeScript + Tailwind CSS. Use lucide-react for icons. The page has 3 sections: a Hero, an About section, and an Insights section. The overall page background is black (bg-black). No custom fonts -- use the Tailwind default (system sans-serif). SECTION 1: HERO (full viewport height, light background) The hero wrapper is a relative container. On mobile it has min-height: 100vh. On desktop (md: breakpoint) it has height: 100vh and min-height: auto. It has overflow: hidden. Background layers (stacked with z-index): z-index 0: A solid background fill #FBFDFD covering the entire wrapper (absolute inset-0). z-index 1: A background video positioned absolute right-0 top-0 bottom-0. On mobile it is full width with opacity-30. On desktop it is w-[55%] with full opacity. The video element has object-cover object-top. The video URL is: d8j0ntlcm91z4.cloudfront.net/user_38xzZboKV… (autoPlay, loop, muted, playsInline). The video container and video both have a CSS class video-plus-darker with mix-blend-mode: normal !important. z-index 2: The content layer. This is a relative div with min-h-screen md:h-screen flex flex-col. It contains the Navbar and HeroSection. Navbar (inside content layer): relative z-10, flex row, justify-between, padding px-5 py-4 md:px-12 md:py-6 Left side: Logo image (/image.png, height h-7 md:h-8), followed by hidden-on-mobile nav links: Home, About, Services, Contact. Links are text-sm text-neutral-500 hover:text-neutral-900. Gap between logo and links: gap-12. Right side: A search input (hidden on mobile, shown on desktop). Rounded-full, w-72, placeholder "I am looking for...", with a Search icon from lucide-react positioned absolute right inside. Border border-neutral-300, text text-neutral-600. Mobile: A hamburger button (Menu icon from lucide-react) in a 40px circle with border-neutral-300. When toggled, a dropdown shows the nav links vertically and a full-width search input. HeroSection (inside content layer, flex-1): relative z-10 flex-1 flex flex-col justify-between with padding px-5 pt-8 pb-20 md:px-12 md:pt-16 md:pb-36 Top: Label "Futuristic" -- text-xs font-medium tracking-[0.3em] text-neutral-500 uppercase Main heading area: Flex row with a small "05" number on the left (text-sm text-neutral-400 mt-2 md:mt-4), then the heading: text-[2.75rem] md:text-[5.5rem] leading-[0.95] font-light tracking-tight text-neutral-900 reading "NEW DIGITAL" (line break) "UNIVERSE". Below the heading: a "Get Started" button (bg-neutral-900 text-white text-sm font-medium rounded, px-6 py-3 md:px-8 md:py-3.5) and a "Contact Us" text link. Middle stat: "47.2%" with "Reality" label underneath. The stat group uses a custom CSS class hero-stat-group that on desktop has margin-right: 20% and justify-center. On mobile, margin-right: 0 and justify-start. Bottom bar: Flex col on mobile, flex row on desktop with justify-between. Left side: "Trusted by Clients" label with 4 overlapping avatar circles (Pexels photos: 415829, 1222271, 1239291, 2379004 at w=100) using -space-x-2, each w-8 h-8 md:w-9 md:h-9 rounded-full border-2 border-neutral-100 object-cover, followed by "20+" text. Right side: A link icon (lucide Link) in a w-10 h-10 md:w-12 md:h-12 circle with border-neutral-300, next to a description paragraph "In this futuristic realm, users can explore hyper-realistic virtual environments, interact with AI-driven avatars." (text-xs md:text-sm text-neutral-500 max-w-[200px] md:max-w-sm). This group uses custom class hero-description-group which on desktop has margin-right: 50%. Diagonal Section Divider (between Hero and About): The SectionDivider is positioned absolute bottom-0 left-0 w-full with z-index: 3, inside the hero wrapper. Contains an SVG with viewBox="0 0 1440 120", preserveAspectRatio="none", height h-[60px] md:h-[120px]. The SVG has a single polygon: points="0,0 0,120 1440,120 1440,80 920,80 680,0" filled with #0F0F0F. This creates a diagonal cut from the left side going down to the black About section. SECTION 2: ABOUT (dark background #0F0F0F) Full-width section, backgroundColor: '#0F0F0F' Two-column layout on desktop (lg:flex-row), stacked on mobile. Min-height 600px (lg: 700px). Left column: A video that fills the space (object-cover mix-blend-lighten). Video URL: d8j0ntlcm91z4.cloudfront.net/user_38xzZboKV… (autoPlay, loop, muted, playsInline). On mobile the video area is h-[400px]. Right column: Padding px-8 py-16 md:px-16 lg:px-20 xl:px-28, vertically centered content with max-width max-w-lg: Label: "About Us" (text-xs font-medium tracking-[0.3em] text-neutral-500 uppercase, mb-8 md:mb-10) Heading: "THE DIGITAL FRONTIER" (text-4xl md:text-5xl lg:text-6xl xl:text-7xl font-light tracking-tight text-white leading-[1.05], mb-10 md:mb-12) Three pill tags: "Digital", "Reality", "Next" -- px-5 py-2 rounded-full border border-neutral-700 text-sm text-neutral-300 hover:border-neutral-500 Paragraph: "Step into The Digital Frontier, where the boundaries between reality and virtual innovation disappear. This is the next era of immersive technology." (text-sm md:text-base text-neutral-400 leading-relaxed max-w-md) Actions: "Learn More" button (bg-neutral-800 text-white text-sm font-medium rounded px-7 py-3.5 hover:bg-neutral-700) and a "Watch a Video" link with a Play icon (lucide Play) inside a w-10 h-10 bordered circle. SECTION 3: INSIGHTS (dark background #0F0F0F, tabbed content) Same backgroundColor: '#0F0F0F'. Padding px-8 md:px-16 lg:px-20 xl:px-28 pt-24 pb-32. Large italic heading: "LIMITLESS POSSIBILITIES WITH NEOVISION" (text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-[5rem] font-light italic tracking-tight text-white leading-[1.05] max-w-5xl, mb-20 md:mb-28). Below: a flex layout (col on mobile, row on desktop). Left: Tab buttons (vertical list) for 3 tabs: "Innovation", "Technology", "Experience". Active tab is text-white font-medium, inactive is text-neutral-500 hover:text-neutral-300. Width lg:w-[160px] xl:w-[200px]. Right: Content area with an image and text side by side on desktop. Image: lg:w-[420px] xl:w-[480px] aspect-[4/3] rounded-2xl overflow-hidden. Images are local files /Mask_group.jpg, /Mask_group-1.jpg, /Mask_group-2.jpg for the 3 tabs respectively. Text side: Title (text-2xl md:text-3xl font-light text-white leading-snug max-w-sm), description (text-sm md:text-base text-neutral-400 leading-relaxed max-w-sm), "Learn More" underlined link (text-sm text-white font-medium underline underline-offset-4). At the bottom: date and author separated by a border-t border-neutral-800. Tab data: Innovation: "How VR is Transforming Our Digital World" / "Virtual Reality (VR) is no longer a concept of the future..." / 08 February 2025 / Henry Leonardo Technology: "The Rise of Spatial Computing in Everyday Life" / "Spatial computing is bridging the gap..." / 15 March 2025 / Sarah Mitchell Experience: "Designing Immersive Worlds That Feel Real" / "From haptic feedback to photorealistic rendering..." / 22 April 2025 / James Park CUSTOM CSS (index.css): .video-plus-darker { mix-blend-mode: normal !important; } .app-hero-wrapper { min-height: 100vh; overflow: hidden; } @media (min-width: 768px) { .app-hero-wrapper { min-height: auto; height: 100vh; } } .hero-description-group { margin-right: 0; } .hero-stat-group { margin-right: 0; } @media (min-width: 768px) { .hero-description-group { margin-right: 50%; } .hero-stat-group { margin-right: 20%; } } KEY DETAILS: Tech stack: React 18, Vite, TypeScript, Tailwind CSS 3, lucide-react for all icons No custom fonts -- default Tailwind sans-serif stack Color palette: White hero (#FBFDFD), dark sections (#0F0F0F), neutral grays from Tailwind for text The diagonal divider SVG polygon creates an angled transition from the light hero to the dark about section. It is positioned absolutely at the bottom of the hero wrapper. Both videos are autoPlay, loop, muted, playsInline The hero section has pb-20 md:pb-36 bottom padding to prevent the diagonal divider from overlapping the "Trusted by Clients" content The SectionDivider component is rendered inside the hero wrapper div (not between wrapper and AboutSection) Logo image at /image.png in the public folder Insight images at /Mask_group.jpg, /Mask_group-1.jpg, /Mask_group-2.jpg in the public folder

Google AntiGravity prompt: Animated Futuristic Portfolio Landing Page And anyone can achieve the same result. Prompt 👇

Access ALL prompts from the video for stunning animated heros in one click: motionsites.ai Prompt: Build a modern, futuristic landing page using React + Vite + TypeScript + Tailwind CSS. Use lucide-react for icons. The page has 3 sections: a Hero, an About section, and an Insights section. The overall page background is black (bg-black). No custom fonts -- use the Tailwind default (system sans-serif). SECTION 1: HERO (full viewport height, light background) The hero wrapper is a relative container. On mobile it has min-height: 100vh. On desktop (md: breakpoint) it has height: 100vh and min-height: auto. It has overflow: hidden. Background layers (stacked with z-index): z-index 0: A solid background fill #FBFDFD covering the entire wrapper (absolute inset-0). z-index 1: A background video positioned absolute right-0 top-0 bottom-0. On mobile it is full width with opacity-30. On desktop it is w-[55%] with full opacity. The video element has object-cover object-top. The video URL is: d8j0ntlcm91z4.cloudfront.net/user_38xzZboKV… (autoPlay, loop, muted, playsInline). The video container and video both have a CSS class video-plus-darker with mix-blend-mode: normal !important. z-index 2: The content layer. This is a relative div with min-h-screen md:h-screen flex flex-col. It contains the Navbar and HeroSection. Navbar (inside content layer): relative z-10, flex row, justify-between, padding px-5 py-4 md:px-12 md:py-6 Left side: Logo image (/image.png, height h-7 md:h-8), followed by hidden-on-mobile nav links: Home, About, Services, Contact. Links are text-sm text-neutral-500 hover:text-neutral-900. Gap between logo and links: gap-12. Right side: A search input (hidden on mobile, shown on desktop). Rounded-full, w-72, placeholder "I am looking for...", with a Search icon from lucide-react positioned absolute right inside. Border border-neutral-300, text text-neutral-600. Mobile: A hamburger button (Menu icon from lucide-react) in a 40px circle with border-neutral-300. When toggled, a dropdown shows the nav links vertically and a full-width search input. HeroSection (inside content layer, flex-1): relative z-10 flex-1 flex flex-col justify-between with padding px-5 pt-8 pb-20 md:px-12 md:pt-16 md:pb-36 Top: Label "Futuristic" -- text-xs font-medium tracking-[0.3em] text-neutral-500 uppercase Main heading area: Flex row with a small "05" number on the left (text-sm text-neutral-400 mt-2 md:mt-4), then the heading: text-[2.75rem] md:text-[5.5rem] leading-[0.95] font-light tracking-tight text-neutral-900 reading "NEW DIGITAL" (line break) "UNIVERSE". Below the heading: a "Get Started" button (bg-neutral-900 text-white text-sm font-medium rounded, px-6 py-3 md:px-8 md:py-3.5) and a "Contact Us" text link. Middle stat: "47.2%" with "Reality" label underneath. The stat group uses a custom CSS class hero-stat-group that on desktop has margin-right: 20% and justify-center. On mobile, margin-right: 0 and justify-start. Bottom bar: Flex col on mobile, flex row on desktop with justify-between. Left side: "Trusted by Clients" label with 4 overlapping avatar circles (Pexels photos: 415829, 1222271, 1239291, 2379004 at w=100) using -space-x-2, each w-8 h-8 md:w-9 md:h-9 rounded-full border-2 border-neutral-100 object-cover, followed by "20+" text. Right side: A link icon (lucide Link) in a w-10 h-10 md:w-12 md:h-12 circle with border-neutral-300, next to a description paragraph "In this futuristic realm, users can explore hyper-realistic virtual environments, interact with AI-driven avatars." (text-xs md:text-sm text-neutral-500 max-w-[200px] md:max-w-sm). This group uses custom class hero-description-group which on desktop has margin-right: 50%. Diagonal Section Divider (between Hero and About): The SectionDivider is positioned absolute bottom-0 left-0 w-full with z-index: 3, inside the hero wrapper. Contains an SVG with viewBox="0 0 1440 120", preserveAspectRatio="none", height h-[60px] md:h-[120px]. The SVG has a single polygon: points="0,0 0,120 1440,120 1440,80 920,80 680,0" filled with #0F0F0F. This creates a diagonal cut from the left side going down to the black About section. SECTION 2: ABOUT (dark background #0F0F0F) Full-width section, backgroundColor: '#0F0F0F' Two-column layout on desktop (lg:flex-row), stacked on mobile. Min-height 600px (lg: 700px). Left column: A video that fills the space (object-cover mix-blend-lighten). Video URL: d8j0ntlcm91z4.cloudfront.net/user_38xzZboKV… (autoPlay, loop, muted, playsInline). On mobile the video area is h-[400px]. Right column: Padding px-8 py-16 md:px-16 lg:px-20 xl:px-28, vertically centered content with max-width max-w-lg: Label: "About Us" (text-xs font-medium tracking-[0.3em] text-neutral-500 uppercase, mb-8 md:mb-10) Heading: "THE DIGITAL FRONTIER" (text-4xl md:text-5xl lg:text-6xl xl:text-7xl font-light tracking-tight text-white leading-[1.05], mb-10 md:mb-12) Three pill tags: "Digital", "Reality", "Next" -- px-5 py-2 rounded-full border border-neutral-700 text-sm text-neutral-300 hover:border-neutral-500 Paragraph: "Step into The Digital Frontier, where the boundaries between reality and virtual innovation disappear. This is the next era of immersive technology." (text-sm md:text-base text-neutral-400 leading-relaxed max-w-md) Actions: "Learn More" button (bg-neutral-800 text-white text-sm font-medium rounded px-7 py-3.5 hover:bg-neutral-700) and a "Watch a Video" link with a Play icon (lucide Play) inside a w-10 h-10 bordered circle. SECTION 3: INSIGHTS (dark background #0F0F0F, tabbed content) Same backgroundColor: '#0F0F0F'. Padding px-8 md:px-16 lg:px-20 xl:px-28 pt-24 pb-32. Large italic heading: "LIMITLESS POSSIBILITIES WITH NEOVISION" (text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-[5rem] font-light italic tracking-tight text-white leading-[1.05] max-w-5xl, mb-20 md:mb-28). Below: a flex layout (col on mobile, row on desktop). Left: Tab buttons (vertical list) for 3 tabs: "Innovation", "Technology", "Experience". Active tab is text-white font-medium, inactive is text-neutral-500 hover:text-neutral-300. Width lg:w-[160px] xl:w-[200px]. Right: Content area with an image and text side by side on desktop. Image: lg:w-[420px] xl:w-[480px] aspect-[4/3] rounded-2xl overflow-hidden. Images are local files /Mask_group.jpg, /Mask_group-1.jpg, /Mask_group-2.jpg for the 3 tabs respectively. Text side: Title (text-2xl md:text-3xl font-light text-white leading-snug max-w-sm), description (text-sm md:text-base text-neutral-400 leading-relaxed max-w-sm), "Learn More" underlined link (text-sm text-white font-medium underline underline-offset-4). At the bottom: date and author separated by a border-t border-neutral-800. Tab data: Innovation: "How VR is Transforming Our Digital World" / "Virtual Reality (VR) is no longer a concept of the future..." / 08 February 2025 / Henry Leonardo Technology: "The Rise of Spatial Computing in Everyday Life" / "Spatial computing is bridging the gap..." / 15 March 2025 / Sarah Mitchell Experience: "Designing Immersive Worlds That Feel Real" / "From haptic feedback to photorealistic rendering..." / 22 April 2025 / James Park CUSTOM CSS (index.css): .video-plus-darker { mix-blend-mode: normal !important; } .app-hero-wrapper { min-height: 100vh; overflow: hidden; } @media (min-width: 768px) { .app-hero-wrapper { min-height: auto; height: 100vh; } } .hero-description-group { margin-right: 0; } .hero-stat-group { margin-right: 0; } @media (min-width: 768px) { .hero-description-group { margin-right: 50%; } .hero-stat-group { margin-right: 20%; } } KEY DETAILS: Tech stack: React 18, Vite, TypeScript, Tailwind CSS 3, lucide-react for all icons No custom fonts -- default Tailwind sans-serif stack Color palette: White hero (#FBFDFD), dark sections (#0F0F0F), neutral grays from Tailwind for text The diagonal divider SVG polygon creates an angled transition from the light hero to the dark about section. It is positioned absolutely at the bottom of the hero wrapper. Both videos are autoPlay, loop, muted, playsInline The hero section has pb-20 md:pb-36 bottom padding to prevent the diagonal divider from overlapping the "Trusted by Clients" content The SectionDivider component is rendered inside the hero wrapper div (not between wrapper and AboutSection) Logo image at /image.png in the public folder Insight images at /Mask_group.jpg, /Mask_group-1.jpg, /Mask_group-2.jpg in the public folder

Access ALL prompts from the video for stunning animated heros in one click: motionsites.ai Prompt: Create a dark SaaS landing page hero section with the following exact specifications: Font: Geist Sans (400, 500, 600, 700 weights) via @fontsource/geist-sans Color System (HSL): Background: 260 87% 3% (near-black with slight purple) Foreground: 40 6% 95% (warm off-white) Primary/Accent: 121 95% 76% (#87FB89 green) Primary foreground: 0 0% 5% (dark text on green buttons) Hero heading: 40 10% 96% Hero sub: 40 6% 82% Secondary/Muted: 240 4% 16% Border: 240 4% 20% Background Video: Full-screen background video covering the entire section (navbar through social proof). URL: d8j0ntlcm91z4.cloudfront.net/user_38xzZboKV… Set to autoPlay, loop, muted, playsInline with object-cover and absolute inset-0. Liquid Glass Effect (reusable utility class .liquid-glass): background: rgba(255, 255, 255, 0.01); background-blend-mode: luminosity; backdrop-filter: blur(4px); border: none; box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1); overflow: hidden; Plus a ::before pseudo-element with a vertical gradient border using mask-composite: 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; Layout (top to bottom, all centered over the video): Navbar — Centered liquid-glass pill (rounded-3xl, max-w-[850px]) containing: Logo: Small rounded-lg gradient square with a crosshair SVG icon + "APEX" text (xl, semibold) Nav items: "Features" (with chevron-down), "Solutions", "Plans", "Learning" (with chevron-down) — text-base, foreground/90 opacity CTA button: "Sign Up" — green primary, rounded-xl, small size Announcement Badge — liquid-glass rounded-full pill: "Nova+ Launched!" text + "Explore" chip with ChevronRight icon, nested pill with bg-white/5 Heading — text-4xl sm:text-6xl lg:text-7xl, font-semibold, tracking-tight, leading-[1.05], max-w-5xl: Accelerate Your Revenue Growth Now Subheading — text-lg, max-w-md, opacity-80, hero-sub color: "Drive your funnel forward with clever workflows, analytics, and seamless lead management." Two CTA Buttons side by side: "Start Free Right Now" — green primary, rounded-full, px-6 py-3 "Schedule a Consult" — liquid-glass, rounded-full, px-6 py-3, hover:bg-white/5 Social Proof Marquee at the bottom — "Relied on by brands across the globe" label (foreground/50, text-sm) on the left, then a horizontally scrolling marquee of brand names: Vortex, Nimbus, Prysma, Cirrus, Kynder, Halcyn. Each has a small liquid-glass rounded-lg icon square with the first letter + the brand name (text-base, font-semibold). Duplicated array for seamless loop. Animation: translateX(0%) → translateX(-50%) over 20s linear infinite. Button Variants (class-variance-authority): 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

❤️‍🔥Claude Opus 4.6 + Nano Banana You can literally get this EXACT design and build almost anything these days Prompt ↓

@Lovable Remix link - lovable.dev/projects/6a34d… Want my complete 30+ Lessons AI Design System, 30+ ready-to-copy one-shot looped videos, Exclusive tutorials + source files for every example I post? Grab everything at designrocket.io 🔥

I recorded myself building this entire thing from scratch with @Lovable Remix link ↓

here is the remix link lovable.dev/projects/6a34d… Want my complete 30+ Lessons AI Design System, 30+ ready-to-copy one-shot looped videos, Exclusive tutorials + source files for every example I post? Grab everything at designrocket.io 🔥

❤️‍🔥 AntiGravity built me a $10,000 beautiful website using only AI. Today, I recorded myself creating the entire thing from scratch in 25 minutes. You'll learn how to: • Turn Dribbble screenshots into premium designs instantly • Generate characters and looping Kling video animations • Build fully responsive websites in Google AI Studio + AntiGravity • Add smooth transitions, loaders & mobile optimization • Deploy live to your own custom domain After 10 years as a designer. This is exactly how I create high-quality websites (no AI slop). Comment “DESIGNROCKET” and I’ll DM you the remix link to the final result.

@koraycreates sent over here is the remix link lovable.dev/projects/6a34d…

@viktoroddy DESIGNROCKET

@ashokva sent over

@viktoroddy DESIGNROCKET