Heidi component gallery

Components and CSS motion effects

Hashtags5 artifacts indexed18 tags

#css-modules4 #react4 #reduced-motion4 #zero-extra-packages4 #checkout2 #3d-transform #ai #button

Show more tags10

#css-keyframes #css-masks #css-motion #floating-ui #icon-button #logo-links #modal #pricing-card #source-matched #zero-dependency

Ask AI Logo Links

Responsive AI service links with CSS-mask logos and no UI package.

Details

Tags

ai
logo-links
css-masks
react
zero-extra-packages
css-modules

Preview visible

Files

ManifestPage JSON Guide Zip

Runtime: React
Preview: Compiled React preview
Exports: Source bundle, guide, zip, compiled preview
Packages: None
Assets: 5 assets
Motion: No motion

The iframe preview is rendered from the React artifact by the app build.

React · Compiled React previewPage JSON Guide Zip

components/ask-ai-logo-links.tsxtsx

Zip

Loading source...

Glassy Checkout Buttons

Checkout button variants with glassy surfaces and lightweight press states.

Details

Tags

button
checkout
css-modules
react
zero-extra-packages
reduced-motion

Preview visible

Files

ManifestPage JSON Guide Zip

Runtime: React
Preview: Compiled React preview
Exports: Source bundle, guide, zip, compiled preview
Packages: None
Assets: No assets
Motion: Transition

The iframe preview is rendered from the React artifact by the app build.

React · Compiled React previewPage JSON Guide Zip

examples/glassy-button-preview.tsxtsx

Zip

Loading source...

Purchase Plan Card

Pricing card with radio-plan state and reusable checkout actions.

Details

Tags

pricing-card
checkout
css-modules
react
zero-extra-packages
reduced-motion

Preview visible

Files

ManifestPage JSON Guide Zip

Runtime: React
Preview: Compiled React preview
Exports: Source bundle, guide, zip, compiled preview
Packages: None
Assets: No assets
Motion: Transition

The iframe preview is rendered from the React artifact by the app build.

React · Compiled React previewPage JSON Guide Zip

components/shop-purchase-plan-card.tsxtsx

Zip

Loading source...

Floating Icon Buttons

Small floating action buttons with transform-only hover motion.

Details

Tags

icon-button
floating-ui
css-modules
react
zero-extra-packages
reduced-motion

Preview visible

Files

ManifestPage JSON Guide Zip

Runtime: React
Preview: Compiled React preview
Exports: Source bundle, guide, zip, compiled preview
Packages: None
Assets: No assets
Motion: Transition, Backdrop filter

The iframe preview is rendered from the React artifact by the app build.

React · Compiled React previewPage JSON Guide Zip

examples/floating-icon-preview.tsxtsx

Zip

Loading source...

Flip Modal

CSS modal motion variants with tiny state triggers

Details

Tags

modal
css-motion
css-keyframes
3d-transform
zero-dependency
source-matched
reduced-motion

Preview visible

Effect

State

Files

ManifestPage JSON Guide Zip

Runtime: HTML/CSS/JS
Preview: Source-matched preview
Exports: Source bundle, guide, zip, preview HTML
Packages: None
Assets: No assets
Motion: Keyframes, 3D transform, Clip-path, Backdrop filter

The iframe preview is backed by the same HTML, CSS, and JS files in the source bundle.

HTML/CSS/JS · Source-matched previewPage JSON Guide Zip

effects/flip-modal/flip-modal.htmlhtml

Zip

Loading source...