Vebnox Motion Websites

Interactive 3D Cursor Tracking

<div class="vbx-post-media">
  <iframe src="https://www.youtube.com/embed/lH9tCDzIFE8?si=50hU_khE-TD03tcV" style="display:none;" allow="autoplay"></iframe>
</div>
Build a full-screen hero landing page for a creative digital agency called **"Vebnox"** using **React, TypeScript, Vite, and Tailwind CSS**.

REFERENCE:
Use the current Vebnox website as the content and brand reference:
https://vebnox.com/

The design should feel premium, modern, creative, technology-driven, and suitable for a digital creation and growth company.

==================================================
CRITICAL NAMING RULE — ABSOLUTE REQUIREMENT
===========================================

EVERY HTML/JSX `id` ATTRIBUTE AND EVERY HTML/JSX `class` / `className` ATTRIBUTE MUST BE PREFIXED WITH:

`vbx-`

NO EXCEPTIONS.

Examples:

Correct:

* id="vbx-hero"
* id="vbx-navbar"
* className="vbx-hero"
* className="vbx-navbar"
* className="vbx-nav-link"

Incorrect:

* id="hero"
* id="navbar"
* className="hero"
* className="flex"
* className="text-black"
* className="container"

IMPORTANT:
Do NOT use normal unprefixed Tailwind utility classes directly in JSX.

Do NOT write:
className="flex items-center justify-between"

Instead create prefixed custom classes such as:
className="vbx-navbar-inner"

and define the required styling inside CSS using Tailwind's @apply where appropriate.

Example:

.vbx-navbar-inner {
@apply flex items-center justify-between;
}

Every generated class name must begin with `vbx-`.

Every generated id must begin with `vbx-`.

This rule applies to:

* Navbar
* Logo
* Hero
* Video
* Buttons
* Mobile menu
* Overlay
* Containers
* Text
* SVG elements
* Form elements
* Any dynamically rendered element
* Any future component created for this page

Never create an unprefixed id or class.

==================================================
BRAND
=====

Brand name:

Vebnox

Use:

"Vebnox®"

The registered trademark symbol must be displayed with the brand name.

Brand positioning:

Vebnox is a digital creation ecosystem where technology, creative branding, scalable infrastructure, growth, and education come together.

Primary brand idea:

"We Create."

Use messaging around:

* Digital creation
* Technology
* Growth
* Branding
* Scalable systems
* Digital experiences
* Business transformation

Do NOT use the previous "Mainframe" branding.

Do NOT use:

* A.R.I.A
* Mainframe
* mainframe.co
* "Hey there, meet A.R.I.A"
* Any Mainframe-specific copy

==================================================
FONTS
=====

Load these two fonts in `index.html` via stylesheet links:

Heading:

https://db.onlinewebfonts.com/c/5ac3fe7c6abd2f62067f266d89671492?family=HelveticaNowDisplay-Medium

Body:

https://db.onlinewebfonts.com/c/1aa3377e489837a26d019bba501e779d?family=HelveticaNowDisplayW01-Rg

In `index.css`, define:

:root {
--font-heading: 'HelveticaNowDisplay-Medium', 'Helvetica Neue', Arial, sans-serif;
--font-body: 'HelveticaNowDisplayW01-Rg', 'Helvetica Neue', Arial, sans-serif;
}

body {
font-family: var(--font-body);
}

The entire page uses:

var(--font-body)

except the Vebnox logo text, which uses:

var(--font-heading)

==================================================
BACKGROUND VIDEO
================

Create a full-screen background video.

The video element must be:

* position: fixed
* inset: 0
* z-index: 0
* width: 100%
* height: 100%
* object-fit: cover
* object-position: 70% center

Video source:

https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260530_042513_df96a13b-6155-4f6e-8b93-c9dee66fba08.mp4

Video attributes:

* muted
* playsInline
* preload="auto"
* NO autoplay

The video must respond to horizontal mouse movement.

Use:

window.addEventListener('mousemove', ...)

Track:

prevX

Calculate:

delta = currentX - prevX

Convert movement into video time:

(delta / window.innerWidth) * SENSITIVITY * video.duration

Use:

SENSITIVITY = 0.8

Clamp targetTime between:

0

and:

video.duration

Use:

video.currentTime

to seek the video.

IMPORTANT:

Prevent seek flooding.

Use an `onSeeked` handler to queue the next seek when the target time changes while a seek is already occurring.

The interaction should feel smooth and cinematic.

Desktop:
Horizontal mouse movement scrubs the background video forward and backward.

Mobile:
Since horizontal mouse movement is unavailable, keep the video at its initial position or provide a lightweight touch interaction without breaking the desktop behavior.

==================================================
NAVBAR
======

Navbar:

* position: fixed
* top: 0
* left: 0
* width: 100%
* z-index: 10
* full width
* display flex
* justify-content: space-between
* align-items: center

Padding:

Desktop:
20px 32px

Mobile:
16px 20px

==================================================
LOGO
====

Left side:

Vebnox®

Use:

var(--font-heading)

Font size:

Desktop: 26px

Mobile: 21px

Letter spacing:

tight

Color:

black

Beside the logo add:

✳︎

Asterisk:

Desktop: 30px

Mobile: 25px

Color:

black

select-none

Do not allow text selection on the asterisk.

Use a unique prefixed class such as:

vbx-logo
vbx-logo-mark

==================================================
DESKTOP NAVIGATION
==================

Visible from md and above.

Center navigation links:

Services, Products, Company, Resources

Separate links visually with commas.

Example:

Services, Products, Company, Resources

Font size:

23px

Color:

black

Hover:

opacity: 0.6

transition:

opacity 0.2s ease

All classes must start with:

vbx-

==================================================
DESKTOP CTA
===========

Right side:

"Start a Project"

Use:

font-size: 23px

Color:

black

Underline

underline-offset:

2px

Hover:

opacity: 0.6

transition:

opacity 0.2s ease

==================================================
MOBILE HAMBURGER
================

Visible below md.

Three horizontal bars.

Each bar:

width: 24px
height: 2px
background: black

gap:

5px

On toggle:

Top bar:
rotate 45deg
translate down

Middle bar:
opacity 0

Bottom bar:
rotate -45deg
translate up

Transition:

300ms

All classes must use the:

vbx-

prefix.

==================================================
MOBILE OVERLAY
==============

z-index:

9

Position:

fixed
inset: 0

Background:

rgba(255,255,255,0.95)

backdrop-filter:

blur(8px)

Layout:

flex column
justify-content: center
align-items: flex-start

Padding:

32px

Gap:

32px

Navigation:

Services
Products
Company
Resources
Start a Project

Font size:

32px

Font weight:

500

The overlay must fade in/out using:

opacity

and

pointer-events

It must remain hidden on md and above.

==================================================
HERO SECTION
============

Full viewport height:

100vh

z-index:

1

display:

flex
flex-direction: column

Desktop:

justify-content: center

Mobile:

justify-content: flex-end

Mobile bottom padding:

48px

Horizontal padding:

Desktop: 40px

Tablet: 32px

Mobile: 20px

overflow:

hidden

Content container:

max-width: 700px

position:

relative

z-index:

10

==================================================
HERO INTRO LABEL
================

Replace the original A.R.I.A content completely.

Use:

"Hey there, we're Vebnox."

Second line:

"We create digital systems that move businesses forward."

This text should be:

* pointer-events: none
* user-select: none
* margin-bottom: 20px
* font-size: clamp(18px, 4vw, 26px)
* line-height: 1.3
* font-weight: 400
* color: #000
* filter: blur(4px)

Two lines.

==================================================
TYPEWRITER TEXT
===============

Use this Vebnox-specific typewriter message:

"From digital experiences to scalable systems, let's build something that grows."

Create a custom:

useTypewriter

hook.

Parameters:

text
speed
startDelay

Default:

speed = 38ms
startDelay = 600ms

After startDelay:

Reveal one character at a time.

Return:

{
displayed,
done
}

Render inside:

<p>

Font:

var(--font-body)

Color:

black

Font size:

clamp(18px, 4vw, 26px)

Line height:

1.35

Font weight:

400

Minimum height:

54px

While typing:

Display a blinking cursor.

Cursor:

width: 2px
height: 1.1em
background: black
display: inline-block
vertical-align: middle
margin-left: 2px

Animation:

blink 1s step-end infinite

Opacity:

1 at 0%
0 at 50%
1 at 100%

When typing is complete:

Hide cursor.

==================================================
ACTION BUTTONS
==============

Buttons appear:

400ms after page load.

IMPORTANT:

Do NOT wait for the typewriter animation to finish.

Animation:

opacity:
0 → 1

transform:
translateY(8px) → translateY(0)

transition:

opacity 0.4s ease
transform 0.4s ease

Container:

display flex
flex-wrap wrap

Vertical gap:

4px

==================================================
PRIMARY PILLS
=============

Create these four white pill buttons:

1. "Start a Project"
2. "Explore Our Work"
3. "Talk to Vebnox"
4. "Join Our Internship"

Each:

background: white
color: black
border: 1px solid rgba(0,0,0,0.1)
border-radius: 9999px

Font size:

Mobile: 13px
Desktop: 15px

Padding:

horizontal 20px
vertical approximately 0.3em

Margin:

horizontal 0.2em
bottom 0.4em

white-space:

nowrap

Hover:

background: black
color: white

Transition:

200ms

==================================================
CONTACT PILL
============

Create one outline pill:

"Reach us: [hello@vebnox.com](mailto:hello@vebnox.com)"

The email should be underlined.

Add a small copy icon:

12px × 12px

Use an inline SVG showing two overlapping rectangles.

Style:

color: white
background: transparent
border: 1px solid white
border-radius: 9999px

Use:

gap: 8px mobile
gap: 12px desktop

On hover:

background: white
color: black

On click:

copy:

[hello@vebnox.com](mailto:hello@vebnox.com)

using:

navigator.clipboard.writeText()

After copying:

Temporarily show:

"Copied!"

Then return to:

"Reach us: [hello@vebnox.com](mailto:hello@vebnox.com)"

==================================================
VEBNOX CONTENT DIRECTION
========================

The hero must communicate that Vebnox works across:

* Web Design & Development
* App Development
* SaaS & Cloud Solutions
* E-Commerce
* Custom Software & ERP
* SEO
* Digital Marketing
* Branding & Creative
* UI/UX Design
* Video & Motion
* Business Setup
* Education & Internships

Do not overcrowd the hero with all services.

Use the services as contextual inspiration while keeping the hero minimal.

==================================================
BRAND VOICE
===========

Tone:

Confident
Creative
Modern
Technology-driven
Premium
Clear
Business-focused

Avoid:

Generic agency clichés
Excessive marketing language
Fake statistics
Unverified claims
Mainframe references
A.R.I.A references

Use Vebnox's core idea:

"We Create."

The hero should feel like a digital creation ecosystem rather than a traditional marketing agency.

==================================================
RESPONSIVE BEHAVIOR
===================

Desktop:

Full-screen cinematic experience.

Video fills viewport.

Navbar is horizontal.

Navigation links visible.

CTA visible.

Hero content centered vertically.

Mobile:

Video remains full screen.

Navbar becomes hamburger.

Mobile overlay navigation appears when opened.

Hero content sits toward the bottom.

Buttons wrap naturally.

Text remains readable.

Prevent horizontal overflow.

==================================================
ACCESSIBILITY
=============

Add appropriate:

aria-label

to buttons and interactive elements.

The hamburger button must have an accessible label.

The video should not interfere with page interaction.

Buttons must be keyboard accessible.

Ensure sufficient contrast.

==================================================
PERFORMANCE
===========

Do not create unnecessary re-renders.

Use React hooks correctly.

Clean up:

mousemove

event listeners

timeouts

intervals

video event listeners

when the component unmounts.

Avoid excessive video seeking.

Use the seek queue mechanism described above.

==================================================
DEPENDENCIES
============

Use ONLY:

React
ReactDOM
TypeScript
Vite
Tailwind CSS

No additional UI libraries.

Lucide-react may exist in the project but is NOT required for this hero.

Use inline SVG for the copy icon.

==================================================
CODE STRUCTURE
==============

Create clean reusable React components where appropriate:

VbxHero
VbxNavbar
VbxMobileMenu
VbxBackgroundVideo
VbxTypewriter
VbxActionPills

Every component and generated HTML/JSX element must obey the:

`vbx-`

class/id prefix rule.

==================================================
FINAL VALIDATION
================

Before finishing, verify:

1. Every `id` begins with `vbx-`.
2. Every `className` begins with `vbx-`.
3. No unprefixed class exists anywhere in JSX.
4. No unprefixed id exists anywhere in JSX.
5. No Mainframe content remains.
6. No A.R.I.A content remains.
7. No mainframe.co email remains.
8. Vebnox branding is used consistently.
9. Vebnox-specific content is used.
10. Background video works.
11. Horizontal mouse movement scrubs the video.
12. Seek flooding is prevented.
13. Typewriter works.
14. Action buttons appear after 400ms independently of typewriter completion.
15. Email copy button works.
16. Mobile hamburger works.
17. Mobile overlay works.
18. Responsive behavior works.
19. No horizontal overflow occurs.
20. Existing functionality must not be broken.

MOST IMPORTANT:

Do not simplify or omit any requirement from this specification.

Build the complete working Vebnox hero landing page exactly according to this specification.

Interactive 3D Cursor Tracking _Vebnox

<div class="vbx-post-media">
  <iframe src="https://www.youtube.com/embed/dJEINSYLbHo?si=kQ2NeQZly0Cgy9Yp" style="display:none;" allow="autoplay"></iframe>
</div>

Vebnox — Digital Ecosystem

<div class="vbx-post-media">
  <iframe src="https://www.youtube.com/embed/zI82bUDHaw0?si=pXq0MfDhY_SbvYRv" style="display:none;" allow="autoplay"></iframe>
</div>

Digital Ecosystem-Immersive Web Design & Creative Technology

<div class="vbx-post-media">
  <iframe src="https://www.youtube.com/embed/MWMoi82U31E?si=ndGPhEf7jVAk9ELv" style="display:none;" allow="autoplay"></iframe>
</div>

Cinematic Space-Themed Hero Section in HTML, CSS & Vanilla JS | Vebnox

<div class="vbx-post-media">
  <iframe src="https://www.youtube.com/embed/2FVxf657KXk?si=lmswDSEf7F1FMHua" style="display:none;" allow="autoplay"></iframe>
</div>


Build a single, self-contained HTML file: a full-viewport space-themed hero section for a site called "Vebnox". No build step, no frameworks, no external JS, no copyright or license comments. All CSS in one <style> block in <head>, all JS in one <script> block before </body>. All CSS classes and state/animation classes must use the "vbx-" prefix format (e.g., .vbx-stage, .vbx-sky, .vbx-planet, etc.). It must be pixel-faithful to the spec below and fully mobile responsive.

════════════════════════════════════════════════════════════════════════
1. BRAND & CONCEPT
════════════════════════════════════════════════════════════════════════
Brand Name: "Vebnox" (rendered in header logo as Veb<i>nox</i> with "nox" in cyan #5fd0e1).
A cinematic hero: A looping video of a single planet fills the whole viewport as background. Centred over it: eyebrow "PLANET", huge serif planet name, short cyan rule, lede paragraph, and glossy white pill button ("GET STARTED"). Flanking the button, cropped by left and right screen edges, sit two transparent planet cut-outs with serif labels.

Three planets exist: EARTH, VENUS, MARS. Exactly one is "featured" (clip is background, name is headline). The other two occupy left and right slots. Clicking a side planet makes it featured; the slots then re-fill with the remaining two. Earth is featured on load. Rotation order: ['earth', 'venus', 'mars'], fully reversible.

════════════════════════════════════════════════════════════════════════
2. EXACT ASSETS
════════════════════════════════════════════════════════════════════════
Background clips (10s, 16:9, silent, loop):
  EARTH: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260827_202422_3ffb4889-c520-432d-8458-038009eb40df.mp4
  VENUS: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260827_202422_b211cd74-013b-4dd3-bfd0-64491d8696fa.mp4
  MARS:  https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260827_202422_51eae59a-2459-4c84-907c-cc5edfe5fea7.mp4

Posters / still fallbacks:
  EARTH: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260827_202133_508c64b8-a31e-4290-bdfc-1187df70e0a6.png
  VENUS: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260827_202133_cf55d1d8-7b59-4a64-80da-d72052ae974e.png
  MARS:  https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260827_202133_0ba6de7c-285d-43dc-b7ab-8c54c73707cb.png

Transparent planet cut-outs (2048x2048 PNG with alpha):
  EARTH: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260827_202005_3346cc4d-ec3b-44ab-825c-b18e49f5021a.png
  VENUS: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260827_202012_640b239a-d08a-4200-adb2-741bbe129ac8.png
  MARS:  https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260827_202018_3d559490-f613-4ed7-a3bb-3b7e9fc90fb8.png

Favicon: Earth cut-out PNG URL above.

════════════════════════════════════════════════════════════════════════
3. FONTS
════════════════════════════════════════════════════════════════════════
Load Google Fonts:
  Prata 400
  Hanken Grotesk 400, 500, 600, 700
  Poppins 500, 600

Font Stacks:
  --font-serif: 'Prata', Georgia, serif;
  --font-body: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-logo: 'Poppins', sans-serif;

════════════════════════════════════════════════════════════════════════
4. DESIGN SYSTEM (UNIT --u)
════════════════════════════════════════════════════════════════════════
Fixed composition measured from 1353 x 1163 reference, expressed in one custom property --u. EVERY length must be calc(N * var(--u)). Do not substitute arbitrary px values.

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0 }

:root{
  --dw:1353; --dh:1163; --gutter:25;
  --u:max(min(.72px, calc(100vh / 700)), min(calc(100vw / 1353), calc(100vh / 1163)));
  --dh-px:calc(1163 * var(--u));
  --vshift:calc(max(0px, (100vh - var(--dh-px))) * .42);
  --ink:#ffffff; --cyan:#79dce8; --cyan-logo:#5fd0e1;
  --rule:rgba(255,255,255,.23); --btn-ink:#071227;
  --font-serif:'Prata', Georgia, serif;
  --font-body:'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-logo:'Poppins', sans-serif;
}
@supports (height:100dvh){
  :root{
    --u:max(min(.72px, calc(100dvh / 700)), min(calc(100vw / 1353), calc(100dvh / 1163)));
    --vshift:calc(max(0px, (100dvh - var(--dh-px))) * .42);
  }
}
html,body{height:100%}
body{background:#04101f; color:var(--ink); font-family:var(--font-body);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:geometricPrecision; overflow:hidden}

════════════════════════════════════════════════════════════════════════
5. DOM STRUCTURE (with vbx- prefix)
════════════════════════════════════════════════════════════════════════
<div class="vbx-stage">
  <div class="vbx-sky">
    <!-- Earth: class="vbx-is-active", src=EARTH CLIP, poster=EARTH STILL, preload="auto" -->
    <!-- Venus & Mars: data-src=CLIP (NOT src), poster=STILL, preload="none" -->
    <video data-planet="earth" class="vbx-is-active" autoplay muted loop playsinline preload="auto" src="..." poster="..." aria-hidden="true"></video>
    <video data-planet="venus" muted loop playsinline preload="none" data-src="..." poster="..." aria-hidden="true"></video>
    <video data-planet="mars" muted loop playsinline preload="none" data-src="..." poster="..." aria-hidden="true"></video>
  </div>
  <div class="vbx-ui">
    <header class="vbx-navbar">
      <div class="vbx-navrow">
        <a class="vbx-logo" href="#">Veb<i>nox</i></a>
        <nav class="vbx-links" id="site-nav">
          <a href="#" aria-current="page">Planets</a>
          <a href="#">Tution</a>
          <a href="#">Tutorials</a>
          <a href="#">Blog</a>
          <a class="vbx-enroll" href="#">Enroll</a>
        </nav>
        <button class="vbx-burger" type="button" aria-label="Open navigation" aria-expanded="false" aria-controls="site-nav">
          <span></span><span></span><span></span>
        </button>
      </div>
    </header>
    <div class="vbx-copy">
      <div class="vbx-col vbx-eyebrow"><span class="vbx-ent-mask"><span class="vbx-ent-line">PLANET</span></span></div>
      <h1 class="vbx-col vbx-title"><span class="vbx-ent-mask"><span class="vbx-ent-line">EARTH</span></span></h1>
      <div class="vbx-col vbx-rule"><span></span></div>
      <p class="vbx-col vbx-lede">Learn more about the fascinating details that we call our home, Planet Earth. Course enrollment <br>starts today. Early Bird tickets typically last a week, don’t miss out!</p>
      <div class="vbx-col vbx-cta">
        <button class="vbx-planet vbx-planet-l" type="button" data-slot="l">
          <img data-planet="earth" alt="" src="...">
          <img data-planet="venus" alt="" src="...">
          <img data-planet="mars" alt="" src="...">
        </button>
        <button class="vbx-planet vbx-planet-r" type="button" data-slot="r">
          <img data-planet="earth" alt="" src="...">
          <img data-planet="venus" alt="" src="...">
          <img data-planet="mars" alt="" src="...">
        </button>
        <a href="#">GET STARTED</a>
        <span class="vbx-label vbx-label-l"></span>
        <span class="vbx-label vbx-label-r"></span>
      </div>
    </div>
  </div>
  <button class="vbx-scroll" type="button" aria-label="Scroll to next section">
    <svg viewBox="0 0 26 33" fill="none" aria-hidden="true">
      <path d="M13 1.5 V31.5 M1.9 20.4 L13 31.5 L24.1 20.4" stroke="#ffffff" stroke-width="3" stroke-linecap="square" stroke-linejoin="miter"/>
    </svg>
  </button>
</div>

════════════════════════════════════════════════════════════════════════
6. EXACT CSS RULES
════════════════════════════════════════════════════════════════════════
.vbx-stage{position:fixed; inset:0; overflow:hidden; isolation:isolate}
.vbx-sky{position:absolute; inset:0; z-index:0; background-image:url(EARTH_STILL); background-size:cover; background-position:center; background-repeat:no-repeat}
.vbx-sky video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; opacity:0; transition:opacity .22s linear}
.vbx-sky video.vbx-is-active{opacity:1}
@media (prefers-reduced-motion:reduce){ .vbx-sky video{display:none} }
.vbx-ui{position:absolute; inset:0; z-index:3}

.vbx-planet{position:absolute; z-index:-1; padding:0; border:0; background:none; -webkit-appearance:none; appearance:none; line-height:0; cursor:pointer; pointer-events:auto; transition:transform .45s cubic-bezier(.22,1,.36,1)}
.vbx-planet img{display:none; width:100%; height:auto}
.vbx-planet img.vbx-is-shown{display:block}
.vbx-planet:hover{transform:scale(1.045)}
.vbx-planet:active{transform:scale(.99)}
.vbx-planet-l{width:calc(143 * var(--u)); left:calc(-69.5 * var(--u)); top:calc(-38.3 * var(--u))}
.vbx-planet-r{width:calc(143 * var(--u)); right:calc(-64.7 * var(--u)); top:calc(-40.6 * var(--u))}
@media (prefers-reduced-motion:reduce){ .vbx-planet{transition:none} .vbx-planet:hover,.vbx-planet:active{transform:none} }

.vbx-copy{position:absolute; inset:0; transform:translateY(var(--vshift)); pointer-events:none}
.vbx-copy a{pointer-events:auto}
.vbx-col{position:absolute; left:0; right:calc(var(--gutter) * var(--u)); text-align:center}

.vbx-navbar{position:absolute; top:0; left:0; right:0; z-index:6; height:calc(88 * var(--u))}
.vbx-navbar::after{content:""; position:absolute; left:calc(25 * var(--u)); right:calc(49 * var(--u)); top:calc(86 * var(--u)); height:calc(2 * var(--u)); background:var(--rule); transform-origin:center}
.vbx-navrow{position:absolute; left:calc(25 * var(--u)); right:calc(49 * var(--u)); top:0; height:calc(86 * var(--u)); display:flex; align-items:center; justify-content:space-between}
.vbx-logo{font-family:var(--font-logo); font-weight:600; font-size:calc(18.4 * var(--u)); letter-spacing:calc(-0.15 * var(--u)); line-height:1; color:#fff; text-decoration:none; white-space:nowrap; position:relative; top:calc(-1 * var(--u))}
.vbx-logo i{font-style:normal; color:var(--cyan-logo)}
.vbx-burger{display:none; position:relative; width:calc(46 * var(--u)); height:calc(46 * var(--u)); padding:0; border:0; background:none; cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:calc(6 * var(--u)); flex:none}
.vbx-burger span{display:block; width:calc(24 * var(--u)); height:calc(2 * var(--u)); border-radius:calc(2 * var(--u)); background:#fff; transition:transform .28s cubic-bezier(.4,0,.2,1), opacity .18s linear}
.vbx-navrow[data-open="true"] .vbx-burger span:nth-child(1){transform:translateY(calc(8 * var(--u))) rotate(45deg)}
.vbx-navrow[data-open="true"] .vbx-burger span:nth-child(2){opacity:0}
.vbx-navrow[data-open="true"] .vbx-burger span:nth-child(3){transform:translateY(calc(-8 * var(--u))) rotate(-45deg)}
.vbx-links{display:flex; align-items:center}
.vbx-links a{position:relative; display:flex; align-items:center; height:calc(86 * var(--u)); font-size:calc(18.4 * var(--u)); font-weight:400; line-height:1; color:#fff; text-decoration:none; padding:0 calc(17.5 * var(--u)); letter-spacing:calc(-1 * var(--u)); white-space:nowrap}
.vbx-links a[aria-current="page"]::after{content:""; position:absolute; left:0; right:0; top:calc(83.5 * var(--u)); height:calc(4 * var(--u)); background:var(--cyan); border-radius:calc(1 * var(--u)); transform-origin:center}
.vbx-links a:nth-child(3){letter-spacing:calc(-1.75 * var(--u))}
.vbx-links a:nth-child(2){margin-left:calc(24 * var(--u))}
.vbx-links a:nth-child(3){margin-left:calc(26 * var(--u))}
.vbx-links a:nth-child(4){margin-left:calc(27 * var(--u))}
.vbx-links a.vbx-enroll{margin-left:calc(28.5 * var(--u)); width:calc(107 * var(--u)); height:calc(38 * var(--u)); border-radius:calc(19 * var(--u)); display:flex; align-items:center; justify-content:center; font-size:calc(17 * var(--u)); font-weight:600; letter-spacing:calc(-0.75 * var(--u)); line-height:1; color:var(--btn-ink); text-decoration:none; padding-top:calc(2 * var(--u)); background:linear-gradient(180deg,#ffffff 0%,#d8ecfe 9%,#dceefe 72%,#f4f9ff 100%); box-shadow:0 calc(3 * var(--u)) calc(14 * var(--u)) rgba(255,255,255,.22), inset 0 0 0 calc(1.5 * var(--u)) rgba(255,255,255,.92); flex:none}

.vbx-eyebrow{top:calc(188.8 * var(--u)); font-size:calc(30.45 * var(--u)); font-weight:500; line-height:1; letter-spacing:calc(4 * var(--u)); text-indent:calc(4 * var(--u)); color:#fff}
h1.vbx-title{top:calc(268 * var(--u)); font-family:var(--font-serif); font-weight:400; font-size:calc(112.4 * var(--u)); line-height:1; letter-spacing:calc(2 * var(--u)); text-indent:calc(2 * var(--u)); color:#fff}
.vbx-rule{top:calc(405.5 * var(--u)); height:calc(5 * var(--u)); font-size:0; line-height:0; padding-right:calc(2 * var(--u))}
.vbx-rule span{display:inline-block; vertical-align:top; width:calc(100 * var(--u)); height:100%; border-radius:calc(2.5 * var(--u)); background:var(--cyan); transform-origin:center}
p.vbx-lede{top:calc(433.2 * var(--u)); font-size:calc(18.36 * var(--u)); font-weight:400; line-height:calc(30 * var(--u)); color:rgba(255,255,255,.95)}

.vbx-cta{top:calc(597 * var(--u)); height:calc(66 * var(--u)); isolation:isolate}
.vbx-cta a{display:inline-flex; align-items:center; justify-content:center; width:calc(216 * var(--u)); height:calc(66 * var(--u)); border-radius:calc(33 * var(--u)); font-size:calc(17 * var(--u)); font-weight:700; letter-spacing:0; text-indent:0; line-height:1; color:var(--btn-ink); text-decoration:none; padding-top:calc(2 * var(--u)); background:linear-gradient(180deg,#ffffff 0%,#d6e8f8 4%,#d9ecfe 72%,#ffffff 100%); box-shadow:0 calc(10 * var(--u)) calc(18 * var(--u)) calc(-8 * var(--u)) rgba(255,255,255,.50), 0 0 calc(26 * var(--u)) rgba(255,255,255,.18), inset 0 0 0 calc(2 * var(--u)) rgba(255,255,255,.9)}
.vbx-label{position:absolute; top:calc(33 * var(--u)); font-family:var(--font-serif); font-weight:400; font-size:calc(17.8 * var(--u)); letter-spacing:calc(4.6 * var(--u)); line-height:1; color:#fff; white-space:nowrap}
.vbx-label.vbx-label-l{left:calc(111 * var(--u))}
.vbx-label.vbx-label-r{right:calc(104 * var(--u))}

.vbx-scroll{position:absolute; z-index:4; left:50%; margin-left:calc((-48 - (var(--gutter) / 2)) * var(--u)); bottom:calc(68 * var(--u)); width:calc(96 * var(--u)); height:calc(96 * var(--u)); border-radius:50%; background:rgba(24,30,42,.70); -webkit-backdrop-filter:blur(calc(6 * var(--u))); backdrop-filter:blur(calc(6 * var(--u))); border:0; display:flex; align-items:center; justify-content:center; cursor:pointer}
.vbx-scroll svg{width:calc(20 * var(--u)); height:calc(25 * var(--u)); display:block}

.vbx-scroll:focus-visible,.vbx-links a:focus-visible,.vbx-enroll:focus-visible,.vbx-cta a:focus-visible,.vbx-logo:focus-visible{outline:calc(2 * var(--u)) solid var(--cyan); outline-offset:calc(3 * var(--u))}
.vbx-planet:focus-visible{outline:calc(2 * var(--u)) solid var(--cyan); outline-offset:calc(6 * var(--u)); border-radius:50%}

════════════════════════════════════════════════════════════════════════
7. RESPONSIVE TIERS (exact source order)
════════════════════════════════════════════════════════════════════════
A) NAV COLLAPSE @media (max-width:1030px), (max-height:620px)
  .vbx-navrow{left:calc(25 * var(--u)); right:calc(25 * var(--u))}
  .vbx-burger{display:flex}
  .vbx-links{position:absolute; top:calc(96 * var(--u)); right:0; z-index:5; width:min(calc(324 * var(--u)), calc(100vw - 50 * var(--u))); flex-direction:column; align-items:stretch; padding:calc(12 * var(--u)); border-radius:calc(20 * var(--u)); background:rgba(9,21,42,.84); -webkit-backdrop-filter:blur(calc(18 * var(--u))); backdrop-filter:blur(calc(18 * var(--u))); border:calc(1 * var(--u)) solid rgba(255,255,255,.14); box-shadow:0 calc(18 * var(--u)) calc(44 * var(--u)) rgba(2,8,20,.55); opacity:0; visibility:hidden; transform:translateY(calc(-10 * var(--u))); transition:opacity .24s ease, transform .28s cubic-bezier(.4,0,.2,1), visibility .28s}
  .vbx-navrow[data-open="true"] .vbx-links{opacity:1; visibility:visible; transform:none}
  .vbx-links a:nth-child(n){margin-left:0; height:auto; justify-content:flex-start; padding:calc(14 * var(--u)) calc(16 * var(--u)); font-size:calc(19 * var(--u)); letter-spacing:calc(-.6 * var(--u))}
  .vbx-links a + a{border-top:calc(1 * var(--u)) solid rgba(255,255,255,.08)}
  .vbx-links a[aria-current="page"]::after{top:auto; bottom:calc(9 * var(--u)); left:calc(16 * var(--u)); right:auto; width:calc(26 * var(--u)); height:calc(3 * var(--u))}
  .vbx-links a.vbx-enroll{margin:calc(14 * var(--u)) 0 calc(2 * var(--u)); width:100%; height:calc(46 * var(--u)); border-radius:calc(23 * var(--u)); justify-content:center; padding-top:calc(2 * var(--u)); font-size:calc(18 * var(--u)); letter-spacing:calc(-.4 * var(--u)); border-top:0}
  .vbx-links a.vbx-enroll::after{content:none}

B) TABLET @media (min-width:580px) and (max-width:1030px) and (min-height:621px)
  :root{--gutter:0; --u:min(max(min(.85px, calc(100vh / 780)), min(calc(100vw / 900), calc(100vh / 1163))), 1.15px); --dh-px:calc(1120 * var(--u)); --vshift:calc(max(0px, (100vh - var(--dh-px))) * .38)}
  (Repeat with 100dvh inside @supports (height:100dvh))
  .vbx-navbar::after{left:calc(25 * var(--u)); right:calc(25 * var(--u))}
  p.vbx-lede br{display:none}
  p.vbx-lede{max-width:calc(620 * var(--u)); margin-left:auto; margin-right:auto; text-wrap:pretty}
  .vbx-label.vbx-label-r{right:calc(116 * var(--u))}

C) PHONE @media (max-width:579px), (max-height:620px)
  :root{--gutter:0; --u:max(min(.92px, calc(100vh / 620)), min(calc(100vw / 430), calc(100vh / 880))); --dh-px:calc(880 * var(--u)); --vshift:calc(max(0px, (100vh - var(--dh-px))) * .34)}
  (Repeat with 100dvh inside @supports (height:100dvh))
  .vbx-navbar{height:calc(76 * var(--u))}
  .vbx-navbar::after{left:calc(24 * var(--u)); right:calc(24 * var(--u)); top:calc(74 * var(--u))}
  .vbx-navrow{left:calc(24 * var(--u)); right:calc(24 * var(--u)); height:calc(74 * var(--u))}
  .vbx-links{top:calc(84 * var(--u))}
  .vbx-copy{top:calc(76 * var(--u)); display:flex; flex-direction:column; align-items:center; padding:calc(56 * var(--u)) calc(26 * var(--u)) 0}
  .vbx-col{position:static; width:100%; right:auto}
  .vbx-eyebrow{font-size:calc(20 * var(--u)); letter-spacing:calc(5 * var(--u)); text-indent:calc(5 * var(--u))}
  h1.vbx-title{font-size:calc(86 * var(--u)); margin-top:calc(15 * var(--u))}
  .vbx-rule{margin-top:calc(20 * var(--u)); height:calc(5 * var(--u)); padding-right:0}
  .vbx-rule span{width:calc(84 * var(--u))}
  p.vbx-lede{margin-top:calc(19 * var(--u)); font-size:calc(15.5 * var(--u)); line-height:calc(26 * var(--u)); max-width:calc(400 * var(--u)); text-wrap:balance}
  p.vbx-lede br{display:none}
  .vbx-cta{top:auto; margin-top:calc(32 * var(--u)); height:calc(60 * var(--u)); position:relative}
  .vbx-cta a{width:calc(190 * var(--u)); height:calc(60 * var(--u)); border-radius:calc(30 * var(--u))}
  .vbx-label{top:50%; transform:translateY(-50%); font-size:calc(16 * var(--u)); letter-spacing:calc(4 * var(--u))}
  .vbx-label.vbx-label-l{left:calc(56 * var(--u))}
  .vbx-label.vbx-label-r{right:calc(60 * var(--u))}
  .vbx-planet-l{width:calc(89 * var(--u)); left:calc(-44.5 * var(--u)); top:calc(-17 * var(--u))}
  .vbx-planet-r{width:calc(89 * var(--u)); right:calc(-44.5 * var(--u)); top:calc(-18.3 * var(--u))}
  .vbx-scroll{width:calc(74 * var(--u)); height:calc(74 * var(--u)); margin-left:calc(-37 * var(--u)); bottom:calc(49 * var(--u))}
  .vbx-scroll svg{width:calc(15.5 * var(--u)); height:calc(19.5 * var(--u))}

D) @media (max-height:660px){ .vbx-scroll{display:none} }

E) SHORT @media (max-height:620px)
  :root{--u:max(min(.85px, calc(100vh / 470)), min(calc(100vw / 640), calc(100vh / 560))); --dh-px:calc(560 * var(--u)); --vshift:0px}
  (Repeat with 100dvh inside @supports (height:100dvh))
  .vbx-copy{padding-top:calc(26 * var(--u))}
  h1.vbx-title{font-size:calc(64 * var(--u)); margin-top:calc(8 * var(--u))}
  .vbx-rule{margin-top:calc(12 * var(--u))}
  p.vbx-lede{margin-top:calc(12 * var(--u))}
  .vbx-cta{margin-top:calc(20 * var(--u))}
  .vbx-label{top:50%; transform:translateY(-50%); font-size:calc(15 * var(--u))}
  .vbx-label.vbx-label-l{left:calc(58 * var(--u))}
  .vbx-label.vbx-label-r{right:calc(58 * var(--u))}
  @media (min-width:821px) and (max-height:660px){ .vbx-copy{transform:none} }

F) NARROW PHONE @media (max-width:500px) (declared LAST to win inside tier E)
  .vbx-label{top:calc(100% + 34 * var(--u)); transform:none; font-size:calc(15 * var(--u))}
  .vbx-label.vbx-label-l{left:calc(6 * var(--u))}
  .vbx-label.vbx-label-r{right:calc(6 * var(--u))}

@media (prefers-reduced-motion:reduce){ .vbx-links,.vbx-burger span{transition:none} }

════════════════════════════════════════════════════════════════════════
8. ENTRANCE ANIMATION & DRIVER
════════════════════════════════════════════════════════════════════════
In <head> before <style>, blocking inline script adds class "vbx-anim" to documentElement unless prefers-reduced-motion:
  (function(){try{
    if(!window.matchMedia||!matchMedia('(prefers-reduced-motion: reduce)').matches){
      document.documentElement.classList.add('vbx-anim');
    }
  }catch(e){}})();

Keyframes:
  @keyframes vbx-ent-reveal{from{transform:translateY(115%)}to{transform:translateY(0)}}
  @keyframes vbx-ent-rise{from{opacity:0;transform:translateY(var(--rise,10px))}to{opacity:1;transform:none}}
  @keyframes vbx-ent-settle{from{opacity:0;transform:translateY(var(--rise,8px)) scale(.965)}to{opacity:1;transform:none}}
  @keyframes vbx-ent-draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  @keyframes vbx-ent-fade{from{opacity:0}to{opacity:1}}

The .vbx-anim state hides targets and sets transforms.
When .vbx-play is added:
  .vbx-sky: fade 1.6s .25s
  .vbx-navbar::after: draw .9s .12s
  .vbx-logo: rise 8u .6s .20s
  .vbx-links a: rise 8u .55s (staggered: (1) .26s, (2) .31s, (3) .36s, (4) .41s)
  .vbx-links a.vbx-enroll, .vbx-burger: settle 8u .6s .46s
  .vbx-links a[aria-current]::after: draw .55s .60s
  .vbx-eyebrow .vbx-ent-line: reveal .75s .30s
  h1.vbx-title .vbx-ent-line: reveal .95s .44s
  .vbx-rule span: draw .65s .78s
  p.vbx-lede: rise 12u .7s .86s
  .vbx-label.vbx-label-l: rise 8u .6s 1.04s
  .vbx-label.vbx-label-r: rise 8u .6s 1.10s
  .vbx-cta a: settle 8u .7s 1.14s
  .vbx-scroll: settle .6s 1.42s

Driver script: waits for document.fonts.ready (500ms timeout fallback), runs 2 requestAnimationFrames, adds .vbx-play, and after 2150ms removes both .vbx-anim and .vbx-play.

════════════════════════════════════════════════════════════════════════
9. PLANET SWITCHER JAVASCRIPT
════════════════════════════════════════════════════════════════════════
const ORDER = ['earth', 'venus', 'mars'];
Store for each planet: name, cutout URL, still URL, and lede text.

show(next):
  1. Bail if unknown or already featured.
  2. For video clips in .vbx-sky: if matching next, set src from data-src (lazy fetch), toggle .vbx-is-active, play() (catch reject); pause all other clips and remove .vbx-is-active.
  3. Set .vbx-sky background-image to planet still.
  4. Update h1.vbx-title .vbx-ent-line textContent.
  5. Update p.vbx-lede innerHTML.
  6. rest = ORDER.filter(p => p !== next). Slot L gets rest[0], Slot R gets rest[1].
     For each slot: set button data-planet, set aria-label "Show <NAME>", toggle .vbx-is-shown on child img matching data-planet (never mutate img.src), and set label text.

warm(planet): if video has data-src and no src, assign src, set preload='auto', call load().
Bind warm on pointerenter and focus on both side planet buttons.
In idleCallback (fallback setTimeout 2500ms), warm all remaining planets.
Call show('earth') at the end of setup.

════════════════════════════════════════════════════════════════════════
10. BURGER MENU JAVASCRIPT
════════════════════════════════════════════════════════════════════════
setNavOpen(open) writes .vbx-navrow dataset.open, burger button aria-expanded and aria-label ("Open navigation" / "Close navigation"). Initialise with false.
Toggle on burger click (stopPropagation).
Close on outside click, on Escape key (returning focus to burger button), and on any link click inside the menu.

Vebnox Creative Studio

<div class="vbx-post-media">
  <iframe src="https://www.youtube.com/embed/ysz5S6PUM-U" style="display:none;" allow="autoplay"></iframe>
</div>

Create a React + Vite + TypeScript + Tailwind CSS landing page for a creative studio called "Prisma". The page has 3 sections: Hero, About, and Features. Use framer-motion for animations and lucide-react for icons. The design is dark, moody, and cinematic with a warm cream color palette.

FONTS

Load two Google Fonts in index.html:

Almarai (weights: 300, 400, 700, 800) -- used as the global default font
Instrument Serif (italic only) -- used for italic accent text in the About section
In index.css, set the global font family:


* { font-family: 'Almarai', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif; }
In tailwind.config.js, extend:

colors.primary: #DEDBC8 (warm cream, used for all primary text and accents)
fontFamily.serif: ['"Instrument Serif"', 'serif']
COLOR SYSTEM

Background: black (#000000) globally, #101010 for the About card, #212121 for Features cards
Primary text color: #E1E0CC (applied via inline style, slightly different from Tailwind primary)
Tailwind primary: #DEDBC8 (used for utility classes like text-primary, text-primary/70)
Gray text: text-gray-400, text-gray-500
Navbar link color: rgba(225, 224, 204, 0.8) with hover: #E1E0CC
CUSTOM CSS UTILITIES (index.css)

Two SVG noise texture utilities:

.noise-overlay: fractal noise (baseFrequency: 0.85, numOctaves: 3) used as overlay on hero video
.bg-noise: fractal noise (baseFrequency: 0.9, numOctaves: 4) used as subtle background in Features section
Both use inline SVG data URIs with feTurbulence filter.

SECTION 1: HERO

Full viewport height (h-screen). The entire section has p-4 md:p-6 padding creating an inset effect. Inside is a container with rounded-2xl md:rounded-[2rem] and overflow-hidden.

Background video:

URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260405_170732_8a9ccda6-5cff-4628-b164-059c500a2b41.mp4
autoPlay loop muted playsInline, object-cover, fills entire container
Noise overlay on top: .noise-overlay with opacity-[0.7] mix-blend-overlay pointer-events-none
Gradient overlay: bg-gradient-to-b from-black/30 via-transparent to-black/60
Navbar:

Absolutely positioned at top center
Black background pill that hangs from top edge: bg-black rounded-b-2xl md:rounded-b-3xl px-4 py-2 md:px-8
5 nav items: "Our story", "Collective", "Workshops", "Programs", "Inquiries"
Text size: text-[10px] sm:text-xs md:text-sm
Gap between items: gap-3 sm:gap-6 md:gap-12 lg:gap-14
Link color: rgba(225, 224, 204, 0.8), hover: #E1E0CC (inline styles)
Hero Content (bottom-aligned):

Absolutely positioned at bottom: absolute bottom-0 left-0 right-0
12-column grid: left 8 columns for heading, right 4 columns for text + button
Giant heading "Prisma" using WordsPullUp component:
Responsive sizes: text-[26vw] sm:text-[24vw] md:text-[22vw] lg:text-[20vw] xl:text-[19vw] 2xl:text-[20vw]
font-medium leading-[0.85] tracking-[-0.07em]
Color: #E1E0CC
Has a superscript asterisk (*) on the final "a" of "Prisma": positioned with absolute top-[0.65em] -right-[0.3em] text-[0.31em]
Pull-up animation: each word slides up from y:20 with staggered delay of 0.08s, triggered by useInView
Description paragraph (right column):
"Prisma is a worldwide network of visual artists, filmmakers and storytellers bound not by place, status or labels but by passion and hunger to unlock potential through our unique perspectives."
text-primary/70 text-xs sm:text-sm md:text-base, line-height: 1.2
Framer motion: fade up from y:20, delay 0.5s, custom ease [0.16, 1, 0.3, 1]
CTA Button "Join the lab":
Pill shape: bg-primary rounded-full
Black text, font-medium, text-sm sm:text-base
Right side has a black circle (bg-black rounded-full w-9 h-9 sm:w-10 sm:h-10) containing a white/cream ArrowRight icon
Hover: gap increases (hover:gap-3), circle scales up (group-hover:scale-110)
Framer motion: fade up from y:20, delay 0.7s, same custom ease
SECTION 2: ABOUT

bg-black, padded section with centered content
Inner card: bg-[#101010], centered text, max-w-6xl
Top: small label "Visual arts" in text-primary, text-[10px] sm:text-xs
Main heading uses WordsPullUpMultiStyle component with 3 segments:
"I am Marcus Chen," -- font-normal (Almarai)
"a self-taught director." -- italic font-serif (Instrument Serif italic)
"I have skills in color grading, visual effects, and narrative design." -- font-normal
Container: text-3xl sm:text-4xl md:text-5xl lg:text-6xl xl:text-7xl max-w-3xl mx-auto leading-[0.95] sm:leading-[0.9]
Each word animates in with pull-up effect (y:20 to y:0), staggered at 0.08s delay
Body paragraph below with scroll-linked character opacity animation:
Text: "Over the last seven years, I have worked with Parallax, a Berlin-based production house that crafts cinema, series, and Noir Studio in Paris. Together, we have created work that has earned international acclaim at several major festivals."
text-[#DEDBC8], text-xs sm:text-sm md:text-base
Each character is individually wrapped in an AnimatedLetter component
Uses useScroll with target offset ['start 0.8', 'end 0.2']
Each character's opacity transitions from 0.2 to 1 based on scroll position, creating a progressive text reveal effect
Character staggering: charProgress = index / totalChars, range [charProgress - 0.1, charProgress + 0.05]
SECTION 3: FEATURES

min-h-screen bg-black, with subtle .bg-noise overlay at opacity-[0.15]
Header text uses WordsPullUpMultiStyle:
Line 1: "Studio-grade workflows for visionary creators." in cream
Line 2: "Built for pure vision. Powered by art." in text-gray-500
Both: text-xl sm:text-2xl md:text-3xl lg:text-4xl font-normal
4-column card grid (lg:h-[480px], gap-3 sm:gap-2 md:gap-1):

Each card has staggered entrance animation: scale from 0.95 + fade in, triggered by useInView (once, margin "-100px"), staggered at 0.15s intervals with ease [0.22, 1, 0.36, 1].

Card 1 - Video card: Full video background (URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260406_133058_0504132a-0cf3-4450-a370-8ea3b05c95d4.mp4), autoPlay loop muted playsInline, object-cover. Bottom text: "Your creative canvas." in #E1E0CC.

Card 2 - "Project Storyboard." (01): bg-[#212121], small image icon at top (https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260405_171918_4a5edc79-d78f-4637-ac8b-53c43c220606.png&w=1280&q=85, 10x10 sm:12x12 rounded), title with number, 4 checklist items with green Check icons, "Learn more" link with rotated arrow (-45deg).

Card 3 - "Smart Critiques." (02): Same layout as Card 2. Icon: https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260405_171741_ed9845ab-f5b2-4018-8ce7-07cc01823522.png&w=1280&q=85. 3 checklist items about AI analysis, creative notes, tool integrations.

Card 4 - "Immersion Capsule." (03): Same layout. Icon: https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260405_171809_f56666dc-c099-4778-ad82-9ad4f209567b.png&w=1280&q=85. 3 checklist items about notification silencing, ambient soundscapes, schedule syncing.

All feature card checklist items use Check icon from lucide-react in text-primary color, with text-gray-400 description text. "Learn more" buttons use ArrowRight rotated -45deg.

SHARED ANIMATION COMPONENTS

WordsPullUp: Splits text by spaces, each word is a motion.span that slides up (y:20 to 0) with staggered delay. Uses useInView (once: true). Supports showAsterisk prop that adds a superscript * after the last character "a" of the final word.

WordsPullUpMultiStyle: Takes an array of {text, className} segments, splits all into individual words preserving per-word className. Same pull-up animation. Words are wrapped in inline-flex flex-wrap justify-center.

RESPONSIVE BREAKPOINTS

The page is fully responsive across mobile, tablet, and desktop. Cards in Features switch from 1-col (mobile) to 2-col (md) to 4-col (lg). Hero text scales from 26vw down to 19vw. Navbar items compress with smaller gaps on mobile. All padding, font sizes, and spacing use Tailwind responsive prefixes (sm/md/lg/xl/2xl).

TECH STACK

Vite + React 18 + TypeScript
Tailwind CSS 3
framer-motion (for all animations: pull-up text, fade-in, scroll-linked opacity, card entrances)
lucide-react (ArrowRight, Check icons)

Nival Cyberspace — Futuristic Cyberpunk Portfolio fdfg

<!-- 
  Blogger Post: Nival Cyberspace — Futuristic Cyberpunk Portfolio
  Labels to use: Prompts, Shorts, Vertical, Cyberpunk, WebGL
-->

<div class="vbx-post-media">
  <img alt="Nival Cyberspace Portfolio" src="https://images.unsplash.com/photo-1578632767115-351597cf2477?q=80&w=1200&auto=format&fit=crop" style="display:none;" />
  <iframe src="https://www.youtube.com/embed/V_IKlEMxJ30?si=V-RCIa38sHtI9M8Z" class="vbx-vertical-video" data-aspect="vertical" style="display:none;" allow="autoplay"></iframe>
</div>

[tech-stack tags="Next.js 15, Tailwind CSS, Cyberpunk UI, WebGL Shaders, Lucide Icons"]

[prompt]
Create a futuristic dark-mode personal portfolio landing page for "Nival Cyberspace" using React, Tailwind CSS, and Lucide Icons.

---

1. FORMAT & ASPECT RATIO
- Aspect Ratio: 9:16 Vertical Mobile & Cyber Terminal Viewport.
- Animation Style: Continuous vertical looping animations with cybernetic glitch transitions.

---

2. COLOR PALETTE & DESIGN SYSTEM
- Background: Pitch dark `#050508` with neon cyan `#00f3ff` and violet `#7000ff` ambient glow overlays.
- Cards: Glassmorphism `bg-zinc-900/60 backdrop-blur-xl border border-zinc-800/80 rounded-2xl`.
- Typography: Sans-serif font system with tight letter-spacing for headings (`tracking-tight`).

---

3. LAYOUT & COMPONENTS
- Fixed Cyber Navbar with pulsing connection ping.
- Hero Section: "Engineering Next-Gen Digital Universes & AI Architectures".
- Interactive Showcase Grid: 3D interactive preview cards featuring video loops of cybernetic landscapes and WebGL particle fields.
- Direct Copy Prompt Action Button to let users replicate the theme setup.
[/prompt]

[features]
- **9:16 Mobile & Vertical Video First**: Tailored for high-engagement mobile devices and TikTok/Reels traffic.
- **Cyberpunk Glassmorphism**: Neon cyan and violet atmospheric lighting with glitch text shaders.
- **Hardware-Accelerated FX**: Smooth 60 FPS CSS backdrop filters and glow drop-shadows.
- **Hostinger Cloud Performance**: Fast Time to First Byte (TTFB) on Hostinger SSD Web Hosting.
[/features]

[hostinger-deal]

[preview-live url="https://v0.dev"]