Redesign: blueprint-grid dark experience site#2
Conversation
Rebuild experience.heygaia.io as a single scroll-told story with a bordered-grid "blueprint" design language — a constrained, centered column held by hairline rails and crosshairs, Doto display type over a JetBrains Mono body, on a mysterious dark / sci-fi black canvas. Sections: hero (three-line thesis), manifesto, smart glasses (spec sheet), GAIA (live, the one accent), household robotics, the connection (full-bleed climax), and close. Crafted details: crosshair reticle cursor, corner crop-marks, gutter section indices, film grain + vignette, bracket link hovers, dotted spec-leaders, a redacted "classified" spec, console easter egg, custom 404, and humans.txt. All JSON-LD/SEO preserved. Images are on-theme blueprint placeholders (swap via ImageFrame's src prop). Full design + copy + image prompts in docs/plans. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Entire-Checkpoint: 07b0c3907781
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (13)
✅ Files skipped from review due to trivial changes (1)
🚧 Files skipped from review as they are similar to previous changes (6)
📝 WalkthroughSummary by CodeRabbit
WalkthroughThe PR replaces the homepage’s inline article with a component-based scroll narrative. It adds new section and UI primitives, rewrites the global styling and layout shell, introduces a 404 page and humans.txt, expands font configuration, and adds a design-spec document for the revamp. ChangesExperience Site Revamp
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 Stylelint (17.14.0)src/styles/global.cssError: ENOENT: no such file or directory, open '/.stylelintrc.json' Thanks 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 |
Deploying experience with
|
| Latest commit: |
6bf0525
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://cf482c36.experience-dng.pages.dev |
| Branch Preview URL: | https://redesign-experience-site.experience-dng.pages.dev |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (2)
docs/plans/2026-06-02-experience-site-revamp-design.md (1)
112-121: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winNaming drift: update §3 and §7 to match implemented component names.
§3 lists "03 CONNECTION" correctly, but §5 and §7 use "Convergence" instead of "Connection" for the same section. §5 also references unimplemented names "Work (with ProductRow)" while the actual components are
SmartGlasses,Gaia,Robotics. Update §5 and §7 to match the actual component architecture:Hero,Manifesto,SmartGlasses,Gaia,Robotics,Connection,Close.Similarly, §5's "GridFrame" wrapper does not exist as a named component; the actual implementation uses
Layout.astrowithdiv.frame. Align the build notes with the actual file structure.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@docs/plans/2026-06-02-experience-site-revamp-design.md` around lines 112 - 121, The plan document has naming drift between the section labels and the implemented components, so update the architecture notes to use the real component names consistently. In the referenced section, replace any “Convergence” wording with “Connection,” change the work-area references from “Work (with ProductRow)” to the actual components `SmartGlasses`, `Gaia`, and `Robotics`, and align the overall component list to `Hero`, `Manifesto`, `SmartGlasses`, `Gaia`, `Robotics`, `Connection`, `Close`. Also remove or rename the nonexistent `GridFrame` wrapper in the build notes so they match the actual `Layout.astro` plus `div.frame` structure.src/styles/global.css (1)
232-276: 🎯 Functional Correctness | 🔵 Trivial | ⚡ Quick winMirror custom hover states on keyboard focus.
.link-inlineand.link-bracketdefine custom hover affordances, but keyboard focus does not get the same visual treatment. Add:focus-visibleparity, especially since.link-bracketis used for the 404 return-home action.Proposed focus-state parity
.link-inline:hover { color: var(--fg); border-color: var(--fg); } +.link-inline:focus-visible { + color: var(--fg); + border-color: var(--fg); + outline: 1px solid var(--fg); + outline-offset: 4px; +} -.link-bracket:hover { +.link-bracket:hover, +.link-bracket:focus-visible { color: var(--fg); } -.link-bracket:hover::before, -.link-bracket:hover::after { +.link-bracket:hover::before, +.link-bracket:hover::after, +.link-bracket:focus-visible::before, +.link-bracket:focus-visible::after { opacity: 1; color: var(--fg); } +.link-bracket:focus-visible { + outline: 1px solid var(--fg); + outline-offset: 4px; +}🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/styles/global.css` around lines 232 - 276, The custom hover styles for .link-inline and .link-bracket are not mirrored on keyboard focus, so add :focus-visible rules to match the existing hover affordances. Update the .link-inline and .link-bracket selectors in global.css so focused links use the same color, border/brace visibility, and emphasis as their hover states, keeping .link-bracket::before and .link-bracket::after behavior consistent for keyboard users.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@docs/plans/2026-06-02-experience-site-revamp-design.md`:
- Around line 205-215: The §03 section still conflicts with the “locked” status
because it retains two copy variants and an open decision note. In the document
section around the “03 · The connection” heading, either choose and keep only
one variant, remove the alternate copy and any “Open: pick §03 (A/B)” language,
or revise the footer/status text so it clearly states that §03 is still
unresolved; make the wording consistent across the section and the document
status.
In `@src/components/sections/Close.astro`:
- Line 5: The X/Twitter anchor in Close.astro is always rendered even when
siteConfig.social.twitter is missing, which produces a broken undefined link.
Update the Close component so the twitter handle is only normalized and rendered
when the optional config value exists, and otherwise omit the link block
entirely; use the existing twitter variable and the anchor section around the
social links to gate the output.
In `@src/components/ui/ImageFrame.astro`:
- Around line 16-19: The ImageFrame component is defaulting alt to an empty
string and the image render path is not preserving an accessible name when src
is used. Update ImageFrame.astro so the Image branch uses the provided label as
the default accessible text (or otherwise requires a meaningful alt/label
pairing) instead of silently rendering decorative images. Keep the fix localized
to the ImageFrame props/defaults and the image rendering logic so callers don’t
have to remember to supply both fields.
In `@src/styles/global.css`:
- Line 53: The text-rendering declaration uses a camel-cased keyword that still
violates the keyword-casing rule. Update the global stylesheet’s text-rendering
value to the lowercase form, or explicitly exempt this property if the
camel-cased spelling is intentional, so the style is consistent with the lint
rule.
---
Nitpick comments:
In `@docs/plans/2026-06-02-experience-site-revamp-design.md`:
- Around line 112-121: The plan document has naming drift between the section
labels and the implemented components, so update the architecture notes to use
the real component names consistently. In the referenced section, replace any
“Convergence” wording with “Connection,” change the work-area references from
“Work (with ProductRow)” to the actual components `SmartGlasses`, `Gaia`, and
`Robotics`, and align the overall component list to `Hero`, `Manifesto`,
`SmartGlasses`, `Gaia`, `Robotics`, `Connection`, `Close`. Also remove or rename
the nonexistent `GridFrame` wrapper in the build notes so they match the actual
`Layout.astro` plus `div.frame` structure.
In `@src/styles/global.css`:
- Around line 232-276: The custom hover styles for .link-inline and
.link-bracket are not mirrored on keyboard focus, so add :focus-visible rules to
match the existing hover affordances. Update the .link-inline and .link-bracket
selectors in global.css so focused links use the same color, border/brace
visibility, and emphasis as their hover states, keeping .link-bracket::before
and .link-bracket::after behavior consistent for keyboard users.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 711065cc-8ad6-4044-a529-d19397a0e589
📒 Files selected for processing (19)
astro.config.mjsdocs/plans/2026-06-02-experience-site-revamp-design.mdpublic/humans.txtsrc/components/sections/Close.astrosrc/components/sections/Connection.astrosrc/components/sections/Gaia.astrosrc/components/sections/Hero.astrosrc/components/sections/Manifesto.astrosrc/components/sections/Robotics.astrosrc/components/sections/SmartGlasses.astrosrc/components/ui/ImageFrame.astrosrc/components/ui/Redacted.astrosrc/components/ui/Section.astrosrc/layouts/Footer.astrosrc/layouts/Layout.astrosrc/layouts/Navbar.astrosrc/pages/404.astrosrc/pages/index.astrosrc/styles/global.css
| ### 03 · The connection *(no on-page heading)* | ||
| > People ask why a software company is building glasses and robots. We don't really think of ourselves as a software company. We think most of what fills your day — the digital admin, the errands, the housework — is work you never should have been doing. GAIA takes the digital load. The glasses carry it with you. Robots take the physical load at home. The screen was just where we started. | ||
|
|
||
| *Alternate, plainer:* | ||
| > Three products, one reason: the work of running your life shouldn't fall on you. Software that knows you, hardware that goes with you, machines that act for you. | ||
|
|
||
| *This ties the page together: GAIA's manifesto already frames digital admin as | ||
| "servants to our tools" stealing your time; robotics extends the exact same belief | ||
| to physical work. One thesis — give people their time back — pointed at the screen, | ||
| the body, and the home.* | ||
|
|
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
Unresolved §03 A/B variant contradicts "locked" status.
The document footer claims "direction + full copy locked," yet §03 still presents two alternate versions with the note "Open: pick §03 (A/B), commit or keep iterating." Resolve this ambiguity: either mark which variant was implemented, remove the alternate, or update the status note to reflect that §03 remains open.
🧰 Tools
🪛 LanguageTool
[style] ~212-~212: ‘exact same’ might be wordy. Consider a shorter alternative.
Context: ...tealing your time; robotics extends the exact same belief to physical work. One thesis — g...
(EN_WORDINESS_PREMIUM_EXACT_SAME)
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@docs/plans/2026-06-02-experience-site-revamp-design.md` around lines 205 -
215, The §03 section still conflicts with the “locked” status because it retains
two copy variants and an open decision note. In the document section around the
“03 · The connection” heading, either choose and keep only one variant, remove
the alternate copy and any “Open: pick §03 (A/B)” language, or revise the
footer/status text so it clearly states that §03 is still unresolved; make the
wording consistent across the section and the document status.
| import Section from "../ui/Section.astro"; | ||
| import { siteConfig } from "../../config/site"; | ||
|
|
||
| const twitter = siteConfig.social.twitter?.replace("@", ""); |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Don't render the X link from an optional handle.
siteConfig.social.twitter is treated as optional here, but the anchor always renders. If that config is missing, this ships https://twitter.com/undefined as a broken contact link.
Proposed fix
const twitter = siteConfig.social.twitter?.replace("@", "");
---
- <a
- class="link-bracket"
- href={`https://twitter.com/${twitter}`}
- target="_blank"
- rel="noopener"
- >
- x
- </a>
+ {twitter && (
+ <a
+ class="link-bracket"
+ href={`https://twitter.com/${twitter}`}
+ target="_blank"
+ rel="noopener"
+ >
+ x
+ </a>
+ )}Also applies to: 27-34
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/components/sections/Close.astro` at line 5, The X/Twitter anchor in
Close.astro is always rendered even when siteConfig.social.twitter is missing,
which produces a broken undefined link. Update the Close component so the
twitter handle is only normalized and rendered when the optional config value
exists, and otherwise omit the link block entirely; use the existing twitter
variable and the anchor section around the social links to gate the output.
| alt = "", | ||
| label, | ||
| caption, | ||
| size = "tall", |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Preserve an accessible name when src is used.
Line 16 defaults alt to "", and the image branch on Line 27 drops the required label. The first real asset added through this component will render as decorative unless every caller remembers to supply a separate alt.
Suggested fix
const {
src,
- alt = "",
+ alt,
label,
caption,
size = "tall",
class: cls = "",
} = Astro.props as Props;
@@
- <img src={src} alt={alt} loading="lazy" decoding="async" />
+ <img src={src} alt={alt ?? label} loading="lazy" decoding="async" />Also applies to: 27-28
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/components/ui/ImageFrame.astro` around lines 16 - 19, The ImageFrame
component is defaulting alt to an empty string and the image render path is not
preserving an accessible name when src is used. Update ImageFrame.astro so the
Image branch uses the provided label as the default accessible text (or
otherwise requires a meaningful alt/label pairing) instead of silently rendering
decorative images. Keep the fix localized to the ImageFrame props/defaults and
the image rendering logic so callers don’t have to remember to supply both
fields.
| letter-spacing: -0.01em; | ||
| overflow-x: hidden; | ||
| -webkit-font-smoothing: antialiased; | ||
| text-rendering: optimizeLegibility; |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Verify no mixed-case text-rendering keyword remains.
rg -n --iglob 'global.css' 'text-rendering:\s*optimizeLegibility\b'Repository: theexperiencecompany/www
Length of output: 162
🏁 Script executed:
#!/bin/bash
set -euo pipefail
printf '\n-- src/styles/global.css (around line 53) --\n'
sed -n '45,60p' src/styles/global.css | cat -n
printf '\n-- text-rendering occurrences --\n'
rg -n 'text-rendering|optimizeLegibility|optimizelegibility' src/styles/global.css . \
-g '!node_modules' -g '!.git' || true
printf '\n-- stylelint config candidates --\n'
fd -a 'stylelint*' . -t f
rg -n '"value-keyword-case"|value-keyword-case|text-rendering' . \
-g '!node_modules' -g '!.git' -g '!dist' -g '!build' || trueRepository: theexperiencecompany/www
Length of output: 1241
Lowercase the text-rendering keyword here. optimizeLegibility still trips the keyword-casing rule; use optimizelegibility or exempt this property if the camel-cased form is intentional.
🧰 Tools
🪛 Stylelint (17.14.0)
[error] 53-53: Expected "optimizeLegibility" to be "optimizelegibility" (value-keyword-case)
(value-keyword-case)
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/styles/global.css` at line 53, The text-rendering declaration uses a
camel-cased keyword that still violates the keyword-casing rule. Update the
global stylesheet’s text-rendering value to the lowercase form, or explicitly
exempt this property if the camel-cased spelling is intentional, so the style is
consistent with the lint rule.
Source: Linters/SAST tools
- Switch product sections to a single vertical column (no side-by-side rows) - Reorder the story: GAIA (live) -> smart glasses -> household robotics - Trim robotics to a short, quiet "what's next" beat (no image / no specs) - Narrow + center the spec list; consistent lead -> prose typography across sections - Cursor reticle is now a plain plus (no circle) - Add five generated white-on-black blueprint images (webp, ~430 KB total) and wire them into the manifesto figure, GAIA planet, glasses blueprint, and the connection climax (march of progress + Creation-of-Adam touch) Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Entire-Checkpoint: e3ffe416b596
1 participant
What
A full redesign of experience.heygaia.io — the umbrella site for The Experience Company (GAIA, smart glasses, household robotics).
It's now a single dark, mysterious, scroll-told story in a bordered-grid "blueprint" design language: a constrained, centered column held by hairline rails and
+crosshairs, Doto display type over a JetBrains Mono body, on a pure-black canvas.Sections
00hero (three-line thesis) ·01manifesto ·02smart glasses (spec sheet) ·03GAIA (live — the one accent) ·04household robotics ·05the connection (full-bleed climax) ·06close.Copy is written in a plain, confident, Jobs-ish voice — GAIA's section is verified against the live product + manifesto; robotics leans on the "AI should do the grunt work, not the art" thesis.
Crafted details
[ … ]· dotted spec-leaders · spec-row hover████"classified" spec on the glasses404·humans.txt· footer version tag● live todayaccent (GAIA only); everything else monochromeprefers-reduced-motionrespectedStructure
All existing JSON-LD / SEO metadata is preserved.
Notes
fig. 0Xcaptions). Swap them in viaImageFrame'ssrcprop — no markup changes needed. Copy-paste GPT image prompts are indocs/plans.astro.config.mjsadds JetBrains Mono (--font-body) alongside Doto.astro build(clean). Note:pnpm buildneedspnpm approve-buildsfor sharp + esbuild in this environment.How to review
pnpm dev(or./node_modules/.bin/astro dev) → http://localhost:4321/🤖 Generated with Claude Code