Hero motion
Floating cards, light sweeps, and logo pulse create attention without blocking reading.
Pages animation
Motion with a job.
The Pages site uses small CSS and one tiny JS file. Animations guide attention, show product energy, and stay optional for users who prefer reduced motion.
Design notes
What was used.
Scroll reveals
Cards reveal as the user scrolls. Browsers with scroll timelines get CSS-driven reveal. Others use IntersectionObserver.
Product feel
The UI uses dark glass, neon accents, and dashboard-like movement because that matches the real app screenshots.
VengeanceUI review
What was adapted.
The VengeanceUI repo and site were reviewed as interaction references. We kept this project static and dependency-free.
Command menu
VengeanceUI uses a documentation search command. IsotopeAI Pages now has a small static quick-nav menu opened with Ctrl+K or /.
Component explorer feel
Instead of a component library grid, IsotopeAI uses docs cards for install, sync, admin proof, gallery, and motion notes.
No heavy app framework
No Next.js, Framer Motion, GSAP, shaders, or registry runtime were added. Pages remains plain HTML, CSS, and one small JS file.
Files
docs/assets/site.css docs/assets/site.js docs/index.html docs/install.html docs/sync.html docs/admin.html docs/gallery.html docs/motion.html
Accessibility
@media (prefers-reduced-motion: reduce) {
animation-duration: 0.001ms;
transition-duration: 0.001ms;
}