Task: Add noscript fallbacks to homepage hero animations #485

New issue

Open

opened 2026-04-16 07:11:38 +00:00 by jjalangtry · 0 comments

jjalangtry commented

2026-04-16 07:11:38 +00:00

(Migrated from github.com)

Problem

The homepage hero has two JS-dependent components:

DancingLetters (`next/components/dancing-letters.tsx`) — wraps each letter in a Framer Motion `<motion.span>`. Without JS the letters are present from SSR but static; however the interactive hover/click animations are lost silently.
HeroImage (`next/app/HeroImage.tsx`) — an Embla Carousel with 3 images. Without JS only the first slide renders, with no navigation controls and no indication there are more images.

Affected Files

`next/app/HeroCTA.tsx`
`next/components/dancing-letters.tsx`
`next/app/HeroImage.tsx`

Fix

HeroCTA: Ensure the headline text renders in a plain `` from SSR so it is never blank.
HeroImage: Add a `
```

## Problem The homepage hero has two JS-dependent components: 1. **DancingLetters** (\`next/components/dancing-letters.tsx\`) — wraps each letter in a Framer Motion \`<motion.span>\`. Without JS the letters are present from SSR but static; however the interactive hover/click animations are lost silently. 2. **HeroImage** (\`next/app/HeroImage.tsx\`) — an Embla Carousel with 3 images. Without JS only the first slide renders, with no navigation controls and no indication there are more images. ## Affected Files - \`next/app/HeroCTA.tsx\` - \`next/components/dancing-letters.tsx\` - \`next/app/HeroImage.tsx\` ## Fix 1. **HeroCTA**: Ensure the headline text renders in a plain \`<span>\` from SSR so it is never blank. 2. **HeroImage**: Add a \`<noscript>\` block that renders all 3 hero images stacked, or at minimum shows the static first image with a note. \`\`\`html <noscript> <img src="/hero-1.jpg" alt="SSE hero image" /> <img src="/hero-2.jpg" alt="SSE hero image" /> <img src="/hero-3.jpg" alt="SSE hero image" /> </noscript> \`\`\`