# Floating Icon Buttons

Small floating action buttons with transform-only hover motion.

## Artifact

- ID: shop-floating-icons
- Runtime: React
- Preview: Compiled React preview
- Manifest schema: 1
- Packages: None
- Tags: #icon-button, #floating-ui, #css-modules, #react, #zero-extra-packages, #reduced-motion
- Source: /components/shop-floating-icons/code
- Manifest: /components/shop-floating-icons/manifest
- Preview route: /components/shop-floating-icons/react-preview
- Download: /components/shop-floating-icons/download

## Files

- examples/floating-icon-preview.tsx (tsx, 1809 bytes, sha256 8f96ff7e996e61fba63c1a85a3f406443aea4639062664253fbadc557e22482a)
- components/shop-floating-icon-button.tsx (tsx, 760 bytes, sha256 bf8fd455db4a6503338e5ebf871e63c0bb2c9cf247d68770415ac5b103ca3579)
- components/shop-floating-icon-button.module.css (css, 4226 bytes, sha256 83a7eadb718df066907513c7c560d73eea99a99b04083b4e330532d6b555472f)

## Assets

- None

## Integration Steps

1. Copy the files listed below into your React app.
2. Keep CSS Module files beside the TSX files that import them.
3. Preserve the relative paths between `components/shop-floating-icon-button.tsx`, `components/shop-floating-icon-button.module.css`.
4. Start from `examples/floating-icon-preview.tsx` to see the intended composition.
5. Move any `public/` assets into your app public directory at the same path, or update the asset URLs.

## Motion And Performance

- Motion types: transition, backdrop-filter
- Animated properties: transform, opacity, background-color, backdrop-filter
- Reduced motion: yes
- Hover and pressed affordances use scale transforms and opacity.
- Backdrop-filter is isolated to the small icon surface.