Repository navigation
fix: hero globe, scroll arrow and wordmark shadow from design review - #29
Draft
Atharva0506 wants to merge 3 commits into
Draft
Atharva0506 wants to merge 3 commits into
Atharva0506 wants to merge 3 commits into
Conversation
Pure black at 40% over the bronze gradient muddied the gradient and made the wordmark read as pasted onto the bar. The navbar's own box-shadow is kept: the bar is fixed and translucent, so it is what separates the bar from the hero on scroll.
A hard-coded arrow glyph in an animate-bounce wrapper. It bypassed en.json unlike the rest of the hero copy, was invisible to screen readers and was not keyboard reachable. The hero fits within one viewport on desktop, so no replacement cue was added. Also drops the matching wordmark drop shadow in the footer.
tectonic-hero.png never rendered as a sphere. The source file is 626x367 and the globe was already clipped inside the asset, so no CSS change could recover the geometry. It was then upscaled ~2x, mirrored, and pushed off-canvas by negative offsets on .hero-visual, leaving only an arc. Replaces it with a canvas component that draws a slowly rotating globe, with landmasses as an even dot field in the brand palette. Land is sampled from a Fibonacci sphere and tested against Natural Earth 1:110m land polygons (public domain), giving 1344 dots at 2.1 KB gzipped against 139 KB for the PNG. No new dependency. Points are converted to unit vectors once on mount, so each frame is a rotation and a dot product per point with no trigonometry in the loop. Honours prefers-reduced-motion, pauses via IntersectionObserver when off-screen, and redraws at device pixel ratio on resize. The .hero-visual absolute positioning is removed: the globe is now a normal child of the hero grid, so it aligns with the headline instead of floating against the section box.
|
Important Draft PR not reviewedDraft PRs are not automatically reviewed by default.
To automatically review draft PRs, update your CodeRabbit configuration: reviews:
auto_review:
drafts: trueThanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
This branch has not been deployed
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.
Description
Follow-up to design review of the landing page. Three points were raised; all three are addressed here.
1.
components/Navbar.tsx: removed the hard drop shadow from the TECTONIC wordmark.The wordmark carried
drop-shadow-[0_2px_4px_rgba(0,0,0,0.4)]pure black at 40% sitting on a warm bronze gradient, which muddied the gradient and made the wordmark read as pasted onto the bar rather than part of it. The same declaration was duplicated in the footer and has been removed there too.Worth noting for reviewers:
public/Logo.svgis not actually a vector it is a 520×480 PNG base64-encoded inside an SVG wrapper (255 KB for a mark that renders 34 px tall). I decoded the pixel data to check whether a shadow was baked into the asset; it is not, so no re-export was needed here. Converting that file to a true vector is worth a separate issue.The navbar's own
box-shadowinglobals.cssis deliberately kept: the bar isfixedand translucent, so that shadow is the only thing separating it from the hero once the page scrolls.2.
app/page.tsx: removed the bouncing scroll arrow from the hero.A hard-coded
↓glyph in ananimate-bouncewrapper. It bypasseden.jsonunlike the rest of the hero copy, was invisible to screen readers, and was not keyboard reachable. The hero fits within one viewport on desktop, so no replacement cue was added.3.
components/HeroGlobe.tsx+lib/world-land.ts(new),app/page.tsx,app/globals.css— replaced the hero globe.The previous
tectonic-hero.pngdid not render as a sphere. Three separate causes stacked up:public/tectonic-hero.pngis 626×367, and the sphere ran off the left and bottom edges inside the file itself, so no CSS change could recover the missing geometry.min(90vw, 1200px), which is where the soft, broken linework came from.scale-x-[-1]on the image plusright: -4rem; bottom: -5remon.hero-visualmoved the sphere's centre outside the viewport, so only an arc survived.drop-shadow-2xlthen added a grey halo along the transparent edge.Replaced with
<HeroGlobe />, a small canvas component that draws a slowly rotating globe. Landmasses are rendered as an even dot field rather than as outlines, which suits the hero better than the previous grey-blue wireframe and matches the amber/bronze brand palette. The circle is exact by construction, and the canvas redraws at device pixel ratio so it stays sharp on high-density displays.The old
.hero-visualabsolute positioning has been removed entirely. The globe is now a normal child of the hero grid, so it centres against the headline instead of floating against the section box — which also fixes the misalignment the previous layout had.Addressed Issues:
Screenshots/Recordings:
Before
The globe's curve never closes, the scroll arrow sits under the copy, and the wordmark carries a hard black shadow.
After
Recording.2026-08-25.000441.mp4
Additional Notes:
Deliberately no globe library (
cobe,globe.gl, three.js) — the whole thing is plain canvas 2D over pre-computed geometry, so the dependency tree is unchanged.Rotation speed is a prop (
speed, default 2°/s — roughly three minutes per revolution) and easy to tune or set to0. Alternatives were built and compared before landing on this one, including real coastline outlines and a geodesic triangulated sphere; happy to swap if maintainers prefer a different treatment.Verified locally:
npm run lintreports 0 errors (the 5 remaining warnings are pre-existing onmain), andnpm run buildpasses.AI Usage Disclosure:
We encourage contributors to use AI tools responsibly when creating Pull Requests. While AI can be a valuable aid, it is essential to ensure that your contributions meet the task requirements, build successfully, include relevant tests, and pass all linters. Submissions that do not meet these standards may be closed without warning to maintain the quality and integrity of the project. Please take the time to understand the changes you are proposing and their impact. AI slop is strongly discouraged and may lead to banning and blocking. Do not spam our repos with AI slop.
Check one of the checkboxes below:
I have used the following AI models and tools:
claude-opus-5)HeroGlobecomponent.npm run lintandnpm run buildbefore opening this PR. I understand the changes and take responsibility for them.Checklist