A small collection of lightweight micro-interactions built with pure HTML, CSS, and vanilla JavaScript.
This project was created as a hands-on exercise to explore how subtle UI details can improve the overall user experience without relying on heavy frameworks or libraries.
This repository contains 4 simple micro-interactions, designed to be easy to understand, reuse, and customize:
- No external dependencies
- Pure vanilla JavaScript and CSS
- Each interaction is isolated and copy-paste friendly
- Focused on clarity and learning rather than abstraction
A Material Design–inspired click effect implemented with CSS and JavaScript.
A hover interaction where the button slightly follows the cursor, creating a subtle magnetic effect.
A card component with an animated gradient border that appears on hover.
A simple smooth scrolling behavior for in-page navigation.
- Vanilla JavaScript (ES6+)
- CSS3 (Flexbox, Grid, transitions, animations)
- HTML5
This project intentionally avoids frameworks and build tools to keep the code approachable and easy to modify.
Each interaction lives in its own folder.
You can copy the HTML, CSS, and JavaScript files directly into your project and adjust the styles or behavior as needed.
No setup or build step is required.
I built this project as a learning and experimentation exercise focused on micro-interactions—small details that can make interfaces feel more polished and engaging.
The main goals were:
- To practice combining UI design and front-end development
- To better understand animation, timing, and user feedback
- To create reusable interaction patterns without unnecessary complexity
I especially enjoyed experimenting with hover states and motion timing, and seeing how small changes can noticeably affect the feel of an interface.
Animations are intentionally subtle to avoid excessive motion and keep interactions comfortable to use.
Created by Silvana Rodriguez
Software Developer & Product Designer (UI/UX)
I enjoy working at the intersection of design and development, with a focus on clean interfaces, usability, and thoughtful interactions.
MIT License — feel free to use, modify, and learn from this project.