SkillGitHub
All components
shader-hero

Shader hero

Uses a low-power WebGL field that reshapes around pointer intent.

  • Keyboard ready
  • Reduced motion
  • TypeScript
Scene
spatial · dark
Runtime cost
Heavy
Motion engine
motion + webgl
Installnpx shadcn@latest add https://motion-lexicon.pages.dev/r/shader-hero.json

Component behavior

Pointer input reshapes the focal wave field Uses a low-power WebGL field that reshapes around pointer intent.

Suitable events

Use for product introductions, scroll storytelling, and hero scenes.

Runtime information

Motion engine
motion, webgl
Runtime cost
Heavy
Dependencies
motion
Open public Registry JSON