Skip to content

Jm/intorg 729 hero network animated2 Fixes INTORG-729 #304

Closed
JonathanMatthey wants to merge 43 commits into
stagingfrom
jm/intorg-729-hero-network-animated2
Closed

Jm/intorg 729 hero network animated2 Fixes INTORG-729 #304
JonathanMatthey wants to merge 43 commits into
stagingfrom
jm/intorg-729-hero-network-animated2

Conversation

@JonathanMatthey
Copy link
Copy Markdown
Collaborator

@JonathanMatthey JonathanMatthey commented May 20, 2026

Summary

  • Rebuild Foundation header nav with new structure and mega-menu support (FoundationNavMenu, FoundationNavActions)
  • Refactor FoundationLogo to use separate .svg files via ?raw imports instead of inline base64 constants
  • Add scroll-driven AnimatedNetwork component to homepage (CSS-only, no JS, reduced-motion safe)
  • Fix nav background/transition flash on page load via scoped CSS dark-theme baseline

Related Issue

Fixes INTORG-729

Checks

  • pnpm run format
  • pnpm run lint

PR Checklist

  • PR title follows Conventional Commits (e.g. feat: ..., fix: ...)
  • Linked issue included
  • Scope is focused (target ~10-20 files when possible)
  • Screenshots for UI changes (if applicable)

JonathanMatthey and others added 30 commits May 19, 2026 15:27
@JonathanMatthey
foundation header nav
d6be0b9
@JonathanMatthey
Merge branch 'jm/intorg-677-foundation-nav' into jm/intorg-677-founda…
b064bd8 
…tion-nav2

# Conflicts:
#	src/components/layout/FoundationFooter.astro
#	src/components/shared/Button.astro
#	src/components/shared/Icon.astro
#	src/components/shared/LinkButton.astro
#	src/components/shared/buttonVariants.ts
#	src/config/foundation-navigation.es.json
#	src/config/foundation-navigation.json
#	src/data/ui.ts
#	src/layouts/FoundationPageLayout.astro
#	src/types/navigation.ts
@JonathanMatthey
feat(logos): inline foundation SVG logos with header theme swapping
660909f
@JonathanMatthey
refactor(button): rename hasIcon prop to iconSide
1d3055d
@JonathanMatthey
fix(nav): update foundation menu links and labels
01d4fe7
@JonathanMatthey
style(headers): use desktop breakpoint token consistently
a741be1
@JonathanMatthey
feat(nav): rebuild foundation mobile drawer and header theming
0f2bb65
@JonathanMatthey
refactor - header nav
fac7200
@JonathanMatthey
move navlinkmenu
af18ff1
@JonathanMatthey
simplify logo
c41a550
@JonathanMatthey
spacing
89c044f
@JonathanMatthey
fix - mobile tabbing
0c5b508
@JonathanMatthey @cursoragent
fix(nav): manage drawer inert in JS and tidy header markup
3ac93a3 
Co-authored-by: Cursor <cursoragent@cursor.com>
@JonathanMatthey
adjust sizes
93d0c0b
@JonathanMatthey
replace space- tailwind classes
a3f687a
@JonathanMatthey
spacings
00266e9
@JonathanMatthey
pnpm format
fc0e8a2
@JonathanMatthey
animate underlien
dd33189
@JonathanMatthey
update nav dark and remove space- classes
2aa019a
@JonathanMatthey
pnpm format
a325c10
@JonathanMatthey
change copy
33e1f88
@JonathanMatthey
language switcher
4d5b299
@JonathanMatthey
underline
06dff8c
@JonathanMatthey
fix language switcher hover
8ce677e
@JonathanMatthey
hover language
55086ac
@JonathanMatthey
revert
3eb4c8f
@JonathanMatthey
dry
4176a9c
@JonathanMatthey
fix mobile active link
927f1d7
@JonathanMatthey
pnpm format
5aa3b4c
@JonathanMatthey
this is neede for dark nav over second section
f06ce19
@JonathanMatthey JonathanMatthey self-assigned this May 20, 2026
@netlify
Copy link
Copy Markdown

netlify Bot commented May 20, 2026 •
edited
Loading

✅ Deploy Preview for interledger-org-v5 ready!

Name Link
🔨 Latest commit c34b6ac
🔍 Latest deploy log https://app.netlify.com/projects/interledger-org-v5/deploys/6a1591248860220008a07c55
😎 Deploy Preview https://deploy-preview-304--interledger-org-v5.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@JonathanMatthey JonathanMatthey changed the base branch from staging to jm/intorg-677-foundation-nav2 May 20, 2026 20:53
Base automatically changed from jm/intorg-677-foundation-nav2 to staging May 21, 2026 05:36
Infi-Knight
Infi-Knight reviewed May 21, 2026
View reviewed changes
Comment thread src/components/homepage/AnimatedNetwork.astro Outdated
transform-origin: 50% 52%; /* registration mark in the SVG (960/1920, 1648/3186) */
will-change: transform;
animation: network-rotate linear both;
animation-timeline: --network-track;
Copy link
Copy Markdown
Contributor

@Infi-Knight Infi-Knight May 21, 2026

Choose a reason for hiding this comment

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

is this tested on Firefox as well? from what I can see the property is not supported in firefox so we should confirm the fallback https://caniuse.com/?search=animation-timeline

Comment thread src/components/homepage/AnimatedNetwork.astro
slot="media"
class="mx-auto flex w-full items-center overflow-hidden rounded-3xl bg-black tablet:w-[80%] desktop:mx-0 desktop:w-full"
>
<VideoEmbed
Copy link
Copy Markdown
Contributor

@Infi-Knight Infi-Knight May 21, 2026

Choose a reason for hiding this comment

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

the section is being repeated twice I think

Infi-Knight
Infi-Knight requested changes May 21, 2026
View reviewed changes
Comment thread src/components/homepage/AnimatedNetwork.astro
alt=""
width="1920"
height="3186"
loading="lazy"
Copy link
Copy Markdown
Contributor

@Infi-Knight Infi-Knight May 21, 2026 •
edited
Loading

Choose a reason for hiding this comment

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

This decoration sits immediately after the hero, so on most viewports it's near-fold. Lazy-loading + scroll-driven animation can mean the animation runs against an undecoded image on first scroll. For a 5–6 KB SVG, just drop loading="lazy" (or use eager).

Comment thread src/components/homepage/AnimatedNetwork.astro
opacity: 1;
}
to {
width: 1500vmax;
Copy link
Copy Markdown
Contributor

@Infi-Knight Infi-Knight May 21, 2026 •
edited
Loading

Choose a reason for hiding this comment

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

4vw → 1500vmax is layout-bound and wasteful.
Width animations trigger layout each frame. Combined with will-change: width (which only hints layers for transforms it doesn't help width), this is the most expensive way to do a growing disc. Use transform: scale() from a fixed seed size with will-change: transform and you get the same visual on the compositor.

@JonathanMatthey JonathanMatthey marked this pull request as ready for review May 26, 2026 12:25
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@Infi-Knight Infi-Knight Infi-Knight requested changes

@JoblersTune JoblersTune Awaiting requested review from JoblersTune

@Anca2022 Anca2022 Awaiting requested review from Anca2022

Assignees

@JonathanMatthey JonathanMatthey

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@JonathanMatthey @Infi-Knight