Boosted
A speculative bio-design lab building "living architecture." Organic, bioluminescent, futurist-natural.Vibe in one line: Nature's source code, rendered as interface — soft glow, slowgrowth, and forms that breathe.2A. Asset Generation PromptsHero background video URl - [https://maklruruvcxgrrjunysc.supabase.co/storage/v1/object/public/prompt-assets/Fungal_mycelium_growing_in_soil_202606161604.mp4]:About-section image (LAB_PORTRAIT):Wide interior photo of a minimalist bio-laboratory greenhouse at dusk, rows of glassincubation chambers glowing faintly from within with cyan bioluminescent organisms,soft volumetric light through mist, muted earthy color palette (deep green, charcoal,warm amber), architectural photography, no people visible, calm and quiet mood.Projects gallery images (PROJECT_01 – PROJECT_04):Studio macro photograph of an organic architectural material sample — a curved panelgrown from mycelium and embedded with faint glowing bio-luminescent veins, resting on adark concrete surface, single soft top-down light source, deep green and cyan accentglow, minimal, high detail, square crop, no text. (Vary the form: panel / latticecolumn / woven mesh / curved shell.)Process timeline images (STAGE_01 – STAGE_04):Sequential macro photographs of the same mycelium structure at four growth stages —from a small glowing spore cluster (stage 1) to a fully formed architectural panel(stage 4) — consistent dark background, consistent soft cyan bioluminescent lighting,documentary/scientific photography style, no text.Footer background image (FOOTER_BLOOM):Close-up of a single large bioluminescent flower-like organism opening in slow motionagainst pure black, petals glowing in gradient from deep cyan to soft magenta, gentleparticle spores drifting upward, cinematic macro, seamless loop, 12 seconds, no text.2B. Website Build PromptBuild a multi-section scroll-based website for a speculative bio-design lab calledTERRAFORM, using React + TypeScript + Vite + Tailwind CSS, Framer Motion, andlucide-react.Global setup:Fonts: "Fraunces" (italic, 400/500) for headlines — gives an organic, almosthand-grown serif quality; "Inter" (300/400/500) for body/labels.Colors: --background: 150 25% 6% (near-black with a green undertone),--foreground: 0 0% 96%, --muted-foreground: 150 10% 65%, --accent: 180 80% 60%(bioluminescent cyan), --accent-2: 320 70% 65% (soft magenta, used sparingly).Global ambiance: a fixed, very subtle full-screen radial gradient(radial-gradient(circle at 50% 50%, hsla(180,80%,60%,0.04), transparent 70%)) thatslowly pulses scale 1 → 1.05 → 1 over 10s, ease-in-out, infinite — the pageitself feels like it's breathing.Section 1 — Hero (h-screen relative):HERO_VIDEO as absolute inset-0 object-cover z-0, very subtle dark vignette only atedges (shadow-[inset_0_0_200px_rgba(0,0,0,0.6)]), no full overlay.Nav (absolute top-0 inset-x-0 z-10 flex justify-between px-8 py-6): left "TERRAFORM"in font-fraunces italic text-xl. Right (hidden md:flex gap-8 text-sm text-white/70): "Philosophy", "Projects", "Process", "Contact" —hover:text-[hsl(180,80%,60%)].Centered headline (font-fraunces italic text-5xl sm:text-7xl md:text-8xl leading-[1.05] text-center max-w-4xl mx-auto): "Grown, <spanclass='text-[hsl(180,80%,60%)] not-italic'>not built.</span>" — Framer Motioninitial:{opacity:0, scale:0.96, filter:'blur(10px)'} → {opacity:1, scale:1, filter:'blur(0px)'}, duration 1.4s, ease "easeOut".Subtext (text-white/70 text-base sm:text-lg max-w-xl mx-auto mt-6 text-center,delay 0.5): "We design living materials and architecture that grow, heal, and adapt —blurring the line between organism and structure."CTA (mt-10 text-center, delay 0.8): single understated text-link "Explore the Lab ↓"with a slow bounce on the arrow.Section 2 — Philosophy / About (min-h-screen flex flex-col md:flex-row items-center gap-12 px-8 py-24):Left half: LAB_PORTRAIT as rounded-3xl overflow-hidden w-full md:w-1/2 aspect-[4/3] object-cover, with a soft cyan glow (shadow-[0_0_60px_-10px_hsl(180,80%,60%)])around the rounded edges.Right half (w-full md:w-1/2): label "Our Philosophy" (text-xs uppercase tracking-[0.3em] text-[hsl(180,80%,60%)] mb-4), then font-fraunces italic text-3xl sm:text-4xl leading-snug mb-4: "Every material we make is alive at some stage of itslife." Followed by a paragraph (text-white/70 leading-relaxed max-w-md): "Our labcultivates mycelium, algae, and bacterial cellulose into structural materials —self-healing, biodegradable, and responsive to their environment." Fade-in-from-righton scroll.Section 3 — Projects gallery (py-24 px-8):Label: "Living Materials" (text-xs uppercase tracking-[0.3em] text-white/50 mb-12).2x2 or 1x4 responsive grid (grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6),each card uses PROJECT_0X, rounded-2xl overflow-hidden aspect-square relative group.On hover: a "magnetic" cursor-follow tilt effect — card rotates slightly(rotateX/rotateY based on cursor position relative to card center, max ±6°,transition-transform duration-200 ease-out), and a glowing cyan border(ring-2 ring-[hsl(180,80%,60%)]/60) fades in.Card labels (absolute bottom-4 left-4 text-sm font-medium): "Mycelium Panel","Living Column", "Woven Bio-Mesh", "Adaptive Shell".Section 4 — Process timeline (py-24 px-8 bg-black/30):Label: "From Spore to Structure" (text-xs uppercase tracking-[0.3em] text-white/50 mb-12).Vertical timeline (relative pl-8 border-l border-white/10 space-y-16), 4 entrieseach pairing STAGE_0X (w-full sm:w-48 rounded-xl) with a title + short description:"01 — Spore Selection", "02 — Substrate Growth", "03 — Form Shaping","04 — Stabilization & Finishing". Each entry's connector dot (absolute -left-[5px] w-2.5 h-2.5 rounded-full bg-[hsl(180,80%,60%)]) glows (shadow-[0_0_12px_hsl(180,80%,60%)])when in viewport via IntersectionObserver.Section 5 — Press / Recognition (py-16 border-t border-white/10):Simple centered row of muted text logos/names (flex flex-wrap justify-center gap-12 text-white/30 text-sm uppercase tracking-widest), e.g., "Dezeen", "WIRED", "DesignBoom", "MoMA Design Lab" — each hover:text-white/70 transition-colors.Section 6 — Contact / Footer (min-h-[80vh] relative flex items-center justify-center text-center overflow-hidden):FOOTER_BLOOM as absolute inset-0 object-cover opacity-70 z-0.Headline (font-fraunces italic text-4xl sm:text-6xl max-w-2xl mx-auto relative z-10):"Curious what grows next?"Email capture row (mt-8 flex gap-3 justify-center relative z-10): input(bg-white/10 border border-white/20 rounded-full px-5 py-3 text-sm placeholder-white/50 backdrop-blur) + button "Join the Lab" (bg-[hsl(180,80%,60%)] text-black rounded-full px-6 py-3 text-sm font-medium hover:bg-[hsl(180,80%,55%)]).Bottom micro-row: "© Terraform Lab" + social icons, text-xs text-white/40 mt-12.Animations summary: Blur-rise on hero text, scroll-triggered fade/slide on everysection (IntersectionObserver, threshold 0.2), magnetic tilt on project cards, glowingpulse on timeline dots, ambient breathing radial-gradient across the whole page.Tone: Calm, futuristic, organic. Rounded corners everywhere (rounded-2xl/rounded-3xl),soft glows instead of hard shadows, no harsh whites — everything sits in a warm-dark,glow-lit world.

Creator Reviews

No verified reviews yet

New

Sign in and purchase this prompt to leave a verified review.

Sustainable Eco Friendly Design – AI Design Prompt | PromptNeko