Immersive Lens Portfolio

Full-page immersive photography template with Three.js WebGL distortion shaders, horizontal & vertical gallery views, and animated GSAP lightbox.

39.4 KB
•
Updated on September 4, 2026

Installation

Bash
pnpm dlx shadcn@latest add @spaceui/template-immersive-lens

Key Features

  • Next.js App Router Architecture: Clean separation between Server Component metadata/SSR and interactive Client Islands.
  • Decoupled Hooks: useCustomCursor, useHorizontalDrag, and useLightbox are standalone and reusable.
  • Full-Screen Immersion: Locked to split view with full viewport immersion shortcut (F / Esc).
  • WebGL Shader Layer: Fluid Three.js distortion on scroll velocity and hover interactions.
  • Curated High-Resolution Imagery: Preconfigured with curated photography assets and optimal aspect ratios.
  • Glassmorphism HUD: Translucent blurred floating dock with category switching, layout mode toggling, and progress counters.

Related Components

Portfolio Statistics & Analytics TemplateTemplates

Comprehensive portfolio statistics dashboard template featuring general metrics, audience engagement, content analytics, GitHub heatmap, and Lighthouse scores.

View
AI Chat WorkspaceStats Dashboard
pnpm dlx shadcn@latest add @spaceui/components-spaceui-ui
pnpm dlx shadcn@latest add @spaceui/template-immersive-lens