AI · Micro-interactions · GSAP · WebGL
An AI chatbot input made of a frosted glass panel on a slowly drifting blue gradient card. A liquid orb sits next to the prompt, and three tool pills (Attach, Search, Study) sit beside a paper-plane send button. Almost every state change has its own small, deliberate animation.
The details
- Placeholders are split into words with GSAP. Each word slides a few pixels in from the right as its blur clears, then leaves the same way before the next example starts.
- The orb is a WebGL liquid drop the designer brought into the session. It stays still at rest, reacts when poked, and strains from several directions while the AI works.
- Search and Study blend lavender and apricot into the card and the orb. Both colors are taken from the orb's own palette, and every change cross-fades.
- Sending flies the plane out. Six dots then march up in single file, curl into a spinning ring, and leave through the top one at a time before the plane comes back. The message stays in the field until the answer lands, then exits word by word like the placeholder.
- Attach springs open a tray of three demo files. It has hover shines, remove buttons, expandable details, a rolling count badge, and a "+" slot to bring deleted files back.
How it evolved
The session began with green and blue hues. Over many rounds the designer narrowed the palette to blue with two accent colors, took out a shader border and a metal ring they had tried, and replaced several hand-built blobs with the WebGL drop. Much of the later work was about timing: making things leave before their space closes, and fixing blur glitches during the entrance animation.
