What you get
- The complete hero as a single HTML file that runs from disk or in an iframe
- The engine as an ES module plus a React and Next.js component
- Five colour themes and a tuning table for density, pull and rings
- Touch, reduced-motion, hidden-tab and off-screen handling built in
- Optional PopNow video plate or product image, quoted before it runs
Good for
- Developer tools, AI products and launch pages
- Portfolio and event openers that invite people to play
- Replacing a looping background video with something lighter
Not for
- Light or pastel brands that need a pale background
- Very calm pages such as health or finance forms
- Long scroll-driven stories
How to use it
In Claude or ChatGPT
Use the PopNow skill "Interactive Grid Hero" (interactive-grid-hero) for this: Make the first screen of my CLI tool's site: 'Deploy previews in one command', amber grid, Install and Read the docs buttons.
In a coding agent
/popnow-interactive-grid-hero Make the first screen of my CLI tool's site: 'Deploy previews in one command', amber grid, Install and Read the docs buttons.
Then try
Make the grid calmer and a bit sparser.
Add a very dark smoky video under the grid and tell me the credits first.
What to have ready
- A short headline, one or two sentences and your button links
- A theme or your brand accent colour
- Optional: capability hints and names you may show in a proof row
Similar skills
View all →3D Avatar Maker
+3Build a cute soft-toy 3D character in your browser and save it as a transparent PNG or a 3D page.
Calendar Heatmap
+3A year of daily activity as a shaded calendar grid, with streaks, totals and keyboard access.
AI SaaS Landing Page
+3Warm sand paper, hairline rails and hatched gutters around a live kanban board where an assistant plans tasks.
Animated Hero Section
+3A landing-page hero with a gently rotating headline word, two buttons and a wide image frame.
Shader Hero Agency Website
+3A live orange-heat shader hero behind a bottom-pinned statement, pill nav and a staggered case-study grid.
Dark SaaS Landing Page
+3A dark, motion-rich marketing site for a software product, delivered as one self-contained HTML file.
Designer Portfolio Website
+3Six tilted cards hover round a fading headline on calm grey, one red portrait card, editorial case studies.
Developer Portfolio Website
+3A dark personal site for engineers with case studies, writing, talks, a résumé and a contact form.
Editorial SaaS Website
+3Navy split hero, a five-line serif headline beside a documentary still, slanted bands and one cobalt accent.
Glassmorphism Website Template
+3Frosted glass pills on a near-black film, a huge serif headline with one italic word and an email capture.
Hardware Product Website
+3Huge hairline model names on silver studio shots, frosted spec cards, a to-scale lineup and a hardware bento.
Interactive Architecture Diagram
+3An offline, clickable system diagram built from a checked JSON model, with the evidence behind each box.
Knowledge Graph Explorer
+3Turn project notes into an offline, searchable graph where every claim links back to its source line.
KPI Dashboard Template
+3Four KPI tiles with change chips over a glowing line chart, a breakdown table and target bars on warm paper.
Landing Page from AI Mockups
+3See three full-page designs first, pick one, and your agent builds it as clean, responsive code.
Magazine Website Template
+3A print-quality magazine site with articles, topics, a small shop and subscriptions, as one HTML file.
Particle Animation Hero
+3Copy on warm paper beside a turning sphere of ink and teal dots that reshapes per idea and scatters on scroll.
Personal Brand Website
+3A portrait feathered into warm paper under a thin bracket, with light-and-bold statements on either side.
Cinematic Product Launch Page
+3Film-lit near-black page: serif title card over drifting light, letterboxed night scene, reservation form.
Admin Dashboard Template
+3A working back-office console with charts, tables, kanban and calendar, built as one offline HTML file.
SaaS Landing Page Template
+3A calm, light marketing site for a software product with a working product console, pricing and sign-up.
Scrapbook Portfolio Website
+3A multi-page online CV made of paper objects, with case studies and a printable resume.
Sneaker Store Website Template
+3A complete footwear or apparel shop with catalog, product pages, bag and demo checkout in one HTML file.
Workflow Automation Landing Page
+3Graphite page, small left-aligned headline, and a live node graph below that runs, retries and streams logs.
Questions
Does it need a library or WebGL?
No. The effect is plain JavaScript on a 2D canvas, about 300 lines, with no dependencies. The template works offline and inside a sandboxed iframe.
What happens on phones?
A tap sends a ring and a sideways drag pulls the grid, while vertical swipes still scroll the page. Before anyone touches it, a slow idle drift keeps the grid moving.
Can I use my brand colour?
Yes, as the accent and ring colour on one of the dark backdrops. The effect relies on faint lines brightening, so the background stays very dark; black-and-white brands get the mono theme.
Is it accessible?
Copy, links and buttons are normal HTML above the canvas and keep focus styles. With reduced motion turned on, the grid is a still frame, and the loop pauses in hidden tabs and when scrolled away.