MSUI3DAI
Mara Sol
Directora creativa
128 proyectos48k seguidores
HTML + CSSCards
Profile card with orbiting skills
A profile card where small skill tags circle slowly around the avatar, above the name and a couple of stats.
Settings
16px
1x
Code
<article class="uv-corbit"><div class="orbit"><i>MS</i><b>UI</b><b>3D</b><b>AI</b></div><h3>Mara Sol</h3><p>Creative director</p><div><span>128 <small>proyectos</small></span><span>48k <small>seguidores</small></span></div><button>Connect</button></article>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Cards
Where to use it
A friendly way to show what someone does before reading a word. Try it on the speakers page of a tech conference, a freelancer marketplace or the team section of a creative agency, with each person's skills turning around their photo. This animated profile card also leaves space for stats and a “Connect” button.
Keep the tags to two or three letters or a single icon; long words will not fit in the little bubbles. On a team page with twenty people, the constant rotation gets busy, so save it for a featured profile or a short list.