WebberUI

Immersive 3D Journey

CSS 3D spatial journey: scroll through corridors and doorways that reveal each chapter.

ProImmersiveimmersive8 sections
See it liveSee the plans

Install

npx shadcn@latest add "https://webberui.com/r/immersive-3d-journey.json?t=<install token>"

The whole page lands in app/templates/immersive-3d-journey/. You can also use a long-lived licence key instead: set the Authorization: Bearer <key> header in the registries block of components.json — better for CI or a project several people share. What you may do with the source is in the licence terms.

Sections it ships with

Sections inside one template share the same design tokens, so swapping and reordering them keeps the colours, spacing and animation rhythm consistent. Pick and combine them in the section composer.

  1. 1

    Navigation and Opening

    A deep-space starfield canvas behind an in-section navbar and a full-bleed title that drifts, scales up and blurs away on scroll.

    hero
  2. 2

    Deep-Space Corridor Journey

    A pinned CSS 3D corridor: scrolling flies through five glowing doorways while chapter captions and a side index track along.

    timeline
  3. 3

    Arrival and Manifesto

    An arrival passage leading into a pinned oversized manifesto whose words brighten out of the dark one by one as you scroll.

    content
  4. 4

    Studio Capabilities

    Four capability cards haloed in accent colour, fading in one after another and revealing a learn-more link on hover.

    features
  5. 5

    Stats Row

    Four hairline-separated figures set in ice-blue to violet gradient type, tallying the studio's track record.

    stats
  6. 6

    Selected Work

    Two columns of project cards framed as CSS browser windows, their inner gradients drifting in parallax as you scroll.

    gallery
  7. 7

    Closing Call to Action

    An invitation headline centred in a violet glow with two buttons, asking visitors to have a doorway built for their brand.

    cta
  8. 8

    Footer

    Brand mark, nav links and a row of circular icons, closing on a copyright line.

    footer

What you get is source code

Not an npm package, not a zip file. Once installed, the page's TypeScript source sits in your repo: edit it however you like, no runtime dependency, no expiry mechanism. Your site keeps running even if ours goes down.

Browse the other 103 templates →