Prompt de vídeo Personalizables
Landing page cinematográfica sobre viajes espaciales
Una web de una sola página sobre viajes espaciales, con dos secciones a pantalla completa, vídeos de fondo en bucle que se fusionan entre sí con JavaScript sencillo y paneles de cristal líquido esmerilado. El estilo es cinematográfico, con una atmósfera de espacio profundo, una tipografía editorial limpia y animaciones de entrada suaves.
- Modelo
- Seedance
- Tipo
- Vídeo
- Compartido
- 22 abr 2026
- Me gusta en X
- 609
Texto del titularNombres de sociosTexto de la insignia
Prompt de imagen
4,309 caracteresBuild Prompt: Cinematic Space-Travel Landing Page. Build a single-page landing site with two full-height sections (Hero + Capabilities), both using looping background videos with custom JS crossfade, a shared liquid-glass design system, and Framer Motion entrance animations. Stack (CDN, pinned): React app mounted on #root, components as <script type="text/babel"> exporting via window.X = X, Framer Motion as window.Motion = window.FramerMotion, body bg #000. Fonts (Google Fonts): Instrument Serif (italic) + Barlow (300/400/500/600); Tailwind font-heading → 'Instrument Serif' (always italic), font-body → 'Barlow', border radius DEFAULT: "9999px". Liquid-glass utilities (exact CSS): .liquid-glass (rgba(255,255,255,0.01), background-blend-mode luminosity, backdrop-filter blur(4px), inset 0 1px 1px rgba(255,255,255,0.1), a 1.4px ::before gradient border masked via mask-composite exclude, stops 0.45/0.15/0/0/0.15/0.45) and .liquid-glass-strong (same but blur(50px); box-shadow 4px 4px 4px rgba(0,0,0,0.05), inset 0 1px 1px rgba(255,255,255,0.15); stops 0.5/0.2/0/0/0.2/0.5). FadingVideo component (custom JS crossfade, no CSS transitions): <video autoPlay muted playsInline preload="auto"> starting at opacity 0; FADE_MS = 500, FADE_OUT_LEAD = 0.55s; fadeTo(target, duration) uses requestAnimationFrame, reads current opacity, cancels the previous rAF; on loadeddata: opacity 0, play(), fadeTo(1); on timeupdate: if not already fading out and duration - currentTime <= 0.55 and > 0, flip the ref and fadeTo(0); on ended: opacity 0, after 100ms reset currentTime = 0, play(), clear fadingOutRef, fadeTo(1); loop attribute OFF (manual looping via ended); cleanup on unmount. Section 1 — Hero (full viewport, black bg): background video at 120% width/height, top-aligned, horizontally centered (absolute left-1/2 top-0 -translate-x-1/2 object-cover object-top z-0), no overlay; z-10 layer holds Navbar → Hero content (flex-1, centered) → Partners. Navbar (fixed top-4, px-8 / lg:px-16, z-50): left 48×48 liquid-glass circle with italic serif lowercase "a"; center (desktop) liquid-glass pill with links Home, Voyages, Worlds, Innovation, Plan Launch + white pill button "Claim a Spot" + ArrowUpRight; right 48×48 invisible spacer. Hero content (pt-24 px-4), animated with Framer Motion initial {filter: blur(10px), opacity: 0, y: 20}, easeOut. Badge (delay 0.4s): liquid-glass pill with white chip "New" + text "Maiden Crewed Voyage to Mars Arrives 2026". Headline — BlurText word-by-word: "Venture Past Our Sky Across the Universe". Subheading (delay 0.8s): "Discover the universe in ways once unimaginable. Our pioneering vessels and breakthrough engineering bring deep-space exploration within reach—secure and extraordinary." CTAs (delay 1.1s): primary liquid-glass-strong "Start Your Voyage" + ArrowUpRight; secondary text link "View Liftoff" + Play. Stats row (delay 1.3s): two liquid-glass cards p-5 w-[220px], white outline SVG 28×28 (clock / globe), Instrument Serif italic number "34.5 Min" / "2.8B+", label "Average Videos Watch Time" / "Users Across the Globe". Partners (delay 1.4s): liquid-glass chip "Collaborating with top aerospace pioneers globally"; 5 Instrument Serif italic names Aeon · Vela · Apex · Orbit · Zeno. BlurText component: IntersectionObserver at 10% visibility, each word a motion.span from blur(10px)/opacity 0/y 50 to blur(0)/opacity 1/y 0, duration 0.7, stagger (i*100)/1000s, marginRight 0.28em, parent flex wrap centered. Section 2 — Capabilities (min-h-screen, black bg): full-bleed video (absolute inset-0 w-full h-full object-cover z-0), same FadingVideo, no overlay; content (z-10 px-8 md:px-16 lg:px-20 pt-24 pb-10). Header: kicker "// Capabilities"; heading font-heading italic "Production" / "evolved". Three cards (grid md:grid-cols-3): each liquid-glass rounded-[1.25rem] p-6 min-h-[360px]; top 44×44 liquid-glass square with white Material icon (image / movie / lightbulb) + 4 pill tags; bottom italic title "AI Scenery" / "Batch Production" / "Smart Lighting" with the matching description copy. Lucide icons ArrowUpRight and Play. Notes: all text white, no green, no gradient backgrounds; no CSS transitions on videos (rAF-driven fades only); videos full-bleed with no dark overlay. Recreate every element, style, animation, video URL, and font exactly.
Cómo usarlo
Se compartió como prompt de Seedance, así que está escrito para un modelo de vídeo y produce un resultado con movimiento en lugar de una imagen fija. Los detalles técnicos definen el aspecto: la utilidad de cristal líquido, el tiempo del fundido entre vídeos y la entrada del titular palabra por palabra con desenfoque. Cambia el titular, los nombres de marca y los de los socios para personalizar la web, y mantén los ajustes del fundido de vídeo para que los bucles sigan siendo continuos.
El creador compartió el prompt solo de la imagen de origen; el vídeo se creó a partir de esa imagen.
Compartido públicamente en X el 22 abr 2026. Todo el mérito de este prompt y de su resultado es de su creador. ¿Es tuyo? Pide que se actualice o se elimine.
