Design
Create impactful presentations with animations.
Supports CSS animation out of the box with animate.css.
Use animation freely
Just add a class
Preso is a HTML presentation tool.
A collection of slides created with Svelte
Life is too short to fight against Powerpoint!
Thanks to Svelte Slides for the inspiration / fork.
Press the right-left key to navigate.
Design
Illustrate your story with images and more.
Add images, SVG or GIF to your presentation.
Even better you can add
Lottie
animation.
Design
Trigger actions to add content as you speak.
Create awesome transitions for you slides.
All you need is to add classes.
Here is the recipe:
Find the HTML you want to animate.
Ctrl-F is your friend.
You can add class on the fly.
To turn the text in red after 1 transition, use the class `start-1:text-red`. You can use `start-2:...` for the second transition... Use as many as you wish.
It temporarly add the class to your HTML.
No magic, you know exactly what is going on at each transition.
You can also remove classes.
With the `end-1:...` you can remove classes from your HTML. This is very useful when you are working with animate.css.
Design
Use background image
A picture is worth a thousand words. Illustrate your point with a background image. Then place whatever you want on top of it.
Component
Tell a story with your data
Supports Vizzu
charts.
Click on the chart several times to trigger the animations
Component
Embed Code
Rather than talk about code, or use screenshots, simply drop it in when creating the presentations.
Or when facilitating session drop a live vote widget, effort-value chart or any other tool straight in.
Enter a new todo and interact with the list!
To keep the state of the element make the variables a store, or hook the component up to an external data source.
todo
done
Feature
Control the slide flow with your voice
Ctrl+ Alt+ v to toggle voice control.
Go to the next step with a joining term: "furthermore","what's more","additionally"
Say "Next Slide"
Say "Previous Slide"
Feature
Open the presentation full screen
Ctrl+ Alt+ f to toggle fullscreen mode.
Feature
Tap to navigate
Ctrl+ Alt+ t to toggle the tap to navigate feature.
Tap on the left third of the screen, when it it turned on to go backwards. Or the right third to go forwards.
Feature
Skip Animations
← to go to the last step.
→ to go to the next step.
↑ to go to the previous slide.
↓ to go to the next slide.
Preso is a tool to create slides.
`Deck` and `Slide` are the main components. More components will come to support charts and visualization tools
Check the code >>
Preso is fluid
Display your presentations on mobile or tablet. It is completely useless, but nice to have.
Check the code >>Thanks to
Svelte and SvelteKit.
Easy to code. Fun to play with. Fast to deploy
Svelte is fire.
Intuitive framework. As if HTML, CSS and JS were friends again.
SvelteKit is lovely.
SSR out of the box and hot reload for fast prototyping.
Product Roadmap
Brief list of features that could be nice to have or that is already included: