https://github.com/erickdc7/heartfill-animation
Heartfill Animation
https://github.com/erickdc7/heartfill-animation
animation-css heart-animation html-css-js javascript responsive-design
Last synced: about 1 month ago
JSON representation
Heartfill Animation
- Host: GitHub
- URL: https://github.com/erickdc7/heartfill-animation
- Owner: erickdc7
- Created: 2025-06-15T23:58:20.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-07-19T21:24:44.000Z (11 months ago)
- Last Synced: 2025-07-19T23:54:11.770Z (11 months ago)
- Topics: animation-css, heart-animation, html-css-js, javascript, responsive-design
- Language: CSS
- Homepage: https://erickdc7.github.io/heartfill-animation/
- Size: 9.77 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 💖 Heartfill Animation
Una animación visual en 2D hecha con HTML, CSS y JavaScript, inspirada en una carta interactiva. Al entrar, verás un gran corazón formado por círculos animados y rodeado de corazones flotantes que aparecen y desaparecen suavemente. En la parte superior, una frase romántica da el toque final a esta experiencia visual.
🔗 **[Ver demo en vivo](https://erickdc7.github.io/heartfill-animation/)**
## 🛠 Tecnologías utilizadas
- HTML5
- CSS3
- JavaScript
- [Matter.js](https://brm.io/matter-js/) (motor de física 2D)
- pathseg + poly-decomp (para compatibilidad con SVG)
## ✨ Características principales
- 💗 Corazón central compuesto por círculos animados
- 🧡 Corazones flotantes animados que aparecen y desaparecen
- 📝 Frase romántica destacada con tipografía y color personalizado
- ⚙️ Simulación física con Matter.js para animaciones más naturales
- 🌌 Fondo oscuro para mayor contraste y enfoque visual
- 📱 Compatible con navegadores modernos (desktop recomendado)
## 🚀 Cómo ejecutar localmente
1. Clona el repositorio: `git clone https://github.com/erickdc7/heartfill-animation.git`
2. Entra en el proyecto: `cd heartfill-animation`
3. Instala las dependencias: `npm install`
4. Inicia el servidor de desarrollo: `npm run dev`