Library facilitates building interactive presentations, using state-driven approaches, with scenes and frames for smooth transitions, leveraging Compose for animations and theming.
A Compose Multiplatform library for building presentations. Inspired by reveal.js, Spectacle, and many others!
sto·ry·board
A sequence of drawings, typically with some directions and dialogue, representing the shots planned for a movie or television production.
As a Compose Multiplatform library, Storyboard requires the JetBrains Compose plugin. With the Compose plugin present, Storyboard can be used just like any other library.
dependencies {
implementation("dev.bnorm.storyboard:storyboard:0.1.0-alpha03")
implementation("dev.bnorm.storyboard:storyboard-easel:0.1.0-alpha03")
implementation("dev.bnorm.storyboard:storyboard-text:0.1.0-alpha03")
}
repository {
mavenCentral()
maven("https://central.sonatype.com/repository/maven-snapshots/")
}
dependencies {
implementation("dev.bnorm.storyboard:storyboard:0.1.0-SNAPSHOT")
implementation("dev.bnorm.storyboard:storyboard-easel:0.1.0-SNAPSHOT")
implementation()
implementation()
}
Various examples are available to demonstrate how to build Storyboards of varying levels of complexity and functionality.
Looking for help? Join the discussion in the KotlinLang Slack!
This library is all about building storyboards. A storyboard is analogous to a slide show in other presentation software. While other software may have slides with advancements, Storyboard uses the terms and respectively. Building on the -driven nature of Compose UI, Storyboard provides a -based way to build your presentation and requires each scene to provide a list of states. When a storyboard advances, it simply moves to the next state specified for your scene, or the first state of the next scene.
For the purpose of rendering, the states of a scene are converted into frames. If a scene comes after another scene, a start frame will be added as the first frame. If a scene comes before another scene, an end frame will be added as the last frame. Frames are used to control the transitions between scenes and states.
For example, imagine there is a storyboard with three scenes, each with one, three, and two states respectively. The frames of this storyboard could be displayed as follows:
1-1, 1-End, 2-Start, 2-1, 2-2, 2-3, 2-End, 3-Start, 3-1, 3-2
This sequence of frames is what controls the advancement of a storyboard. Start and end frames are only used for intermediate rendering when transitioning between scenes. This enables start and end animations for a scene and smooth transitions between scenes. This also enables the use of scenes which do not have any states to create more complex transitions.
Along with defining a list of states, a scene must also define a @Composable lambda,
which takes a SceneScope as a receiver.
The SceneScope providers a number of properties to the scene Composable,
including a Transition instance that defines the current and target frames.
This allows animating values between the states of the scene and synchronizing with the storyboard advancement.
And because of the start and end frame, scene start and end animations are also easy to achieve.
An AnimatedVisibilityScope and SharedTransitionScope are also
provided by via context parameters.
These scopes are provided for animating and sharing elements between scenes.
Along with the Composable lambda and states, a scene is also able to define enter and exit transitions. These transitions determine how the scene transitions into view and can be based on the current advancement direction of the storyboard. For example, these transitions can be used to create a carousel like animation between scenes.
When building a storyboard, a custom SceneFormat may be provided;
otherwise the default format is used.
The scene format is a combination of DpSize and Density
which determines the constant render size of all scenes.
This makes it so the scenes of the storyboard automatically scale according to the available space,
while maintaining a constant pixel space for defining the size and spacing of elements.
A ContentDecorator may also be provided when building a storyboard. This decorator will be applied around all scenes and can be used to adjust theming, provide composition locals, or add a shared background.
There are two main libraries in Storyboard: Storyboard and Easel. The Storyboard library contains the building blocks for Storyboards, while Easel contains UI components which make Storyboard usable on desktop and web.
dependencies {
implementation("dev.bnorm.storyboard:storyboard")
implementation("dev.bnorm.storyboard:storyboard-easel")
}
There are also some experimental libraries that hold common utilities for building storyboards.
Want to see Storyboard in action?
Snapshot documentation is available at bnorm.github.io/storyboard/docs/api/latest/.
Surfaced from shared tags and platforms — no rankings paid for.