How I built a 3D scroll website in 2 hours using Claude Code and Veo
A Reddit user u/Tough-Survey-2155 shared a workflow for building a 3D scroll website from scratch in about 2 hours. The method uses Claude Code for the heavy lifting, with a custom video to website skill (credit to Nate Herk) and Veo for video generation.
Workflow
- Create a video-to-website skill — this serves as the foundation for translating motion into scroll-driven interactions.
- Extract first and last frame images from the source video, then use Veo to convert them into a new video. The video prompt was generated via ChatGPT.
- Prompt Claude Code to build the website using the video asset. The author reports that once the video was in place, the rest was straightforward prompting.
- Design tweaks — a few manual adjustments were needed after generation.
Results & Links
- Live website: royal-pop-website.vercel.app
- Full source code: github.com/hamzafarooq/claude-code-starter
The repository includes Claude Code starter templates that can be reused for similar projects. The author notes that the end-to-end process took only 2 hours, making this a practical reference for developers looking to rapidly prototype scroll-driven 3D sites with AI assistance.
📖 Read the full source: r/ClaudeAI
👀 See Also
Claudlytics: Self-Hosted Dashboard for Tracking Claude Code Token Usage and Costs
Claudlytics is a Node.js web server that reads Claude Code's local .jsonl session files to provide real-time tracking of token usage and costs. It runs locally on 127.0.0.1 and can be accessed via SSH tunnel for remote servers.
Claude Compact Guard Plugin Uses New PostCompact Hook to Preserve Context
A developer has released claude-compact-guard, a plugin that automatically saves critical context before Claude's /compact command destroys it, then reinjects everything after. It uses Anthropic's new PostCompact hook released 4 days ago.
Workaround for ChatGPT Project Migration Gap: Export Scripts and Prompts
A developer created Python scripts and Claude prompts to migrate conversations from ChatGPT to Claude when ChatGPT's data export lacks project membership information. The solution extracts conversations using titles captured from the interface.
Compass Chrome Extension Adds Navigation Tools to Claude and ChatGPT
A developer built a free Chrome extension called Compass that adds a prompt minimap, sticky scroll headers, session checklists, and prompt builder templates to Claude and ChatGPT interfaces to solve navigation problems in long conversations.