Sitewright

Fade content

An opacity-first reveal wrapper: fade in once, fade in and out as it enters and leaves, or scrub the opacity with scroll position so content dissolves at the edges of its scroll area.

What it is for

Wrap long lists, gallery cards or article blocks that should dissolve into view or out of it.

Use it

1 · site.json
"effects": { "components": ["fade-content"] }
or on the command line
node ~/.claude/skills/sitewright/scripts/scaffold.mjs --config site.json --out ./my-site --components fade-content
2 · import it
import { FadeContent } from '@/components/fx/ui';

Files

  • components/fx/ui/FadeContent.tsx
  • components/fx/ui/_motion-a.tsx
  • components/fx/ui/_t2.ts
  • ui-fade-content.css styles

Source

Original to Sitewright. MIT licensed.

Credits and licences: third-party notices.

Accessibility

  • Keyboard. Components in the kit are written to be reached and used with the keyboard. Try it: press Tab inside the preview.
  • Reduced motion. With prefers-reduced-motion on, animation settles to its finished state at once.
  • Touch. Pointer-follow effects are skipped on touch screens; controls stay finger-sized.