What you get
- A complete first screen as one HTML file: header, hero, step chips and marquee
- A typed React and Tailwind block with a reusable particle field component
- A library-free particle engine with sphere, ring, wave, helix and image formations
- Warm-paper light and dark tokens plus a checker for off-palette colours
- Optional product silhouette from PopNow for the particles, quoted first
Good for
- SaaS, app and tool landing pages
- Launches that can be told in three short ideas
- Swapping a static hero image for gentle motion
Not for
- Dark, high-energy brands
- Long scroll-driven storytelling
- Pages already led by a large photo or video
How to use it
In Claude or ChatGPT
Use the PopNow skill "Particle Animation Hero" (particle-animation-hero) for this: Add a hero to my Next.js site for a habit tracker: 'Small steps, kept daily', ideas Track, Stack, Celebrate.
In a coding agent
/popnow-particle-animation-hero Add a hero to my Next.js site for a habit tracker: 'Small steps, kept daily', ideas Track, Stack, Celebrate.
Then try
Make the third idea form our leaf logo from public/leaf.png.
Give me the plain HTML version for the waitlist page too.
What to have ready
- A headline, one or two sentences and two links
- Three short ideas with a one-line caption each
- Optional: a transparent PNG of your mark or product, or a PopNow API key
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.
Interactive Grid Hero
+3A dark grid of fine strands that bends toward the cursor and rolls a glowing ring out from every click.
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.
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
Is it heavy?
No. It is one 2D canvas and a few hundred lines of plain JavaScript, with no WebGL or animation library. The dot count follows the screen size, and the loop stops in hidden tabs and when the hero scrolls away.
Can the particles form my logo?
Yes, if you own it. Give a transparent PNG of a bold, simple shape and the engine samples it into points. PopNow can also generate a clean silhouette of your product once you have seen the price.
How do visitors control it?
Three step chips under the buttons morph the dots, by click or with the arrow keys. Before anyone picks, the field advances on its own every few seconds.
Does it respect reduced motion?
Yes. With reduced motion turned on, the dots hold still, steps change without a tween, nothing advances automatically and the marquee stops sliding.