Put a globe in the hero instead of the phone - #145
Merged
Conversation
A dotted sphere with twenty cities and six arcs that grow from one city to another, rest, fade and start again elsewhere. Three.js is loaded after mount from a separate chunk (129 KB gzipped) that only the homepage requests; the prerendered HTML has no reference to it. Colours are read from the theme tokens on the element, so the globe follows the light/dark toggle without a reload. Rendering stops while the hero is off-screen or the tab is hidden, and under reduced motion it draws one complete frame. Mouse and pen can drag the globe; touch is left to the page so the hero does not trap scrolling. If WebGL is missing the component hides itself and the hero collapses to the copy. ChatScreen.svelte has no remaining user after this change; it is left in place for now. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
A Three.js globe replaces the phone in the homepage hero: a dotted sphere, twenty cities, six arcs that grow between them, rest, fade and start again.
threeis imported after mount from its own chunk (129 KB gzipped), homepage only; the prerendered HTML does not reference it.ChatScreen.svelteno longer has a user and is left in place.Verified in the dev server in both themes and at phone width;
npm run check,npm run lintandnpx vite buildpass.🤖 Generated with Claude Code