logosIntermediateanimation
Floating Tech Pills
A cloud of tech-stack pills that drift and rotate like floating chips.
Claude prompt
Drop this into Claude Code, claude.ai, or your AI tool of choice to regenerate or remix this component from scratch.
Build a hero with floating tech-stack pill badges: a 2-column layout (Instrument Serif italic 'components made with:' on the left, pills on the right). Each pill is absolutely positioned, has a different brand color (cyan/orange/black/pink/purple/yellow/green/red), a slight base rotation, and floats with a 7-9s ease-in-out infinite animation that translates ±10px and rotates ±5deg around the base. Use CSS variables for per-pill rotation values. On mobile stack to single column. The result should feel like Matter.js physics chips without any actual physics library.
Code
html
<!--
Source: Vibedex
https://vibedex.io
License: MIT
Surfaced via https://vibedex.io/components/vbx-physics-pills
-->
<section class="hero"><div class="copy"><h1>components made with:</h1></div><div class="pills"><span class="pill p1">React</span><span class="pill p2">motion</span><span class="pill p3">matter-js</span><span class="pill p4">tailwind</span><span class="pill p5">typescript</span><span class="pill p6">drei</span><span class="pill p7">three.js</span><span class="pill p8">vite</span></div></section>