Back to templates
Portfolio template
Infinite 3D Gallery
React Three Fiber infinite-scroll image gallery — fixed-center hero text over a depth-faded 3D scene.
Next.jsTypeScriptTailwind CSSReact Three Fiberdreipostprocessing
Clone it
terminalClone the templategit clone https://github.com/MUKE-coder/vibekit.git /tmp/vibekit-templates
cp -r /tmp/vibekit-templates/public-templates/blog-template ./infinite-3d-gallery
cd infinite-3d-gallery
pnpm install
pnpm devWhat's in the box
- Infinite-scroll 3D gallery (R3F + drei)
- Configurable speed, z-spacing, visible count, falloff
- Mix-blend-exclusion centered hero text
- Postprocessing effects (bloom, glow)
When to use
Use it
Photography portfolios, design studios, art galleries, brand sites that need a memorable interactive landing.
Skip it
Performance-sensitive marketing pages targeting low-end devices — WebGL is heavy. Provide a non-3D fallback hero.
The 0 customization sections
When you ask your AI agent to customize this template, it will walk through these sections in order, asking you the questions for each. The agent only edits the files needed to apply your answers — no restructuring.
Customization prompt — paste into your AI agent
After you clone, open the project in Claude Code, Cursor, Cline, or any agent that reads files. Paste this prompt to start the section-by-section interview:
paste into your AI agentCustomization interview promptI want to customize the "Infinite 3D Gallery" template using the VibeKit customization guide.
Walk me through the 0 sections one at a time. For each section, ask the questions defined in the guide below, wait for my answers, then move on.
After all sections are answered, edit ONLY the files needed to apply my answers — config files, content, branding. Don't restructure the project.
CUSTOMIZATION GUIDE:
Swap the sample image array in `app/page.tsx`. Tune InfiniteGallery props (speed, zSpacing, visibleCount, falloff). Adjust the fixed hero text and mix-blend mode.
SECTIONS:
Begin with section 1 now.