Skip to content

Soft BentoMotion

Float Card

A satellite card for hero and CTA compositions: white clay, candy or the blue slab, with rounded-card and raised depth.

Live, interactive React component · light themeResponsive

About the Soft Bento Float Card

A satellite card for hero and CTA compositions: white clay, candy or the blue slab, with rounded-card and raised depth. With land it drops in with a squash on load; with float it drifts slowly (an ambient loop: one floating card per view, none in the CTA). It keeps the page's light or night mode even on the blue band. Position it from the page (absolute, in percentages from xl; in flow below). Cards stay straight, never rotated.

It is part of Soft Bento. The style’s 92 pieces share one set of tokens, type and motion, in a light and a dark theme, so whatever you take from it fits together.

To put it in your project, copy the prompt into Claude Code, OpenAI Codex or Cursor, or add the file and its styles by hand. The documentation walks through both.

See it on a full page

The pieces that sit beside this one in the same style.

All 14 in Hero Sections