Shape Blur
A crisp logo or shape that drifts out of focus under the pointer like a camera lens.
Use Shape Blur in your project
Choose JavaScript or TypeScript and plain CSS or Tailwind. Enable JavaScript for the interactive preview, customization controls and source tabs.
npx shadcn@latest add @react-bits/ShapeBlur-TS-TWRelated components
- Elastic Mesh
Turns text or any logo into a puffy inflated shape you can press, poke and stretch like jelly.
- Fade Content
Wrapper that fades content in on scroll, plain or out of focus, from washed-out gray, or through grain, mist and pixel blocks.
- Animated Content
Wrapper that reveals its content on scroll with slides, blur, 3D tilts, soft wipes and staggered children.