One way I like doing exploratory refinement with LLMs is to ask for variants of a particular UI or interaction. This time, the material was my own logo: a small waveform beside The Faint Signal wordmark.
Start with alternatives
I asked for two treatments alongside the original: a subtle pill-shaped outline, like a minimalist vacuum tube, and a glass version that fills with light on hover.
The direction was explicit. It could just as easily have been an open-ended request for alternatives. The useful part was seeing working variants side by side, at their actual navigation size and against the site’s velvet texture.
Refine what you can feel
The next steps were small, specific adjustments. Speed up the beam on hover. Let it accelerate more slowly. Try longer tails, then return to the original length. Make cooling follow the same pace as heating.
The glass treatment became a study in light: a mostly white center, yellow around it, and red at the outer edges. The wordmark follows the same heat, with a slight blur and glow shaped around the letters. At peak heat, a hidden Morse message pulses through the wordmark alone.
Each change gave me something concrete to react to. Some ideas survived; others were useful because I could try them and reverse them.
How it works
The logo is SVG, built from a waveform path with a circular amplitude envelope. A moving dot and short trail of stroke segments form the beam. A frame loop changes their speed as hover or keyboard focus builds a shared charge value.
CSS variables carry that charge into the background fill, glass reflections, and text. Gradients, glyph-clipped fills, and layered shadows create the heat without a rendered animation file. The Morse pulse uses timed dots, dashes, and gaps; its dim state retains some text fill. Reduced-motion mode keeps the interaction static.
The layered pulse was inspired by Simey’s glow-effect study on CodePen.
Let other people try it
I added voting to the logo lab. A browser cookie identifies a saved ballot, and visitors can change their choice. Optional feedback comes after the vote is saved, so skipping the explanation still counts. Results appear after voting.
The useful part
This site is entirely vibe-coded, down to the logo and image processing, including upscaling the hero image. The design work happens in the actual site: once I’m happy with a refinement, the working code can go straight into the live experience.
This is a small logo experiment, but the same technique applies to a UI or interaction: ask for alternatives, try them in context, and keep refining through specific feedback.
See the original LinkedIn post.
Try it yourself
Paste this into your coding assistant with your project open. Replace the bracketed details with your own brand, then refine the working variants through feedback.
Refine the logo for [your brand] directly in this project. Use the existing typeface and [your brand color]. Build three working variants: a waveform alone, a subtle pill-shaped outline, and a glass vacuum tube that fills with light.
Show them side by side at the actual navigation size, with the wordmark beside each. Keep the waveform and beam in SVG rather than a rendered animation file.
On hover or keyboard focus, gradually accelerate a moving beam with a short tail over about 14 seconds. The beam should be fully lit immediately, while the background fills slowly. Reverse the same speed ramp when the pointer leaves.
At peak heat, make the glass and wordmark mostly white in the center, fading through yellow to red only at the outer edges. Mirror the top and bottom glass reflections. Keep the text glow shaped around the letters, with a slight hot-light blur. Coordinate the effects with shared CSS variables and requestAnimationFrame.
Optionally pulse only the wordmark in Morse code at peak heat using [your hidden message]. Keep a dim, readable fill between pulses and leave the signal glow steady.
Match the existing site's layout and colors. Support keyboard focus, mobile layouts, and reduced motion. Let me compare the variants before choosing one, then refine it from my feedback.