A library of 32 fixed-size 300 × 300 animated HTML components built to the Pixelsly brand system — designed to drop straight into presentation slides (PowerPoint, Keynote, Google Slides), web decks, or any layout that needs a tight, branded visual.
Single-file, zero-dependency, no build step. Open the file, screenshot a component, or iframe it in.
- 32 components organised into 4 themed tabs
- 300 × 300 px stages — predictable size for slides and two-column layouts
- Brand-aligned — uses Pixelsly v2 colour and type tokens (Navy
#17285E, Teal#0E9AA7, Pink#FF4F8B, Orange#FF9F1C, Inter / JetBrains Mono) - Zero dependencies — vanilla HTML / CSS / JS, single file
- Auto-replay on tab switch,
↻button on every component, scroll-into-view trigger via IntersectionObserver - Sticky tab navigation for fast browsing
| # | Component | Description |
|---|---|---|
| 01 | KPI counter | Single big metric, count-up animation, sparkline |
| 02 | Bar chart | 6 bars, sequential rise with grid lines |
| 03 | Progress donut | SVG ring, stroke-dashoffset fill + counter |
| # | Component | Description |
|---|---|---|
| 04 | Typewriter hero | Eyebrow → typed headline → tagline + CTA |
| 05 | Partner marquee | Vertical infinite-scroll logo strip |
| 13 | Kinetic split | Three words fly in from L / T / R |
| 14 | Word stagger | Word-by-word fade + blur reveal |
| 15 | Letter drop | Letters cascade down with bounce |
| 16 | Gradient sweep | Brand-gradient flows continuously through text |
| 17 | Stat headline | Hero number ($0 → $2.4M) ticks up |
| 18 | Pull quote | Quote mark pops, blockquote slides, author fades |
| 19 | Scramble text | Characters scramble through glyphs then resolve |
| 20 | Rotating word | Vertical word cycle (design → build → ship) |
| 21 | Highlight | Brand-pastel underline draws across keyword |
| 22 | Curtain reveal | Coloured blocks slide off to reveal title |
| # | Component | Description |
|---|---|---|
| 06 | Process flow (vertical) | 4 stacked steps with sequential pulse |
| 07 | Timeline | Horizontal rail with 5 milestone dots |
| 08 | Cycle loop | 4-stage circular flow with rotating highlight |
| 09 | Funnel | 4-stage narrowing funnel with conversion % |
| 10 | Swimlanes | Mini kanban — cards move To Do → Doing → Done |
| 11 | Gantt phases | Overlapping phase bars across Q1–Q4 |
| 12 | Decision tree | Y/N branching with drawn SVG paths |
| 23 | Three-step | 3 horizontal cards with arrows, sequential highlight |
| 24 | Chevron pipeline | 5 chevrons slide in left-to-right |
| 25 | Checklist | 5 items get ticked off in sequence |
| 26 | Step progress bar | Checkout-style 5-step bar with progress fill |
| 27 | Now / Next / Later | 3-column roadmap with staggered cards |
| 28 | Milestones | 3 medal badges pop in with bounce |
| 29 | Maturity model | 5 ascending bars (Initial → Optimizing) |
| 30 | Stage gate | Stages alternating with diamond gates |
| 31 | Milestone log | Vertical timeline with dates + descriptions |
| 32 | Approval pipeline | 3-stage kanban with tickets moving + approval flip |
Three slide-pattern demos showing how to drop the components into real slide layouts:
- A — Two-column: text left, component right
- B — Two-column: component left, text right
- C — Three-up row (three 300 × 300 components side-by-side at exactly 1024 px wide)
git clone https://github.com/<your-username>/pixelsly-animated-html-components.git
cd pixelsly-animated-html-components
open pixelsly-animated-components.htmlThat's it. No build, no install, no server required for local viewing.
- Open the file in your browser
- Switch to the tab you want
- Hit the
↻button on the component to trigger the animation - Take a window-area screenshot during or after the animation
- Paste into PowerPoint / Keynote / Google Slides
The 300 × 300 stage matches a clean inline image size for slides.
For live-animated slides (web decks, Notion, Reveal.js, internal landing pages):
<iframe
src="https://your-username.github.io/pixelsly-animated-html-components/pixelsly-animated-components.html"
width="300"
height="300"
frameborder="0"
scrolling="no">
</iframe>To embed a single component, copy that component's <section class="component" data-anim="…"> block plus the matching CSS/JS into a new file.
All components scale together via a single CSS variable. In pixelsly-animated-components.html:
:root {
--box: 300px; /* change to 240px for thumbnails, 360px for chunkier callouts */
}pixelsly-animated-html-components/
├── pixelsly-animated-components.html # Main file — 32 components, 4 tabs
├── pixelsly-solution-flow-component.html # Earlier flow-only prototype (kept for reference)
├── README.md
├── LICENSE
└── .gitignore
The main file is fully self-contained: all CSS in <style>, all JS in <script>, no external assets except Google Fonts (Inter + JetBrains Mono).
All visuals derive from a CSS custom-property palette defined at the top of the file:
:root {
--navy: #17285E;
--teal: #0E9AA7;
--pink: #FF4F8B;
--orange: #FF9F1C;
--bg: #FAFBFC;
--surface:#FFFFFF;
--ink: #17285E;
--muted: #64748B;
--font-display: "Inter", "Helvetica Neue", Arial, sans-serif;
--font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
/* …pastels, lines, etc. */
}To rebrand: swap these values and every component updates.
Most components expose their values via data-* attributes — edit the HTML in place:
<!-- KPI counter -->
<span class="count" data-target="12480" data-format="number">0</span>
<!-- Donut percentage -->
<circle class="fill" data-target="87"></circle>
<!-- Bar heights -->
<div class="bar b1" data-height="42"></div>Text-based components use data-text:
<span class="typed" data-text="Software that feels human."></span>- Add a
<button class="tab" data-tab="my-tab">…</button>in the.tabbar-inner - Add a
<section class="panel" id="panel-my-tab">…</section>matching the existing structure - Drop components inside
After pushing to GitHub:
- Go to your repo's Settings → Pages
- Under Source, select
Deploy from a branch - Pick
mainbranch and/ (root)folder - Click Save
- Wait ~1 minute. Your site will be live at:
https://<your-username>.github.io/pixelsly-animated-html-components/pixelsly-animated-components.html
To make it the index, rename the file to index.html (or add an index.html that redirects).
# Install once
npm install -g netlify-cli
# Deploy
netlify deploy --dir . --prod# Install once
npm i -g vercel
# Deploy
vercel --prod- Connect your GitHub repo in the Cloudflare dashboard
- Build command: (leave empty)
- Build output directory:
/ - Deploy
It's a static HTML file. Drop it on any web server (Apache, nginx, S3 + CloudFront, etc.).
Tested on modern Chromium (Chrome / Edge / Brave), Safari 16+, and Firefox 115+. Uses:
- CSS Custom Properties
IntersectionObserverclip-path,background-clip: text,aspect-ratio,isolation: isolate
No IE support. No polyfills included.
- Standalone single-file builds per component (easier iframe embedding)
- JSON-driven data injection (single config file feeds all components)
- URL query-param overrides (
?value=12480&label=Customers) - Light / dark theme toggle
- Export-to-GIF script for non-web slide tools
MIT © 2026 Melvin Foo
- Type: Inter by Rasmus Andersson, JetBrains Mono
- Brand system: Pixelsly Solutions v2.0