A curated collection of interactive frontend experiments built with vanilla HTML, CSS, and JavaScript. Each project explores a different dimension of web interaction, from real-time CSS manipulation to full-page physics simulations.
| # | Project | Description |
|---|---|---|
| 01 | Style Forge | A CSS specimen laboratory with real-time property manipulation. Control color, dimensions, border-radius, rotation, shadow, blur, opacity, and scale through precision sliders, with live CSS output in a terminal-style code card. |
| 02 | Cursor Realm | Custom cursor physics with lerped ring tracking and scale transformations. Navigation elements trigger morphing hover animations with backdrop effects. |
| 03 | Inbox Pulse | Animated newsletter modal featuring a crumpled paper aesthetic built with SVG displacement filters, jagged clip-path polygons, and fold-line overlays. |
| 04 | Liquid Motion | Full-page water physics simulation using a two-buffer heightmap on Canvas 2D. Bioluminescent rendering with click splashes and cursor ripples. |
All projects share a unified visual language:
- Typography -- Syne (display, 400-800) + IBM Plex Mono (body/code, 300-500)
- Palette -- Dark editorial foundation (
#08080c), gold accent (#c9a96e), per-project accent colors - Interaction -- Custom cursor with lerped ring, meaningful hover states, entrance sequences
- No frameworks, no dependencies -- pure browser APIs only
- HTML5
- CSS3 (Custom Properties, Grid, Flexbox, Clip-path, SVG Filters, Keyframe Animations)
- Vanilla JavaScript (Canvas 2D, Web Animations API, DOM Manipulation)
git clone https://github.com/Agilkannan/frontend-mini-projects.git
cd frontend-mini-projectsOpen index.html in your browser to launch the hub, or open any project folder directly.
No build tools or dependencies required.
frontend-lab/
├── index.html # Hub landing page
├── style-forge/
│ ├── index.html
│ ├── script.js
│ └── style.css
├── cursor-realm/
│ ├── index.html
│ ├── script.js
│ └── style.css
├── inbox-pulse/
│ ├── index.html
│ ├── script.js
│ └── style.css
├── liquid-motion/
│ ├── index.html
│ ├── script.js
│ └── style.css
├── .gitignore
├── LICENSE
└── README.md
Contributions are welcome. Feel free to open an issue or submit a pull request.
- Fork the repository
- Create your feature branch (
git checkout -b feature/new-experiment) - Commit your changes (
git commit -m 'Add new experiment') - Push to the branch (
git push origin feature/new-experiment) - Open a Pull Request
This project is licensed under the MIT License. See the LICENSE file for details.
Agil Kannan
✨ If you like this project, don't forget to ⭐ the repo!