Made with svelte and sveltekit.
The structure of the elements of svelte presentations is: Deck's have Slides (which occupy the entire screen), Slides have steps (these are actions/animations that are sequentially triggered).
- ← - last step
- → - next step
- ↑ - previous slide
- ↓ - next slide
- Ctrl + Alt + f - fullscreen toggle
- Ctrl + Alt + v - voice control toggle
- Ctrl + Alt + t - tap mode toggle
Turns on/off the browser to full screen mode
Can control the slide progression with your voice
- "Next Slide" go to the next slide
- "Previous Slide" go to the previous slide
Turns on/off the ability to navigate through the slides by touching the first horizontal quarter of the screen to go forward, or last horizontal quarter to go back.
Uses animate.css, by adding to the css class.
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.
With the end-1:... you can remove classes from your HTML. This is very useful when you are working with animate.css.
The number that follows the start- or end-, denotes the step.
animate__animated must be added to the elements class.
animate__animated op0 start-1:op100 start-1:animate__fadeInRightwill get the element to fade in from the right and change the opacity from 0 to 100.animate__animated start-1:animate__pulse start-1:bg-gray-100will make the element pulse- If you want an animation on the start of a slide, just don't add a step, for example, just add
animate__animated animate__slideInRightin the CSS class will have the component slide in from the right when you enter the slide.
Add images, SVG or GIF to your presentation. Put them in the static directory.
<div class="flex flex-col min-h-screen justify-center">
<img
src="bg.jpg"
alt="background"
class="fixed object-cover w-screen h-screen"
/>
.... put your slide contents here ...
</div>Or add a lottie animation, for an interative graphic.
<lottie-player
src="https://assets9.lottiefiles.com/packages/lf20_rhnmhzwj.json"
background="transparent"
speed="1"
loop
autoplay
/>If you aren't using lottie animations, remove the import from app.html to improve speed
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>Create a new svelte file or folder in the routes directory.
At the heart of SvelteKit is a filesystem-based router. This means that the structure of your application is defined by the structure of your codebase — specifically, the contents of src/routes
index.svelte is the root of your site, every file name becomes a route and folders become sub-route.
To create a new preso on a route -> /newpreso, create a file routes/newpreso.svelte
Add the following code
<script>
let slides = [];
</script>
{#each slides as slide}
<Slide>
<svelte:component this={slide} />
</Slide>
{/each}
Then import each slide as a component and add it to the slides array.
You will need a Speechly app ID. To get one of these, sign up for free with Speechly and follow the guide here
Create a .env file in the root directory, to hold your speechly app id.
VITE_SPEECHLY_APP_ID=#APPID#
Preso is a PWA, the service-worker.js and manifest.json files can be found in the static directory, they are loaded in the _layout.svelte file
Once you've created a project and installed dependencies with npm install (or pnpm install or yarn), start a development server:
npm run dev
# or start the server and open the app in a new browser tab
npm run dev -- --openThis uses the adapter-auto for SvelteKit, which detects Vercel and runs adapter-vercel on your behalf.
npm run buildYou can preview the built app with
npm run preview, regardless of whether you installed an adapter. This should not be used to serve your app in productio 6FF3 n.
TODO: add vercel deployment commands
To run Prettier, enter npm run format.
The PWA can cause issues when developing, if you get
> listen EACCES: permission denied 127.0.0.1:3000
at Server.setupListenHandle [as _listen2] (node:net:1405:21)
at listenInCluster (node:net:1470:12)
at doListen (node:net:1609:7)
at process.processTicksAndRejections (node:internal/process/task_queues:83:21)
Restart the Host Network Service (windows specific)