Floating Elements

Create floating elements around a hero. Small decorative chips (icons in rounded accent-tinted squares) scattered around the hero headline, each bobbing gently up and down like a balloon on a string. Implementation: position each floater absolutely around the hero's edges (corners work best, they frame without covering text). Animate with a keyframe loop combining translateY(0 to -10px and back) and a slight rotation swing (-4deg to +5deg), ease-in-out, infinite. The critical detail: give every floater a different duration (4.5-6s) and delay, so they never bob in unison; synchronized floating looks mechanical. Sizes: 20-30px chips with the icon at ~55% of the chip. Style: accent color at ~9% background opacity, the icon in full accent. Mark them all aria-hidden='true', they're decoration. Keep floaters clear of the headline's bounding box at every point of their travel so they never overlap text. Under prefers-reduced-motion, render them static. Build the component, not this demo of it. - Ambient motion that IS the component may loop: a drifting background, a marquee, a spinner while something is genuinely loading. - Do not add any timer, interval, loop or script that performs a person's action by itself. No auto-hover, no auto-click, no cycling through states, no pretend submitting, no replaying the interaction on a schedule. - Every state that answers a person waits for a real event from that person. - Placeholder copy and sample content are welcome. Simulated behaviour is not.