Prompt βίντεο Προσαρμόσιμα
Κώδικας hero ενότητας με γυάλινη navbar και φόντο βίντεο
Μια ενότητα hero πλήρους οθόνης φτιαγμένη σε React, με βίντεο φόντου που επαναλαμβάνεται, γυάλινη μπάρα πλοήγησης με θολό εφέ, τίτλο που εμφανίζεται γράμμα προς γράμμα και μια κάψουλα με το σλόγκαν στο κάτω μέρος. Το αποτέλεσμα μοιάζει με κομψό, σύγχρονο άνοιγμα μιας landing page.
- Μοντέλο
- Seedance
- Τύπος
- Βίντεο
- Αναλογία διαστάσεων
- 3:2
- Κοινοποιήθηκε
- 23 Απρ 2026
- Likes στο X
- 1,149
Όνομα μάρκαςΚείμενο τίτλουΚείμενο σλόγκαν
Prompt εικόνας
4,456 χαρακτήρεςCreate a full-screen hero section in React + TypeScript + Tailwind CSS (Vite) with a fullscreen background video, a floating "liquid glass" navigation bar, an animated character-by-character heading, and a bottom liquid-glass tagline pill. Stack / Setup: React 18 + TypeScript + Vite Tailwind CSS (default config, no theme extensions) No extra libraries (no framer-motion, no icon libs needed for this section) Font: 'Helvetica Neue', Helvetica, Arial, sans-serif, weight 400, antialiased Global CSS (src/index.css): @tailwind base; @tailwind components; @tailwind utilities; body { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .liquid-glass { background: rgba(0, 0, 0, 0.4); background-blend-mode: luminosity; backdrop-filter: blur(4px); -webkit-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.3) 0%, rgba(255,255,255,0.1) 20%, rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%, rgba(255,255,255,0.1) 80%, rgba(255,255,255,0.3) 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; } Components: AnimatedHeading — splits text into characters, each <span> is inline-block with transition-all duration-500. Starts at opacity: 0, translateX(-18px) and animates to opacity: 1, translateX(0) with a per-character transitionDelay of lineIndex * line.length * charDelay + charIndex * charDelay ms. Supports multi-line via \n split, each line wrapped in <div className="flex flex-wrap justify-center">. Starts after delay ms via setTimeout. Preserves spaces using \u00A0. FadeIn — wraps children in a div with transition-opacity, toggles opacity 0 -> 1 after delay ms, transitionDuration configurable (default 800ms). Hero layout (App.tsx): Root: min-h-screen bg-black text-white relative Background <video autoPlay loop muted playsInline> absolutely positioned, inset-0 w-full h-full object-cover, with source: (type video/mp4) Content wrapper: relative z-10 min-h-screen Navbar (absolutely positioned top, padding px-6 md:px-12 lg:px-16 pt-6): a .liquid-glass rounded-xl bar, flex items-center justify-between px-4 py-2: Left: <div className="text-2xl font-semibold tracking-tight">VEX</div> Center (hidden on mobile, md:flex gap-8 text-sm): links "Story", "Investing", "Building", "Advisory" with hover:text-gray-300 transition-colors Right: white pill button "Start a Chat" — bg-white text-black px-6 py-2 rounded-lg text-sm font-medium hover:bg-gray-100 Center block (min-h-screen px-6 md:px-12 lg:px-16 flex flex-col items-center justify-center text-center, inner w-full max-w-4xl flex flex-col items-center): AnimatedHeading with text "Shaping tomorrow\nwith vision and action.", classes text-4xl md:text-5xl lg:text-6xl xl:text-7xl font-normal mb-4, inline style letterSpacing: '-0.04em', delay={200}, charDelay={30} FadeIn delay={800} duration={1000}: <p className="text-base md:text-lg text-gray-300 mb-5">We back visionaries and craft ventures that define what comes next.</p> FadeIn delay={1200} duration={1000}: two buttons in flex flex-wrap gap-4 justify-center: Primary: "Start a Chat" — bg-white text-black px-8 py-3 rounded-lg font-medium hover:bg-gray-100 transition-colors Secondary: "Explore Now" — liquid-glass border border-white/20 text-white px-8 py-3 rounded-lg font-medium hover:bg-white hover:text-black transition-colors Bottom tagline (absolutely positioned, bottom-0 left-0 right-0 px-6 md:px-12 lg:px-16 pb-12 lg:pb-16 flex justify-center): FadeIn delay={1400} duration={1000} wrapping a .liquid-glass border border-white/20 px-6 py-3 rounded-xl containing <p className="text-lg md:text-xl lg:text-2xl font-light">Investing. Building. Advisory.</p> Animation timeline: 200ms: heading characters start animating left-to-right, 30ms per character, 500ms each 800ms: subheading fades in over 1000ms 1200ms: CTA buttons fade in over 1000ms 1400ms: bottom tagline fades in over 1000ms Responsive breakpoints: mobile-first, nav links hidden below md, heading scales from text-4xl up to xl:text-7xl.
Πώς να το χρησιμοποιήσετε
Διατηρήστε τον σταδιακό χρονισμό και το στυλ liquid glass, καθώς αυτές οι λεπτομέρειες δημιουργούν την αίσθηση των στρωμάτων και της αιώρησης. Αλλάξτε το όνομα της μάρκας VEX, τους συνδέσμους πλοήγησης και τα κείμενα του τίτλου και του σλόγκαν ώστε να ταιριάζουν στην εταιρεία ή το προϊόν σας. Κοινοποιήθηκε ως prompt για Seedance, οπότε το αποτέλεσμα είναι ένα κλιπ κίνησης που μπορείτε να χρησιμοποιήσετε ως αναφορά ή παρουσίαση για τη διάταξη.
Ο δημιουργός κοινοποίησε το prompt μόνο για την εικόνα-πηγή· το βίντεο δημιουργήθηκε από αυτή την εικόνα.
Κοινοποιήθηκε δημόσια στο X στις 23 Απρ 2026. Όλα τα credits για αυτό το prompt και το αποτέλεσμά του ανήκουν στον δημιουργό του. Είναι δικό σας; Ζητήστε ενημέρωση ή αφαίρεση.
