Skip to content

feat: connect BrainSNN.com to Fractal Reality Lab #93

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
slavazeph-coder merged 1 commit into from
Jul 18, 2026
Merged

feat: connect BrainSNN.com to Fractal Reality Lab #93

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 20 additions & 4 deletions brainsnn-r3f-app/src/app/GaugeGapLanding.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import {
FlaskConical,
Layers3,
Microscope,
Orbit,
Play,
Share2,
Shield,
Expand All @@ -22,8 +23,17 @@ import '../styles/gaugegap.css';
import '../styles/arcade-discovery.css';

const CONTENT_SAMPLE = 'Everyone says this breakthrough changes everything. Here is what the evidence actually shows, what remains uncertain, and the one result worth paying attention to.';
const FRACTAL_LAB_URL = 'https://xioaisolutions.github.io/gaugegap-foundry/fractal-reality-lab/';

const DEEPER_TOOLS = [
{
id: 'fractal',
eyebrow: 'Flagship research experience',
title: 'Fractal Reality Lab',
description: 'Explore Mandelbrot and Julia dynamics, sonify finite orbits, compare recurring forms, and watch a BrainSNN-style spiking bridge respond.',
icon: Orbit,
action: 'Open the live lab',
},
{
id: 'soliton',
eyebrow: 'Research workspace',
Expand Down Expand Up @@ -80,6 +90,10 @@ export function GaugeGapLanding({ onStart, onNavigate, onOpenReconstruct }) {

function openLab(id) {
track('gaugegap_lab_clicked', { labId: id });
if (id === 'fractal') {
window.open(FRACTAL_LAB_URL, '_blank', 'noopener,noreferrer');
return;
}
if (ARCADE_IDS.has(id)) {
const url = new URL(window.location.href);
url.searchParams.set('lab', id);
Expand All @@ -105,6 +119,7 @@ export function GaugeGapLanding({ onStart, onNavigate, onOpenReconstruct }) {
</button>
<nav className="gg-nav-links" aria-label="Primary">
<button type="button" onClick={scrollToPlayground}>Arcade</button>
<a href={FRACTAL_LAB_URL} target="_blank" rel="noreferrer">Fractal Lab</a>

@gemini-code-assist gemini-code-assist Bot Jul 18, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

The newly added <a> tag for the "Fractal Lab" link does not inherit the navigation link styles defined in gaugegap.css. The stylesheet rules for .gg-nav-links specifically target button elements (e.g., .gg-nav-links button), meaning this anchor tag will appear unstyled and visually inconsistent with the other navigation items.

To maintain visual consistency, you can change this to a <button> element that triggers window.open on click, which will automatically inherit all the existing navigation styles. Alternatively, you would need to update the CSS selectors in gaugegap.css to also target a tags within .gg-nav-links.

Suggested change
<a href={FRACTAL_LAB_URL} target="_blank" rel="noreferrer">Fractal Lab</a>
<button type="button" onClick={() => window.open(FRACTAL_LAB_URL, '_blank', 'noopener,noreferrer')}>Fractal Lab</button>

@chatgpt-codex-connector chatgpt-codex-connector Bot Jul 18, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge Style the new primary-nav link consistently

At desktop widths where this navigation is visible, the new anchor does not receive the pill, color, padding, or hover styles applied to its neighboring controls because gaugegap.css:124-138 targets only .gg-nav-links button. It therefore renders using browser-default link styling; extend the navigation selectors to anchors or give this link an equivalent styled class.

Useful? React with 👍 / 👎.

<button type="button" onClick={() => scrollTo('clients')}>For organizations</button>
<button type="button" onClick={openResearch}>Research</button>
</nav>
Expand All @@ -128,10 +143,11 @@ export function GaugeGapLanding({ onStart, onNavigate, onOpenReconstruct }) {
</p>
<div className="gg-hero-actions">
<Button variant="primary" onClick={scrollToPlayground}>Enter the science arcade <ArrowRight size={17} /></Button>
<a className="button button-secondary" href={FRACTAL_LAB_URL} target="_blank" rel="noreferrer">Open Fractal Reality Lab <Orbit size={17} /></a>

@gemini-code-assist gemini-code-assist Bot Jul 18, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

high

The class name button button-secondary is used here, but the stylesheet gaugegap.css defines button styles using the .bsn-button prefix (e.g., .gg-hero-actions .bsn-button). Because of this, the anchor tag will not receive the intended layout styles (such as min-height: 56px, padding-inline: 26px, and border-radius: 12px), causing it to look unstyled or broken.

Please update the class name to use bsn-button bsn-button-secondary to ensure it aligns with the project's button styling conventions.

Suggested change
<a className="button button-secondary" href={FRACTAL_LAB_URL} target="_blank" rel="noreferrer">Open Fractal Reality Lab <Orbit size={17} /></a>
<a className="bsn-button bsn-button-secondary" href={FRACTAL_LAB_URL} target="_blank" rel="noreferrer">Open Fractal Reality Lab <Orbit size={17} /></a>

@chatgpt-codex-connector chatgpt-codex-connector Bot Jul 18, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge Apply the existing button classes to the Fractal CTAs

Use the existing bsn-button bsn-button-secondary classes here instead: neither button nor button-secondary is defined in the app, while the surrounding layout and responsive rules in gaugegap.css:259-264 and 1495-1504 explicitly target .bsn-button. As written, this CTA—and the identical final CTA—renders as a plain inline link and does not become a full-width mobile action like its neighboring buttons.

Useful? React with 👍 / 👎.

<Button variant="secondary" onClick={() => scrollTo('clients')}>Build for your audience <ArrowRight size={17} /></Button>
</div>
<div className="gg-hero-proof" aria-label="Product capabilities">
<div><strong>12 live</strong><span>Distinct experiments</span></div>
<div><strong>13 live</strong><span>12 arcade + flagship lab</span></div>
<div><strong>4 paths</strong><span>Clear first steps</span></div>
<div><strong>Client</strong><span>Custom pilot pathway</span></div>
<div><strong>Open</strong><span>Models and limits</span></div>
Expand Down Expand Up @@ -171,7 +187,7 @@ export function GaugeGapLanding({ onStart, onNavigate, onOpenReconstruct }) {
<ClientPathways />

<section id="labs" className="gg-labs" aria-labelledby="gg-labs-heading">
<div className="gg-section-heading gg-section-heading-wide"><div><p className="gg-kicker"><FlaskConical size={16} /> Beyond the public arcade</p><h2 id="gg-labs-heading">Three deeper tools. Three different jobs.</h2></div><p>The arcade builds intuition. These workspaces analyze content, expose claim boundaries and support deeper technical exploration.</p></div>
<div className="gg-section-heading gg-section-heading-wide"><div><p className="gg-kicker"><FlaskConical size={16} /> Beyond the public arcade</p><h2 id="gg-labs-heading">Four deeper tools. Four different jobs.</h2></div><p>The arcade builds intuition. These workspaces analyze content, expose claim boundaries and support deeper technical exploration.</p></div>
<div className="gg-lab-grid">
{DEEPER_TOOLS.map((lab, index) => { const Icon = lab.icon; return <article key={lab.id} className={`gg-lab-card gg-lab-card-${index + 1}`}><div className="gg-lab-card-art" aria-hidden="true"><Icon size={34} /><span /><span /><span /></div><div className="gg-lab-card-copy"><p>{lab.eyebrow}</p><h3>{lab.title}</h3><span>{lab.description}</span><button type="button" onClick={() => openLab(lab.id)}>{lab.action} <ArrowRight size={15} /></button></div></article>; })}
</div>
Expand All @@ -184,10 +200,10 @@ export function GaugeGapLanding({ onStart, onNavigate, onOpenReconstruct }) {

<TrustLadder onResearch={openResearch} />

<section className="gg-final-cta" aria-labelledby="gg-final-heading"><div className="gg-final-glow" /><p className="gg-kicker"><Sparkles size={16} /> Choose the next useful step</p><h2 id="gg-final-heading">Play a system—or build one for the people you need to reach.</h2><p>The public arcade proves the interaction model. A focused client pilot applies it to your own audience, concept and outcome.</p><div className="gg-hero-actions"><Button variant="primary" onClick={scrollToPlayground}>Enter the arcade <ArrowRight size={17} /></Button><Button variant="secondary" onClick={() => scrollTo('clients')}>Discuss a client pilot <ArrowRight size={17} /></Button></div></section>
<section className="gg-final-cta" aria-labelledby="gg-final-heading"><div className="gg-final-glow" /><p className="gg-kicker"><Sparkles size={16} /> Choose the next useful step</p><h2 id="gg-final-heading">Play a system—or build one for the people you need to reach.</h2><p>The public arcade proves the interaction model. A focused client pilot applies it to your own audience, concept and outcome.</p><div className="gg-hero-actions"><Button variant="primary" onClick={scrollToPlayground}>Enter the arcade <ArrowRight size={17} /></Button><a className="button button-secondary" href={FRACTAL_LAB_URL} target="_blank" rel="noreferrer">Explore the flagship lab <Orbit size={17} /></a><Button variant="secondary" onClick={() => scrollTo('clients')}>Discuss a client pilot <ArrowRight size={17} /></Button></div></section>

@gemini-code-assist gemini-code-assist Bot Jul 18, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

high

Similar to the hero CTA, the class name button button-secondary is used here instead of the project's standard .bsn-button prefix. This prevents the link from receiving the button styles defined under .gg-final-cta .bsn-button in gaugegap.css.

Please update the class name to bsn-button bsn-button-secondary to ensure correct styling.

Suggested change
<section className="gg-final-cta" aria-labelledby="gg-final-heading"><div className="gg-final-glow" /><p className="gg-kicker"><Sparkles size={16} /> Choose the next useful step</p><h2 id="gg-final-heading">Play a system—or build one for the people you need to reach.</h2><p>The public arcade proves the interaction model. A focused client pilot applies it to your own audience, concept and outcome.</p><div className="gg-hero-actions"><Button variant="primary" onClick={scrollToPlayground}>Enter the arcade <ArrowRight size={17} /></Button><a className="button button-secondary" href={FRACTAL_LAB_URL} target="_blank" rel="noreferrer">Explore the flagship lab <Orbit size={17} /></a><Button variant="secondary" onClick={() => scrollTo('clients')}>Discuss a client pilot <ArrowRight size={17} /></Button></div></section>
<section className="gg-final-cta" aria-labelledby="gg-final-heading"><div className="gg-final-glow" /><p className="gg-kicker"><Sparkles size={16} /> Choose the next useful step</p><h2 id="gg-final-heading">Play a system—or build one for the people you need to reach.</h2><p>The public arcade proves the interaction model. A focused client pilot applies it to your own audience, concept and outcome.</p><div className="gg-hero-actions"><Button variant="primary" onClick={scrollToPlayground}>Enter the arcade <ArrowRight size={17} /></Button><a className="bsn-button bsn-button-secondary" href={FRACTAL_LAB_URL} target="_blank" rel="noreferrer">Explore the flagship lab <Orbit size={17} /></a><Button variant="secondary" onClick={() => scrollTo('clients')}>Discuss a client pilot <ArrowRight size={17} /></Button></div></section>

</main>

<footer className="gg-footer"><div><span className="gg-brand-mark">G</span><p><strong>GaugeGap Foundry</strong><small>Playable science and interactive client experiences by BrainSNN.</small></p></div><nav><button type="button" onClick={scrollToPlayground}>Arcade</button><button type="button" onClick={() => scrollTo('clients')}>For organizations</button><button type="button" onClick={openResearch}>Research</button><button type="button" onClick={() => onStart?.('')}>BrainSNN</button><a href="mailto:hello@brainsnn.com">Contact</a></nav><p className="gg-footer-note">Public simulations are educational numerical models, not proof of physical claims. Research releases must state assumptions, diagnostics and limitations.</p><p className="gg-footer-legal">© {new Date().getFullYear()} GaugeGap Foundry · BrainSNN.com</p></footer>
<footer className="gg-footer"><div><span className="gg-brand-mark">G</span><p><strong>GaugeGap Foundry</strong><small>Playable science and interactive client experiences by BrainSNN.</small></p></div><nav><button type="button" onClick={scrollToPlayground}>Arcade</button><a href={FRACTAL_LAB_URL} target="_blank" rel="noreferrer">Fractal Lab</a><button type="button" onClick={() => scrollTo('clients')}>For organizations</button><button type="button" onClick={openResearch}>Research</button><button type="button" onClick={() => onStart?.('')}>BrainSNN</button><a href="mailto:hello@brainsnn.com">Contact</a></nav><p className="gg-footer-note">Public simulations are educational numerical models, not proof of physical claims. Research releases must state assumptions, diagnostics and limitations.</p><p className="gg-footer-legal">© {new Date().getFullYear()} GaugeGap Foundry · BrainSNN.com</p></footer>

@gemini-code-assist gemini-code-assist Bot Jul 18, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

The newly added "Fractal Lab" link in the footer navigation is an <a> tag, but the footer navigation styles in gaugegap.css specifically target button elements (e.g., .gg-footer nav button). As a result, this link will not inherit the correct color, padding, height, or hover states, breaking the visual consistency of the footer.

To resolve this, you can change the link to a <button> element that triggers window.open on click, which will immediately inherit all the correct styles.

Suggested change
<footer className="gg-footer"><div><span className="gg-brand-mark">G</span><p><strong>GaugeGap Foundry</strong><small>Playable science and interactive client experiences by BrainSNN.</small></p></div><nav><button type="button" onClick={scrollToPlayground}>Arcade</button><a href={FRACTAL_LAB_URL} target="_blank" rel="noreferrer">Fractal Lab</a><button type="button" onClick={() => scrollTo('clients')}>For organizations</button><button type="button" onClick={openResearch}>Research</button><button type="button" onClick={() => onStart?.('')}>BrainSNN</button><a href="mailto:hello@brainsnn.com">Contact</a></nav><p className="gg-footer-note">Public simulations are educational numerical models, not proof of physical claims. Research releases must state assumptions, diagnostics and limitations.</p><p className="gg-footer-legal">© {new Date().getFullYear()} GaugeGap Foundry · BrainSNN.com</p></footer>
<footer className="gg-footer"><div><span className="gg-brand-mark">G</span><p><strong>GaugeGap Foundry</strong><small>Playable science and interactive client experiences by BrainSNN.</small></p></div><nav><button type="button" onClick={scrollToPlayground}>Arcade</button><button type="button" onClick={() => window.open(FRACTAL_LAB_URL, '_blank', 'noopener,noreferrer')}>Fractal Lab</button><button type="button" onClick={() => scrollTo('clients')}>For organizations</button><button type="button" onClick={openResearch}>Research</button><button type="button" onClick={() => onStart?.('')}>BrainSNN</button><a href="mailto:hello@brainsnn.com">Contact</a></nav><p className="gg-footer-note">Public simulations are educational numerical models, not proof of physical claims. Research releases must state assumptions, diagnostics and limitations.</p><p className="gg-footer-legal">© {new Date().getFullYear()} GaugeGap Foundry · BrainSNN.com</p></footer>

</div>
);
}
Loading