+Soft Gradient
An HTML presentation engine

Soft Gradient
Deck

A self-contained base file that behaves like a real deck — not a webpage that scrolls.

bs-soft-gradient-deckAugust 202601 / 09
+Soft Gradient
What it is

A deck,
not a webpage

Arrow keys, scroll wheel, swipe, and dot navigation move between full-screen 16:9 pages. ESC opens a thumbnail overview; N opens a speaker-notes panel.

Print from the browser and the built-in print rules paginate one slide per page — ready to save as a PDF.

Abstract editorial illustration of layered pastel slide pages
bs-soft-gradient-deckAugust 202602 / 09
+Soft Gradient
01

The CSS-only base ships in one HTML file — paging engine, gradients, grain filter, and system-stack typography — with zero network requests. Optional generated visuals live in a companion images/ folder.

bs-soft-gradient-deckAugust 202603 / 09
+Soft Gradient
What's inside

The design system

01
Eight archetypes
Cover, split, numbered section, process, content grid, stat row, quote, and closing — copy only the ones the story needs.
02
Three backgrounds
Sunrise, Dusk, and Paper treatments, mixed across the deck under a rhythm rule: never three of the same in a row.
03
Grain and heavy type
A shared SVG grain layer over the gradients, 900-weight headlines, and deliberate negative space on every page.
bs-soft-gradient-deckAugust 202604 / 09
+Soft Gradient
Workflow

Template
first

Every deck starts by copying the bundled template — a browser-verified engine with paging, overview, and notes already working. Slides are composed from the archetype library, never written from scratch.

A bundled validator catches leftover placeholders, duplicate slide ids, page-number drift, and rhythm violations. Real imagery is optional — generated through FAL's GPT-Image-2 into the same media frames.

Abstract editorial illustration of one template fanning out into finished slides
bs-soft-gradient-deckAugust 202605 / 09
+Soft Gradient
Six ways to move through the same file

Present it live

1

Arrow keys

Left and right page slide by slide.

2

Scroll wheel

Wheel or trackpad steps the deck.

3

Swipe

Touch swipes page on tablets and phones.

4

Dot nav

Click any dot to jump straight there.

5

ESC overview

A thumbnail grid of every slide.

6

N notes

A side panel with talking points.

bs-soft-gradient-deckAugust 202606 / 09
+Soft Gradient
Every number checkable in the file itself

By design

8
Slide archetypes
3
Background treatments
1
Self-contained base HTML
0
External network requests
bs-soft-gradient-deckAugust 202607 / 09
+Soft Gradient
“

A slide with one sentence and a lot of air is correct, not unfinished.

— Soft Gradient Deck design guidance
bs-soft-gradient-deckAugust 202608 / 09
+Soft Gradient
Try it

Start from
the template

skills/bs-soft-gradient-deck · copy the template, compose from the archetypes.

bs-soft-gradient-deckAugust 202609 / 09
· ·
Deck studio

Export an editable PPTX

PowerPoint export runs on your computer, next to this file.

  1. If you edited this deck, choose Export → HTML first so the export includes your changes.
  2. Run node scripts/export-pptx.mjs your-deck.html your-deck.pptx from the skill folder, or ask your agent to export this deck to PPTX.
  3. To edit with autosave and export straight from this menu, open the deck with node scripts/serve-deck.mjs your-deck.html.