Product Animations

Pixel-art style HTML5 Canvas animations for product marketing and LinkedIn posts.

Animations

File	Theme	Description
animation-competitive.html	Base	Competitive field analysis visualization
animation-competitive-cvr.html	CVR Input	Company registration number input flow
animation-competitive-detective.html	Detective	Noir detective investigating competitors
animation-competitive-pacman.html	Pac-Man	Pac-Man eating competitor ghosts
animation-competitive-sniper.html	Sniper	Precision targeting of competitors
animation-competitive-thanos.html	Thanos	Thanos snap eliminating competitors

Features

• Retro pixel-art aesthetic
• Smooth CSS animations with easing functions
• Interactive form input animation at the start
• Company branding finale with call-to-action button
• Responsive design (works on all screen sizes)
• No external dependencies (pure HTML/CSS/JS)

How to Use

1. Download or clone this repository
2. Open any .html file in your browser
3. Watch the animation play automatically
4. Press R to restart the animation
5. Press Space to pause/resume

Customization

Edit the finalText object in each file to customize:

let finalText = {
    text: 'YOUR TITLE',
    subtext: 'Your subtitle',
    company: 'Your Company',
    website: 'yourwebsite.com',
    github: 'github.com/yourcompany',
    email: 'info@yourcompany.com',
    buttonText: 'Your CTA text',
    buttonLabel: 'BUTTON LABEL',
    buttonUrl: 'https://yourwebsite.com'
};

Preview

Each animation includes:

1. Form input animation (CVR + Website)
2. Main themed animation
3. White background finale with:
   • Company name
   • Title and subtitle
   • Website, GitHub, Email links
   • Call-to-action button
   • Greeting message

License

MIT License - Feel free to use, modify, and distribute.

Credits

Made with <3 by UnityLoop