design-infraReport a problem or share feedback← Catalog
Refine Frame
freereact-bits/refine-frame
Reserved-aspect frame that walks any media through queued, generating, refining and complete without layout shift: each stage is one blur, saturate, scale and opacity tween, a soft band sweeps while it works, a chip reports the stage, and an error dims the picture behind a retry pill.
$
npx shadcn@latest add @react-bits/RefineFrame-TS-TWnpm deps: @hugeicons/react, @hugeicons/core-free-icons
- Source
- React Bits
- Kind
- component
- Categories
- misc
- Use as
- drop-in — replaces your component
- Applies to
- misc
- Motion
- on state · subtle · canvas · high cost · respects reduced motion
- Tags
- micro
- Licence
- MIT + Commons Clause: free to use in commercial apps/sites, but you may not sell or redistribute the components themselves (alone, bundled, or ported). React Bits Pro is a separate paid product.
- Live demo
- www.reactbits.dev
- Docs
- www.reactbits.dev
Similar
Compare all 4 →- Distorted Glasscult-ui/distorted-glassA glass morphism effect component using SVG filters with fractal noise to create visual transitions between sections
- Morphing Glyph Cloudoriginkit/morphing-glyph-cloud
- Fluid Glassreact-bits/fluid-glassGlassmorphism container with animated liquid distortion refraction.