Quick wins for a faster PC:
Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchPC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Clear out junk files and repair common Windows errorsFree Scan →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →
ThatPainter is reader-supported. When you buy through links on our site, we may earn an affiliate commission. Learn More
To show developers how an interface should respond before anyone writes code, model the interaction as visible states, connect those states with a clickable hotspot, choose a transition, and preview the result. The historical Atomic prototyping web tool demonstrated that process with a dropdown arrow that changes into a close icon.
This is a tutorial for that 2015-era workflow, documented in Daniel Schwarz’s SitePoint article (published June 11, 2015; updated November 6, 2024). The update date does not verify that the original product, interface, pricing, or integrations are still available.
What an interaction prototype needs to show
An interaction prototype describes how an interface changes after user input. A static mockup can show the arrow, but it cannot show what happens when someone clicks it. The example below makes the before-and-after behavior explicit:
The Tool Desk
Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →- Initial state: a dropdown arrow.
- Triggered state: a close (X-like) icon.
- Trigger: a clickable hotspot covering the control.
- Transition: an animated change between the two states.
The point is not that one easing curve is universally best. It is that the trigger, destination state, and motion are specified well enough for review.
#1 Best Overall
Build the two visual states
1. Draw the dropdown state
In the historical Atomic interface, draw a simple arrow from two lines and center it on the artboard. The original tutorial lists these keyboard shortcuts: L for Line, S for Select, R for Rectangle, O for Oval, T for Text, I for Image, and H for Hotspot. Treat those keys as period-specific instructions, not as a guarantee about a current application.
2. Duplicate and change the state
Duplicate the first state and rename both states according to their meanings—for example, “Dropdown” and “Close.” In the duplicate, move one line so the arrow becomes an X-like close icon. Keeping both appearances as separate states makes the intended response unambiguous.
Rank #2
Connect the click to the transition
3. Add a hotspot
Place a hotspot over the icon so the whole control—not just a thin line—is an obvious click target. Set the hotspot to navigate from the dropdown state to the close state.
4. Choose motion deliberately
The worked example selects Cubic: Ease Out. Ease-out motion starts more quickly and settles gently, which can make a small icon change feel responsive. Use it as an example, not as a claim that it is the only correct or fastest easing choice.
| Prototype part | Example value | What reviewers can evaluate |
|---|---|---|
| Source state | Dropdown arrow | How the control looks before input |
| Trigger | Hotspot over the icon | Where a user can click |
| Destination state | Close (X-like) icon | Whether the response communicates the new mode |
| Transition | Cubic: Ease Out | Speed, softness, and perceived responsiveness |
Preview before requesting feedback
5. Activate the prototype
Open the preview and activate the control. Confirm that the hotspot responds, the destination state appears, and the animation communicates the change rather than obscuring it.
6. Share the behavior, not only screenshots
The tutorial describes copying a share link so other people can inspect the prototype and comment on the interaction. A reviewer can therefore assess the click target and motion directly instead of inferring them from static images.
Where this workflow fits
A historical directory grouped Atomic with mock-up prototypers: tools that let designers create or edit interface screens and add interactions. That category was contrasted with tools that take finished mockups and make them interactive. The directory described Atomic as supporting imported Photoshop or Sketch designs, state layouts, animation, and URL sharing. Those are historical category descriptions, not current availability or pricing information.
Do these 3 things before closing this tab:
1Fix the driver behind crashes, sound loss and screen glitches2Clear out junk files and repair common Windows errors3Scan for outdated or missing drivers - takes under a minuteThe workflow is most useful when a team needs to settle questions such as:
Best Value
- Does the control have a clear before-and-after state?
- Is the clickable area large enough and placed correctly?
- Does the transition explain the change in interface mode?
- Can developers and reviewers inspect the behavior without reading implementation code?
Do not confuse this tool with Atomic Design
Atomic Design is Brad Frost’s design-system methodology. The dropdown-to-close exercise is a product workflow for interaction prototyping. They are separate ideas, even when they appear on the same article page.
How to evaluate a modern replacement
Because the documented workflow belongs to an older product era, evaluate any current tool against the job rather than assuming the old interface still exists. Check:
- Screen creation: can it create interface screens, or only animate imported mockups?
- Interaction model: can you define states, triggers, destinations, and transition settings?
- Preview: can reviewers test the interaction on the devices or viewport sizes that matter?
- Feedback: can people open a link and comment without a complicated setup?
- Support and fit: is the product currently maintained and compatible with the team’s existing design workflow?
The current atomic.io website presents Atomic.io Limited as an in-app messaging company. It is not evidence that the historical prototyping product is available there today, so do not direct readers to that site expecting the old prototype editor.
Historical context
The directory included an undated testimonial attributed to Charles Bitton, Head of Marketplace User Experience at IBM: “I love how quickly I can design an interface and automatically create intelligent animated transitions.” It is best read as a historical comment about the product category, not as a current performance benchmark or endorsement.
The Bottom Line
The durable lesson is simple: represent the before and after as separate states, make the trigger explicit with a hotspot, choose motion intentionally, and preview the result before sharing it. Atomic’s documented example remains a useful interaction-modeling pattern, even though the original product’s current status is not established.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
