Overview
Imago is a split-screen sign-up page for SaaS and app products. On the left, a butterfly is drawn live on a canvas as a grid of monospace characters on tinted tiles. It beats its wings every 2.9 seconds, and each beat leaves a trail of dots, dashes and tildes that drifts and fades. Small tracking boxes, a wire sphere and a frame counter in the corners give the stage a lab-specimen feel. On the right, the account form has a logo, heading and lead line, a work email field, a password field with a show and hide button and an 8-character hint, a terms checkbox, an Email preferences disclosure and a Create account button. Fields validate inline, errors are announced to screen readers, and a top bar links to Log in. A Pause and Play button for the animation appears when it receives keyboard focus. Reduced motion shows a single still frame, and the animation pauses while the tab is hidden. Below 896 px the stage becomes a band above the form. The page ships as one self-contained HTML file with inline CSS and JavaScript, plus an SVG logo. No framework, libraries, package installation or build step is required. Colors, glyphs, wing speed and trail length are set by a few constants and CSS variables. This is a frontend template. The form does not create accounts; connect it to your own sign-up endpoint before going live. The Imago brand and copy are placeholders. Included: index.html, the logo SVG, a quick-start, hosting and customization README, AGENTS.md and CLAUDE.md for AI coding agents, and font credits.
Highlights
- Production-ready, documented source
- Clean, componentized architecture
- Drops into your stack with minimal setup
