Viktor Oddy

Claude Design is insane. ❤️‍🔥Just recorded a 18-min tutorial on how to build animated, award-winning websites with Claude Design + Opus 4.7!

Access ALL prompts for stunning animated websites in one click: motionsites.ai ## Prompt Build a fullscreen hero section for a site called "Orbis.Nft" using React, TypeScript, Tailwind CSS, and Vite. Recreate every detail below precisely. --- ### Video Background with Mouse-Scrub Effect Use this video as the fullscreen background: ``` d8j0ntlcm91z4.cloudfront.net/user_38xzZboKV… ``` The video does NOT autoplay. Instead, implement a **mouse-scrub interaction**: as the user moves their mouse left/right across the viewport, the video scrubs forward/backward through its timeline. Implementation details: - The video is paused on load at `currentTime = 0`. - Track the mouse's horizontal position as a normalized value (0 to 1) across `window.innerWidth`. - On each `mousemove`, compute the delta from the previous X position. Multiply that delta by a `SENSITIVITY` constant of `0.8` and by the video's `duration` to get a time offset. - Maintain a `targetTime` that accumulates these offsets, clamped between 0 and `duration`. - Use the video's `seeked` event to chain seeks: when a seek completes, if `targetTime` has diverged from `currentTime` by more than 0.01s, seek again. This prevents dropped seeks since the browser can only process one seek at a time. - Use a `useRef` to store mutable state (`targetTime`, `isSeeking` flag, `prevX`) to avoid re-renders. - The `

Claude code + GPT Image 2 = $10k 3D animated websites. Prompt below 👇

@VincentLogic lets go!

以前做个带视频背景的网页，前端要调3天CSS，现在AI 5分钟搞定。 我跑通了这套工作流： Pinterest找灵感 → Gemini洗掉文字并扩图 → Kling让植物微动效 → Mux生成稳定外链 → 丢给AI建站平台。 不用写一行代码，一个会呼吸的官网首页就出来了。 最爽的是，这套流程完全可复制。你换张图、改句提示词，就能接不同行业的单。 目前企业落地页外包报价，这种带动态视觉的至少 2000 起步。 你是想自己跑通流程接私单，还是先收藏等以后用到？

@hananyss cool result!

This weekend, I spent a couple hours to create an animated personal website. Here are the key skills I acquired: - Prompt engineering and editing using MotionSites - Animated image and video generation through Higgsfield AI - VPN routing to enable Google AI Studio functionality - Utilising the Google AI Studio app for website building through prompting - Recording the process with Screen Studio - I also have a skills.md document I've developed over the past weeks to generate all the copywriting to sound like me This was so much fun!

❤️🔥Access this prompt, as well as UNLIMITED access to all animated AI websites at: motionsites.ai

This hero section feels way too premium Built with AI in under 2 minutes. Preview grow.bolt.host

Access ALL prompts for stunning animated websites in one click: motionsites.ai **PROMPT:** Build a single-page hero section for a creative agency called "Axion Studio" using React, TypeScript, Tailwind CSS, lucide-react for icons, and the `shaders` npm package (`shaders/react`) for WebGL background effects. The page is a single full-viewport hero with no other sections. Use the system default sans-serif font (Tailwind's default). No Google Fonts needed. --- ## DEPENDENCIES ```json "lucide-react": "^0.344.0", "shaders": "^2.5.124" ``` Icons used from lucide-react: `ArrowRight`, `Clock`, `Menu`, `X`. Shader components used: `Shader`, `ChromaFlow`, `FilmGrain`, `FlutedGlass`, `Swirl` -- all imported from `shaders/react`. --- ## COLOR PALETTE - Page background: `#EFEFEF` - Primary accent (CTA buttons): `#F26522` with hover `#e05a1a` - Text: `gray-900` (near-black) for headings and body, `gray-600` for secondary text, `gray-500` for hover states - Nav background: white (`bg-white`) - Dark button backgrounds: `gray-900` with hover `gray-800` - Partner badge icon color: `#E8704E` - Badge shadow: `shadow-[0_2px_8px_rgba(0,0,0,0.08)]` with hover `shadow-[0_4px_16px_rgba(0,0,0,0.12)]` --- ## SHADER BACKGROUND (CRITICAL -- THIS IS THE HERO'S VISUAL IDENTITY) A `` component is positioned `absolute inset-0 z-10 pointer-events-none` over the entire hero container. It contains 4 layered effects in this exact order: 1. **Swirl** -- creates a subtle white marble texture base - `colorA="#ffffff"`, `colorB="#f0f0f0"`, `detail={1.7}` 2. **ChromaFlow** -- adds interactive orange color blobs that follow the cursor - `baseColor="#ffffff"`, `downColor="#ff5f03"`, `leftColor="#ff5f03"`, `momentum={13}`, `radius={3.5}`, `rightColor="#ff5f03"`, `upColor="#ff5f03"` 3. **FlutedGlass** -- adds a ribbed/frosted glass distortion overlay - `aberration={0.61}`, `angle={31}`, `frequency={8}`, `highlight={0.12}`, `highlightSoftness={0}`, `lightAngle={-90}`, `refraction={4}`, `shape="rounded"`, `softness={1}`, `speed={0.15}` 4. **FilmGrain** -- subtle analog grain texture - `strength={0.05}` --- ## LAYOUT STRUCTURE Everything is wrapped in a `<>` fragment. The main container is `min-h-screen bg-[#EFEFEF] relative overflow-hidden`. Max width is `max-w-[1440px] mx-auto` applied to inner containers (nav wrapper and hero content), NOT the outer wrapper. --- ## NAVIGATION BAR A pill-shaped white navbar pinned to the top. The nav wrapper has `relative p-2 sm:p-3 z-20 max-w-[1440px] mx-auto` (z-index changes to `z-[60]` when mobile menu is open). The `

Make your website look premium with this animated effect. Prompt below ↓

Access ALL prompts for stunning animated websites in one click: motionsites.ai

Full Tutorial

Claude Code + Seedence 2.0 + Motionsites Full Tutorial below ↓

Access ALL prompts for stunning animated websites in one click: motionsites.ai PROMPT TO RECREATE THIS LANDING PAGE --- **Create a React + Vite + Tailwind CSS v4 landing page for "WISA" -- a premium football/soccer organization website. The page has a scroll-driven video background, 3 content sections, and a glassmorphism footer. Use ONLY these dependencies: react 19, motion (framer-motion v12+), gsap, lucide-react, tailwindcss v4 with @tailwindcss/vite plugin. The design is dark, cinematic, minimal, with Manrope (sans) and JetBrains Mono (mono) fonts.** --- ### GLOBAL SETUP **package.json dependencies (exact):** ``` react, react-dom ^19.0.0 motion ^12.23.24 gsap ^3.14.2 lucide-react ^0.546.0 tailwindcss ^4.1.14 @tailwindcss/vite ^4.1.14 @vitejs/plugin-react ^5.0.4 vite ^6.2.0 ``` **vite.config.ts:** Use `@tailwindcss/vite` plugin + `@vitejs/plugin-react`. Alias `@` to project root. **index.html:** Standard HTML5. Include `` in head. **src/index.css -- EXACT:** ```css @import url('@400;500;600;700&family=Manrope:wght@300;400;500;600;700&display=swap" target="_blank" rel="nofollow noopener">fonts.googleapis.com/css2?family=Je…'); @import "tailwindcss"; @theme { --font-sans: "Manrope", ui-sans-serif, system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace; } @keyframes flyOutRight { 0% { transform: translateX(0); } 100% { transform: translateX(250%); } } @keyframes flyInLeft { 0% { transform: translateX(-250%); } 100% { transform: translateX(0); } } .animate-fly-out { animation: flyOutRight 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards; } .animate-fly-in { animation: flyInLeft 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards; } @keyframes flyOutUp { 0% { transform: translateY(0); } 100% { transform: translateY(-150%); } } @keyframes flyInUp { 0% { transform: translateY(150%); } 100% { transform: translateY(0); } } .animate-fly-out-up { animation: flyOutUp 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards; } .animate-fly-in-up { animation: flyInUp 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards; } ``` These define 4 keyframe animations: - `flyOutRight / flyInLeft` (250% translateX, 0.5s) -- for the arrow button hover - `flyOutUp / flyInUp` (150% translateY, 0.4s) -- for nav text hover - All use `cubic-bezier(0.4, 0, 0.2, 1)` easing with `forwards` fill mode --- ### COMPONENT: ScrollReveal (`src/components/ScrollReveal.tsx` + `ScrollReveal.css`) **ScrollReveal.css:** ```css .scroll-reveal { margin: 0; } .scroll-reveal-text { display: flex; flex-wrap: wrap; margin: 0; } .word { display: inline-block; white-space: pre; } ``` **ScrollReveal.tsx:** A GSAP-powered word-by-word scroll reveal component. - Props: `children` (string), `scrollContainerRef?`, `enableBlur` (default true), `baseOpacity` (default 0.1), `baseRotation` (default 3), `blurStrength` (default 4), `containerClassName`, `textClassName`, `rotationEnd` (default "bottom bottom"), `wordAnimationEnd` (default "bottom bottom") - Splits children text by whitespace into `` elements using `useMemo` - Three GSAP ScrollTrigger animations: 1. **Rotation**: Container rotates from `baseRotation` degrees to 0, origin "0% 50%", scrub true, trigger start "top bottom", end = `rotationEnd` 2. **Opacity**: Each `.word` fades from `baseOpacity` to 1, stagger 0.05, scrub true, trigger start "top bottom-=20%", end = `wordAnimationEnd` 3. **Blur** (if `enableBlur`): Each `.word` goes from `blur(blurStrength px)` to `blur(0px)`, same stagger/trigger as opacity - Renders: `

{splitText}

` - Cleanup: kills all ScrollTrigger instances on unmount --- ### COMPONENT: Reveal (inline in App.tsx) A motion.div wrapper for viewport-triggered fade-in: ```tsx function Reveal({ children, delay = 0, className = "" }) { return ( {children} ); } ``` Easing is `[0.16, 1, 0.3, 1]` (ease-out-expo style). --- ### COMPONENT: NavItem (inline in App.tsx) A hover-animated navigation link with vertical text fly animation: - Uses a `cycle` counter state (useState(0)) - On `mouseEnter` and `mouseLeave`: increment cycle - When `cycle === 0` (initial, no hover yet): render single `` with `text-white/64` and `group-hover:text-white transition-colors duration-300` - When `cycle > 0`: render TWO spans keyed by cycle -- one with `.animate-fly-out-up` (exits upward), one absolute-positioned with `.animate-fly-in-up` (enters from below) - Container: `` with `relative overflow-hidden group flex items-center justify-center py-1` --- ### MAIN APP (src/App.tsx) - ARCHITECTURE **Video URL constant:** ``` const VIDEO_URL = 'd8j0ntlcm91z4.cloudfront.net/user_38xzZboKV…'; ``` **State & Refs:** - `arrowCycle` (useState(0)) -- for arrow button hover animation, same pattern as NavItem - `videoRef` (useRef HTMLVideoElement) - `videoContainerRef` (useRef HTMLDivElement) - `isLoaded` (useState false) -- tracks when video is ready - `screen3Ref` (useRef HTMLDivElement) -- reference to footer section for scroll calculation - `scrollY` from motion's `useScroll()` - `headerY` = `useTransform(scrollY, [0, 500, 800], [0, 0, -150])` -- header slides up and out after scrolling past 500px --- ### SCROLL-DRIVEN VIDEO - CRITICAL IMPLEMENTATION **Effect 1: Video Loading** ```tsx useEffect(() => { const video = videoRef.current; if (!video) return; const handleCanPlay = () => setIsLoaded(true); video.addEventListener('canplaythrough', handleCanPlay); video.load(); return () => video.removeEventListener('canplaythrough', handleCanPlay); }, []); ``` **Effect 2: Scroll-to-Video-Scrub (with the `video.seeking` guard)** ```tsx useEffect(() => { if (!isLoaded) return; const video = videoRef.current; if (!video || !video.duration) return; const handleScroll = () => { if (!screen3Ref.current || video.seeking) return; // ^^ CRITICAL: "video.seeking" check tells the browser: "Only update the video // frame when you've completely finished rendering the previous one." // Without this guard, rapid scroll events queue up competing .currentTime assignments, // causing visible frame tearing, flickering, and dropped frames. The browser's // internal seek operation is asynchronous -- setting .currentTime while a previous // seek is still in progress gets silently ignored or causes visual glitches. // By checking video.seeking, we skip scroll events that arrive before the prior // frame has been decoded and painted, resulting in smooth, tear-free scrubbing. const rect = screen3Ref.current.getBoundingClientRect(); const absoluteTop = window.scrollY + rect.top; const stopScroll = Math.max(1, absoluteTop - (window.innerHeight * 0.2)); const scrollFraction = Math.max(0, Math.min(1, window.scrollY / stopScroll)); video.currentTime = scrollFraction * video.duration; }; window.addEventListener('scroll', handleScroll, { passive: true }); handleScroll(); return () => window.removeEventListener('scroll', handleScroll); }, [isLoaded]); ``` The scroll fraction maps from 0 (top of page) to 1 (when the footer section is 20% of viewport height from top). This means the video plays through its full duration as the user scrolls from top to the footer. --- ### SECTION 0: LOADING SCREEN Shown when `!isLoaded`. Fixed fullscreen, z-50, black bg, centered: - "LOADING" text: `text-[10px] font-mono tracking-widest mb-4 text-white/50` - Progress bar below: `w-64 h-[1px] bg-white/10 mt-8 overflow-hidden` with inner `h-full bg-white w-1/3 animate-pulse` --- ### LAYER STRUCTURE The entire page is layered: 1. **Fixed video background** (`fixed inset-0 z-0 bg-black`) -- video is absolutely centered with cover behavior using `transform: translate(-50%, -50%)`, `minWidth/minHeight: 100%`, `objectFit: cover` 2. **Fixed header** (z-20) -- animated with motion, slides out via `headerY` transform 3. **Scrollable content** (`relative z-10 pointer-events-none`) -- all sections flow here, with `pointer-events-auto` on interactive areas --- ### SECTION 1: HERO (Screen 1) Container: `w-[90%] mx-auto h-screen flex flex-col py-8 md:py-12 lg:py-16 pb-12` Inner main: `flex-1 w-full pointer-events-auto flex flex-col md:grid md:grid-cols-12 md:grid-rows-[1fr_auto] gap-y-8 md:gap-y-0 md:gap-x-8` **Grid layout (desktop 12-col, 2-row):** 1. **Heading** (bottom-left): `md:row-start-2 md:col-start-1 md:col-span-8 flex items-end` - H1: `text-[clamp(2.5rem,6vw,5rem)] leading-[1.05] font-medium tracking-tight text-white whitespace-nowrap` - Text: "Championing" `
` "The Pitch Of Legends" - Wrapped in `` 2. **Description paragraph** (center-right): `md:row-start-1 md:col-start-8 md:col-span-5 flex flex-col justify-center items-start md:items-end text-left md:text-right` - Paragraph: `text-[clamp(1rem,1.6vw,1.375rem)] text-white/64 leading-[1.3] font-normal max-w-[460px] relative -top-[90px]` - Text: "Advanced preparation and training of world-class football teams for leagues, tournaments, and trophies. **We bring the trophy closer to your cabinet.**" (bold part is `font-semibold text-white`) - Wrapped in `` 3. **CTA Button** (bottom-right): `md:row-start-2 md:col-start-8 md:col-span-5 flex items-end justify-start md:justify-end` - Two-part button with 1px gap (`flex items-stretch gap-1 group cursor-pointer`) - **Text part**: `px-8 py-5 bg-white/8 backdrop-blur-[80px]` -> on group-hover: `bg-white`. Text: "EXPLORE OUR STADIUMS" in `font-mono text-[12px] tracking-[-0.01em] text-white/90` -> hover: `text-black` - **Arrow part**: `px-6 bg-white/8 backdrop-blur-[80px]` -> hover: `bg-white`. Contains `` (lucide, w-5 h-5) with the same fly-out/fly-in animation pattern as NavItem but horizontal (`.animate-fly-out` / `.animate-fly-in`) - `arrowCycle` state drives the animation, same increment pattern on mouseEnter/mouseLeave - Wrapped in `` --- ### SECTION 1.5: SPACER `

` -- 200px empty gap --- ### SECTION 2: SCROLL-REVEAL TEXT + 3-COLUMN GRID Container: `w-[90%] mx-auto min-h-screen flex flex-col justify-center py-8 md:py-12 lg:py-16 pointer-events-auto` Inner: `max-w-[1200px] w-full` **ScrollReveal component usage:** ```tsx Complete Football Programs For Professional Player Development. We Build The Foundations For Next-Generation Strikers, Midfielders, And Star Defenders. ``` **3-Column Grid below** (`mt-24 grid grid-cols-1 md:grid-cols-12 gap-12 md:gap-8`): 1. **Col 1 (md:col-span-4)**: Globe SVG (71x43 wireframe globe) + WISA logo SVG (157x25, scaled to h-[18px] w-auto) side by side with `gap-4`. Below: tagline "Winning the future on pitch" in `text-[11px] font-mono tracking-widest text-white/60 uppercase leading-relaxed`. Wrapped in `` 2. **Col 2 (md:col-span-4)**: H3 "Performance Analytics / Facilities" (`text-xl font-medium text-white`), paragraph below (`text-[15px] text-white/80 leading-relaxed`). Wrapped in `` 3. **Col 3 (md:col-span-4)**: H3 "Matchday Premium / Fan Experiences!" same styling, paragraph same styling. Wrapped in `` --- ### SECTION 2.5: SPACER Another `h-[200px]` spacer --- ### SECTION 3: FOOTER (ref={screen3Ref}) This is the scroll endpoint for the video scrub calculation. Wrapped in `pointer-events-auto`. **Footer container**: `width: 90%, margin: 0 auto, paddingBottom: 64px` (inline styles) **Inner card** (glassmorphism): `backgroundColor: rgba(26, 26, 26, 0.6)`, `backdropFilter: blur(80px)`, `WebkitBackdropFilter: blur(80px)`, `border: 1px solid rgba(255, 255, 255, 0.1)`, `padding: clamp(32px, 4vw, 64px)` -- all inline styles **CTA Section** (top of footer card): - Flexbox wrap, `alignItems: flex-end`, `justifyContent: space-between`, `gap: 40px` - Bottom border: `1px solid rgba(255, 255, 255, 0.1)`, `paddingBottom: clamp(48px, 4vw, 80px)` - H2: "Ready To Score / Your Winning Season?" -- `fontSize: clamp(2rem, 4.5vw, 3.5rem)`, `fontWeight: 500`, `letterSpacing: -0.02em`, `lineHeight: 1.05` - Button: Same two-part pattern (text + arrow) but with white bg / black text, `padding: 20px 32px` and `20px 24px`. Text: "START YOUR SEASONS" in `font-mono, 12px, -0.01em tracking, bold 700` **Footer Links Grid** (`paddingTop: clamp(48px, 4vw, 64px)`): - CSS Grid: `repeat(auto-fit, minmax(160px, 1fr))`, `gap: clamp(32px, 3vw, 48px)` - 4 columns: 1. **Brand**: WISA logo SVG (h:14px) + tagline paragraph (13px, rgba white 0.4, maxWidth 220) 2. **Company**: Header "COMPANY" (10px mono, 0.1em tracking, rgba white 0.3) + links: About, Rosters, Press, Contact (14px, rgba white 0.6) 3. **Services**: Header "SERVICES" same style + links: Coaching, Training Camp, Fitness, Tryout 4. **Connect**: Header "CONNECT" same style + links: LinkedIn, X / Twitter, YouTube, Newsletter **Copyright Bar** (`marginTop: 56, paddingTop: 32, borderTop: 1px solid rgba white 0.1`): - Flex wrap space-between - Left: "2026 WISA. ALL RIGHTS RESERVED." (11px mono, rgba white 0.25, 0.1em tracking) - Right: PRIVACY | TERMS links (same styling, gap-24px) --- ### FIXED HEADER `` with: - `style={{ y: headerY }}` -- slides out after scroll 500-800px - `initial={{ opacity: 0, y: 20 }}`, `animate={{ opacity: 1 }}`, easing `[0.16, 1, 0.3, 1]`, duration 0.8 - Classes: `fixed top-0 left-1/2 -translate-x-1/2 z-20 w-[90%] flex items-center justify-between pointer-events-auto py-4 md:py-6 lg:py-8` **Left: WISA Logo SVG** (157x25, white, 4 paths spelling "WISA") **Right: Navigation bar** (`hidden lg:flex items-stretch bg-[#1A1A1A]/40 backdrop-blur-[80px]`): - Nav links container: `flex items-center justify-between px-6 font-mono text-xs tracking-[-0.01em] w-[480px]` - 5 NavItem components: LEAGUES, STADIUMS, TRAINING, COMPETITIONS, TICKETS - CTA button: `bg-white text-black px-6 py-5 font-mono text-xs leading-4 font-bold tracking-[-0.01em] hover:bg-gray-200 transition-colors w-[148px]` -- text "BUY MATCH PASS" --- ### SVG ASSETS **WISA Logo** (used 3 times -- header, section 2, footer): 157x25 viewBox, 4 white paths. The paths spell "W I S A" in a custom typeface. **Globe icon** (used in section 2 col 1): 71x43 viewBox, wireframe globe with horizontal/vertical/meridian lines, stroke white, no fill. Both SVGs are inlined directly. They are too detailed to describe -- copy the exact path data from the source code above. --- ### KEY DESIGN TOKENS SUMMARY | Token | Value | |-------|-------| | Font sans | Manrope 300-700 | | Font mono | JetBrains Mono 400-700 | | Background | Pure black (#000) | | Text primary | white | | Text secondary | white/64 (rgba 255,255,255,0.64) | | Text muted | white/60, white/50, white/40, white/25 | | Glass bg | #1A1A1A at 40% opacity | | Glass blur | 80px | | Glass border | rgba(255,255,255,0.1) | | Button bg | white/8 -> white on hover | | Spacing rhythm | 90% viewport width container, clamp-based responsive values | | Easing (motion) | [0.16, 1, 0.3, 1] | | Easing (CSS) | cubic-bezier(0.4, 0, 0.2, 1) |

GPT Image 2 + Seedance 2 + Claude Prompt below ↓

Access ALL prompts for stunning animated websites in one click: motionsites.ai

❤️‍🔥Gemini 3.5 Flash is so cracked at animated websites. Just Recorded a 25 min Tutorial on how to Design websites with Google AI Studio + Gemini 3.5 ($50k Website)

@NickRoelsdev exceptional execution

Cool Effect 😎😎 Thanks, @viktoroddy.

@abdu1xhi great result

hover over miles 👀 built with Claude code shoutout @viktoroddy — tutorials are unreal🕷️

okay so my entire design/AI tech stack: Gemini 3.5 Flash (coding) Figma AI (Design) Google AI Studio Bolt (apps + websites) Paper Shaders Motionsites AI (Prompts) Screen Studio GPT Image 2 (Images gen) Seedence 2.0 (Video gen) what are you reaching for these days?

Access ALL prompts for stunning animated websites in one click: motionsites.ai Third social media post --- **Prompt:** Create a 1:1 aspect-ratio social media post card (max-width 800px) centered on a black background page. It uses a looping background video with a fade-in/fade-out transition between loops. **Background Video:** - URL: `d8j0ntlcm91z4.cloudfront.net/user_38xzZboKV…` - Positioned absolute, horizontally centered with `left-1/2 -translate-x-1/2` - Scaled to 130% width and 130% height, aligned to top (top: 0%) - `object-cover object-top` - Autoplay, muted, looping with a custom fade transition: 500ms fade-in on load, starts fading out 0.55s before the video ends, then resets and fades back in after a 100ms pause **Container:** - `rounded-[2rem]`, `overflow-hidden`, `aspect-square`, `bg-black` - Content overlay uses `z-10`, flex column, items centered, justify-between, padding `p-6 md:p-10` **Fonts (Google Fonts):** - Heading: `Instrument Serif` (italic) - used for the main title and stat numbers - Body: `Barlow` (weights 300, 400, 500, 600) - used for all other text **Tailwind custom config:** - `fontFamily.heading`: `"Instrument Serif", serif` - `fontFamily.body`: `"Barlow", sans-serif` **Animations (Framer Motion):** - All elements use a shared `fadeIn` variant: `initial: { filter: 'blur(10px)', opacity: 0, y: 20 }`, `animate: { filter: 'blur(0px)', opacity: 1, y: 0 }`, `transition: { duration: 0.8, ease: 'easeOut' }` with staggered delays - The heading uses a custom `BlurText` component that splits text into words and animates each word individually with: `initial: { filter: 'blur(10px)', opacity: 0, y: 50 }`, animating to clear with a 0.7s duration, 100ms stagger per word, easing through blur(10px) -> blur(5px) -> blur(0px) and y: 50 -> -5 -> 0 **Glass Effect CSS (custom classes, not Tailwind):** `.liquid-glass`: - `background: rgba(255, 255, 255, 0.01)`, `background-blend-mode: luminosity` - `backdrop-filter: blur(4px)` - `box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1)` - `::before` pseudo-element with 1.4px padding, vertical gradient border (white 0.45 at top/bottom edges, 0.15 at 20%/80%, transparent in middle), masked with `-webkit-mask-composite: xor` / `mask-composite: exclude` `.liquid-glass-strong`: - Same structure but `backdrop-filter: blur(50px)` - `box-shadow: 4px 4px 4px rgba(0,0,0,0.05), inset 0 1px 1px rgba(255,255,255,0.15)` - Border gradient slightly stronger (0.5 at edges, 0.2 at 20%/80%) **Layout elements (top to bottom):** 1. **Top Badge** (delay 0.4s): A `liquid-glass` pill containing a white "New" tag (white bg, black text, `text-xs font-semibold rounded-full`) and text "Maiden Crewed Voyage to Mars Arrives 2026" (`text-xs md:text-sm text-white/90`) 2. **Center Title**: "Venture Past Our Sky Across the Universe" using BlurText component, `text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-heading italic text-white leading-[0.85] max-w-lg tracking-[-3px]`, flex-wrapped and centered 3. **CTA Buttons** (delay 1.1s): Two buttons side by side with `gap-4 mt-2`: - "Start Your Voyage" with ArrowUpRight icon - `liquid-glass-strong rounded-full px-5 py-2.5 text-sm font-medium text-white` - "View Liftoff" with filled Play icon - plain text, `text-sm text-white font-medium` 4. **Bottom Stats** (delay 1.3s): Two side-by-side `liquid-glass rounded-[1.25rem] p-4 flex-1` cards in a `max-w-md` flex row: - Left card: Clock SVG icon (circle + polyline), "34.5 Min" in `font-heading italic text-3xl md:text-4xl tracking-[-1px]`, subtitle "Average Watch Time" in `text-[10px] md:text-xs text-white/70 font-light` - Right card: Globe SVG icon (circle + meridian path), "2.8B+" same heading style, subtitle "Users Across the Globe" 5. **Partners section** (delay 1.4s): A `liquid-glass` pill reading "Collaborating with top aerospace pioneers" (`text-[10px] md:text-xs`), followed by 5 brand names in a row: Aeon, Vela, Apex, Orbit, Zeno - each in `font-heading italic text-white text-lg md:text-2xl tracking-tight` with `gap-6 md:gap-10` **Tech stack:** React, TypeScript, Vite, Tailwind CSS, Framer Motion, Lucide React icons. **Dependencies:** `framer-motion`, `lucide-react`, `react`, `react-dom` --- That prompt contains everything needed to reproduce this post identically.

Claude Design: less than 5 minutes, 4 social media posts ❤️‍🔥 Great for ideation and brainstorming. Here are 4 prompts that can do the same for you ↓

Access ALL prompts for stunning animated websites in one click: motionsites.ai Second social media post: --- **Prompt:** Create a 1:1 aspect ratio social media post (not a website — no navbar, no page scroll). Use React with Tailwind CSS and `lucide-react` for icons. The font is Inter (sans-serif). **Layout:** - Full page is `min-h-screen bg-black` with the card centered using flexbox and `p-4` padding. - The card container is `max-w-[600px]`, `aspect-square`, `overflow-hidden`, `rounded-2xl`, positioned relative. **Background video:** - URL: `d8j0ntlcm91z4.cloudfront.net/user_38xzZboKV…` - Absolutely positioned, fills the container with `object-cover`. - `objectPosition: 'center 60%'` to shift the video focal point 10% downward. - Attributes: `autoPlay`, `loop`, `muted`, `playsInline`. **Gradient overlay:** - Absolutely positioned div on top of video: `bg-gradient-to-b from-black/30 via-transparent to-black/50`. **Content layer (z-20, relative, flex column, full height):** 1. **Top-left brand name:** - `px-8 pt-8` - Text: "velorix" — white, `text-lg`, `font-semibold`, `tracking-tight`. 2. **Center content area:** - `flex-1 flex flex-col items-center justify-center text-center px-8` - Shifted upward with `marginTop: '-20%'`. - **Headline (h1):** - Text: "Where precision finds its edge" / "and vision rewrites" / "what comes next" (3 lines separated by `
`). - `text-white font-normal leading-[1.15] tracking-tight` - `fontSize: 'clamp(1.5rem, 5vw, 2.2rem)'` - **Subtext (p):** - `mt-5 text-white/55 text-xs sm:text-sm leading-relaxed max-w-[280px]` - Font: `'Courier New', Courier, monospace`, `letterSpacing: '0.01em'` - Text: "a seamless bridge — where raw ambition and machine clarity converge as one" - **CTA button:** - `mt-7`, white background (`#ffffff`), `rounded-full`, `text-black text-sm font-medium` - `px-5 py-2.5`, `flex items-center gap-2.5` - `transition-all duration-300 hover:opacity-80` - Text: "Watch it unfold" - Right arrow icon (`ArrowRight` from lucide-react, `size={15}`) that translates `x-0.5` on hover with `duration-200`. 3. **Bottom bar:** - `px-8 pb-8 flex items-center justify-between` - Left text: "Coming Soon" — `text-white/30 text-[10px] tracking-widest uppercase` - Right text: "2026" — same styling. **No other elements.** No navbar, no mobile menu, no scroll. Just this single square card centered on a black page.