Base presentation

Your title goesright here.

Your name · your role · the date

Agenda

What is in the kit.

01The light9 camera positions · 9 styles
02Motion3 curves · 10 entrances
03Transitions32 in two families
04Layouts40, one per slide
05Picturesframes and effects
06Agentscommand line · MCP server
One idea per slide

Say one thing.Then show it.

The headline rises first. The visual waits for a click.

HEADLINE LINES RISE · 1,100 MS SUPPORT LINE FADES UP · STARTS AT 450 MS, TAKES 700 0 MS4501,1001,600 MS

kit/tokens.css · .sk-mask, .sk-fade

Section break
Part one

The light

A section break floods the frame with the accent.

The light

One light.Nine camera positions.

Each slide moves the camera. The field behind the slides never cuts.

RISE TOP LEFT RIGHT CORNER CORNER-L DUO QUIET FULL

kit/aura.js · CAMERAS

Glass

Glassover the light.

The controls and these panels blur whatever is behind them.

Blur20 pxbackdrop-filter: blur(20px)
Saturation180%saturate(180%)
Edge1 pxwhite at 70%, inner highlight

kit/deck.css · .glass, .sk-nav

Three durations

The base entrancetakes 700 ms.

Small parts move faster and headlines move slower.

700milliseconds · the base duration
FAST · 320 MS BASE · 700 MS SLOW · 1,100 MS

kit/tokens.css · --t-fast, --t, --t-slow

Three curves

Three curvestime the motion.

Out

Entrances use it. They start fast and settle slowly.

cubic-bezier(0.16,1,0.3,1)

In

Exits use it. They start slowly and finish fast.

cubic-bezier(0.7,0,0.84,0)

In-out

Covers, wipes and camera moves use it.

cubic-bezier(0.87,0,0.13,1)

kit/core.js · CURVES

The out curve

Most of the movehappens early.

An entrance starts fast and spends the rest of its time settling.

83%of the distance · in the first quarter of the time
100% OF THE DISTANCE025% OF THE TIME100%

kit/core.js · CURVES, the out curve

Entrances

Ten ways fora line to arrive.

Mask

The line rises out of a clip.

Fade

The line fades up 28 px.

Words

Each word rises, 45 ms apart.

Chars

Each letter rises, 18 ms apart.

Wipe

The line is uncovered left to right.

Scale

The line settles forward from 94%.

Drop

The line falls into place from above.

Slide

The line comes in 72 px from the left.

Flip

The line swings up from flat.

Type

Letters switch on, 30 ms apart.

kit/tokens.css · [data-enter]

Transitions

Every transitionends within a second.

Each bar fills in its real time
Blink290 ms
Pixel450 ms
Stripes560 ms
Wave720 ms
Portal1,000 ms

kit/transitions.js · KINDS

Durations

16 of the 32 take680 ms or less.

COVERSCENEDIAMOND, 680 MS · VALUES IN MILLISECONDS 290BLINK 414GLITCH 450PIXEL 500COLUMNS 500FADE 520BLINDS 540CURTAIN 560STRIPES 560SCAN 600SHUTTER 600DISSOLVE 600ZIP 620WIPE 640HATCH 640CHECKER 680DIAMOND 700MOSAIC 700CLOCK 720IRIS 720WAVE 720BURST 750DEPTH 760RINGS 760STACK 800FLOOD 800PUSH 800RISE 800FLIP 850FALL 900ZOOM 900CUBE 1,000PORTAL

kit/transitions.js · KINDS

Two families
Cover
family: 'cover'

An overlay closes over the frame. The slide changes underneath it.

Move
family: 'scene'

Both slides are on screen. The camera travels from one to the other.

Donut

Two families,one ring.

Cover2372%
Scene928%
72%are cover transitions

kit/transitions.js · KINDS

The kit

The kit in six counts.

40slide layouts
32transitions in two families
9camera positions for the light
9light styles
10text entrances
12looks to start from

kit/layouts.js · kit/transitions.js · kit/aura.js · kit/theme.js

Anatomy

Every slide hasthe same five parts.

A mark, a label, a headline, one visual and a source line.

This slide

A 1920 by 1080 stage, scaled to fit the screen it is shown on

kit/deck.css
MARGINS128 / 96 px
HAIRLINES1 px
ACCENT COLOURS1

kit/deck.css · .slide, .hdr, .src

Rules

The look comes fromwhat is left out.

Always
  1. One accent colour and five tones derived from it
  2. Hairlines of 1 px; a shadow only under paper that overlaps
  3. Mono type for labels and data
Never
  1. A second accent colour
  2. Blur or shadow on letters
  3. Motion that no entry or click started
Controls

Run the deckfrom the keyboard.

KeyWhat it doesPointer and touch
→↓SpaceEnterNext click, then the next slideClick, or swipe left
←↑BackspaceBack one click, then one slideClick the left quarter, or swipe right
1 to 9Jump to slides 1 to 9Drag the scrub control
HomeEndFirst slide, last slide
RReplay the entrances of this slideThe replay button
F NFull screen, speaker notes

kit/deck.js · keydown, click, touchend

Workflow

From folder to stagein four steps.

Step 1

Theme

Pick a look, or one accent colour.

Step 2

Slides

Write each slide as a few lines of data.

Step 3

Motion

Keep the defaults, or name a camera and a transition.

Step 4

Export

Build one HTML file, or print the deck to PDF.

One idea per slide

One sentence cancarry a whole slide.

When there is nothing to show, say the one thing and move on.

Pull quote
“A quote sits alone on its slide, in a light weight, with the name of the person who said it in mono underneath.”Name Surname, role, company
Team

Put facesto the names.

Name Surname

Role

One line on what this person does.

Name Surname

Role

One line on what this person does.

Name Surname

Role

One line on what this person does.

Testimonial
“Put the words of a customer next to their face, with their name and role underneath.”

Name SurnameRole, company

Logo wall

Who already uses it.

Name one
Name two
Name three
Name four
Name five
Name six
Name seven
Name eight
Media

Show thereal thing.

A video plays when its slide is entered and pauses when the slide is left.

16:9 · your video or image
Full picture

Let one picturefill the frame.

The title and the caption sit on a glass panel in the corner.

Gallery

Three frames,one row.

First

A frame with no picture shows art in the theme colours.

Second

Give it a src and the picture takes its place.

Third

Each frame is uncovered left to right.

Collage

One large,two small.

The first picture gets two thirds of the width.

The main picture
Detail
Detail
Instant photos

Photos from the day.

Setting up
On stage
Afterwards
Browser window

Show the pagein its window.

The bar carries the address, so the audience knows where to go.

example.com/pricing
Phone

Show itin the hand.

A portrait screenshot goes inside the phone.

  • The frame is drawn in the ink colour
  • The screen takes any image or video
  • Points arrive after the phone
Before and after

Before, then after.

Before

The second picture waits for a click.

After

Both frames keep the same size.

Pricing

Three plans.One stands out.

Starter$0per month
  • One line per feature
  • Up to four lines
Team$20per seat, per month
  • The plan to choose is filled
  • Its type flips to stay readable
  • One accent, as everywhere
CompanyCustomper year
  • One line per feature
  • Up to four lines

Placeholder prices. Replace them with your own.

Funnel

Where people drop off.

Visited1,000
Signed up42042%
Activated18018%
Paid606%

Placeholder numbers. Replace them with your own and name the source here.

Roadmap

Now, next, later.

Now
  • What is being built this month
  • One line per entry
Next
  • What follows it
  • Up to four entries
  • In order
Later
  • What waits
  • With no dates promised
Start

Run it withone command.

$ python3 serve.py
Stage Kit on http://127.0.0.1:8270
$ open http://127.0.0.1:8270/deck/
Made for agents

A slide isa few linesof data.

An agent writes the data. The kit draws the slide.

deck.json
1{2  "layout": "statement",3  "title": "Say one thing.",4  "lede": "Then move on.",5  "aura": "corner",6  "tr": "stripes"7}
Summary

Three thingsto take away.

1

One light behind every slide.

2

Three curves for motion, three durations for entrances.

3

One accent colour, in any hue.

Call to action

One offer. One code.

Your offer
OFFER
CodeYOURCODE
PLACEHOLDER
example.com
Close
Thank you.
Your name · you@example.com
Slides: example.com/slides