affectUI › Illustrations

Animated card illustrations for React

Small animated scenes for the cards of a landing page or an empty state – drawn with HTML, CSS and SVG inside one React file, so they stay sharp, follow light and dark mode and need no Lottie files or animation library.

17 React illustrations – 15 free.

  • Agent Team – A prompt types itself and branches out into three agents, each with a role and overlapping tool logos
  • Cover Flow – Browse covers in 3D – drag, flick or scrub the row, it springs to the nearest cover; images drift in their frames over a soft reflection
  • Empty Calendar – Stack of calendar cards marked empty, fanning out on hover
  • Enrichment Orbit – Grok tile inside two rings with comets and data nodes orbiting around it
  • Frost Cloud – A frosted white cloud with eyes cut out of it, on a red-orange or blue sky – it floats, turns to look around, blinks, follows the pointer and bounces with a wink when clicked
  • Ghosted Chat – Unanswered chat messages marked as read, with a thumbs-down reply on hover
  • Glass Folder – Glassy blue folder with documents behind a frosted pocket that tips open on hover
  • Glow Cloud – A glowing cloud with eyes in blue or red-orange – it floats, turns to look around, blinks, follows the pointer and bounces with a wink when clicked
  • Integration Grid – Honeycomb-like wall of integration logos around a bright centre tile with your product mark, fading out toward the edges
  • Layer Stack – Isometric stack of five layers with a list beside it – the chosen entry lifts its layer out in color
  • Lead Sourcing – ChatGPT tile linked to Gmail and Grok, with a shine running along the connection
  • Logo Cluster – Your mark on a white disc in the middle – company logos bounce out of it and settle around it
  • Model Wheel – AI model names on a turning drum – the rows bend away at the edges and each model lands on a soft gray fill
  • Outreach Branches – Lines branching out to Gmail, Slack and Notion with colored pulses flowing down
  • Side Folder – Glassy blue folder on its side, documents sliding out to the right as the pocket swings open on hover
  • Tab Overload – Overlapping browser windows where the highlight follows the hovered tab
  • Team Invite – Connected teammates – a cursor drags a new one into the empty slot, the line turns solid and they go online