{"id":16895802,"url":"https://github.com/bnorm/storyboard","last_synced_at":"2025-09-02T23:44:48.733Z","repository":{"id":226823524,"uuid":"767108847","full_name":"bnorm/storyboard","owner":"bnorm","description":"Library for building presentations using Compose Multiplatform.","archived":false,"fork":false,"pushed_at":"2025-06-29T22:44:01.000Z","size":3925,"stargazers_count":94,"open_issues_count":9,"forks_count":5,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-07-03T16:14:16.355Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"Kotlin","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bnorm.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-03-04T18:07:15.000Z","updated_at":"2025-07-01T22:03:18.000Z","dependencies_parsed_at":"2024-08-02T18:12:51.898Z","dependency_job_id":"1d06158a-ef11-4a69-99af-fb034644d3c5","html_url":"https://github.com/bnorm/storyboard","commit_stats":null,"previous_names":["bnorm/librettist"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/bnorm/storyboard","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bnorm%2Fstoryboard","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bnorm%2Fstoryboard/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bnorm%2Fstoryboard/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bnorm%2Fstoryboard/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bnorm","download_url":"https://codeload.github.com/bnorm/storyboard/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bnorm%2Fstoryboard/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266120063,"owners_count":23879251,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-13T17:26:19.887Z","updated_at":"2025-09-02T23:44:48.720Z","avatar_url":"https://github.com/bnorm.png","language":"Kotlin","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Storyboard\n\nA [Compose Multiplatform][compose] library for building presentations.\nInspired by [reveal.js](https://github.com/hakimel/reveal.js),\n[Spectacle](https://github.com/FormidableLabs/spectacle),\nand many others!\n\n\u003e ## sto·ry·board\n\u003e \n\u003e A sequence of drawings, typically with some directions and dialogue, \n\u003e representing the shots planned for a movie or television production.\n\n## Usage\n\nAs a Compose Multiplatform library, Storyboard requires the [JetBrains Compose plugin][compose-compiler].\nWith the Compose plugin present, Storyboard can be used just like any other library.\n\n```kotlin\ndependencies {\n    implementation(\"dev.bnorm.storyboard:storyboard:0.1.0-alpha03\")\n    implementation(\"dev.bnorm.storyboard:storyboard-easel:0.1.0-alpha03\")\n    implementation(\"dev.bnorm.storyboard:storyboard-text:0.1.0-alpha03\")\n}\n```\n\n\u003cdetails\u003e\n\u003csummary\u003eSnapshots of the latest version are available in the Central Portal Snapshots repository.\u003c/summary\u003e\n\u003cp\u003e\n\n```kotlin\nrepository {\n    mavenCentral()\n    maven(\"https://central.sonatype.com/repository/maven-snapshots/\")\n}\n\ndependencies {\n    implementation(\"dev.bnorm.storyboard:storyboard:0.1.0-SNAPSHOT\")\n    implementation(\"dev.bnorm.storyboard:storyboard-easel:0.1.0-SNAPSHOT\")\n    implementation(\"dev.bnorm.storyboard:storyboard-text:0.1.0-SNAPSHOT\")\n}\n```\n\nSnapshot documentation is available at [bnorm.github.io/storyboard/docs/api/latest/](https://bnorm.github.io/storyboard/docs/api/latest/).\n\n\u003c/p\u003e\n\u003c/details\u003e\n\n## Examples\n\n[Various examples](examples) are available to demonstrate how to build Storyboards of\nvarying levels of complexity and functionality.\n\n### GitHub Pages\n\nLive versions of the example storyboards are available via GitHub Pages.\nTo see how publishing is achieved, see the [`pages.yml` workflow](.github/workflows/pages.yml).\n\n* [Basic](https://bnorm.github.io/storyboard/examples/basic)\n* [Interactive](https://bnorm.github.io/storyboard/examples/interactive)\n\n## Getting Started\n\nLooking for help? Join the discussion in the [KotlinLang Slack](https://kotlinlang.slack.com/archives/C08R5V4EHDH)!\n\n### Terminology\n\nThis library is all about building _**storyboards**_.\nA storyboard is analogous to a slide show in other presentation software.\nWhile other software may have _**slides**_ with _**advancements**_,\nStoryboard uses the terms _**scenes**_ and _**states**_ respectively.\nBuilding on the _**state**_-driven nature of Compose UI,\nStoryboard provides a _**state**_-based way to build your presentation\nand requires each scene to provide a list of states.\nWhen a storyboard advances, it simply moves to the next state specified for your scene,\nor the first state of the next scene.\n\nFor the purpose of rendering, the states of a scene are converted into _**frames**_.\nIf a scene comes after another scene, a _**start**_ frame will be added as the first frame.\nIf a scene comes before another scene, an _**end**_ frame will be added as the last frame.\nFrames are used to control the transitions between scenes and states.\n\nFor example, imagine there is a storyboard with three scenes, each with one, three, and two states respectively.\nThe frames of this storyboard could be displayed as follows:\n\n```text\n1-1, 1-End, 2-Start, 2-1, 2-2, 2-3, 2-End, 3-Start, 3-1, 3-2\n```\n\nThis sequence of frames is what controls the advancement of a storyboard.\nStart and end frames are only used for intermediate rendering when transitioning between scenes.\nThis enables start and end animations for a scene and smooth transitions between scenes.\nThis also enables the use of scenes which do not have any states to create more complex transitions.\n\n### Compose\n\nAlong with defining a list of states, [a scene must also define a `@Composable` lambda][StoryboardBuilder],\nwhich takes a [`SceneScope`][SceneScope] as a receiver.\nThe SceneScope providers a number of properties to the scene Composable,\nincluding a [`Transition`][Transition] instance that defines the current and target frames.\nThis allows animating values between the states of the scene and synchronizing with the storyboard advancement.\nAnd because of the start and end frame, scene start and end animations are also easy to achieve.\n\nAn [`AnimatedVisibilityScope`][AnimatedVisibilityScope] and [`SharedTransitionScope`][SharedTransitionScope] are also\nprovided by via context parameters.\nThese scopes are provided for animating and sharing elements between scenes.\n\nAlong with the Composable lambda and states, a scene is also able to define enter and exit transitions.\nThese transitions determine how the scene transitions into view\nand can be based on the current advancement direction of the storyboard.\nFor example, these transitions can be used to create a carousel like animation between scenes.\n\n[When building a storyboard][Storyboard], a custom [SceneFormat][SceneFormat] may be provided;\notherwise the default format is used.\nThe scene format is a combination of `DpSize` and `Density`\nwhich determines the _**constant render size**_ of all scenes.\nThis makes it so the scenes of the storyboard automatically scale according to the available space,\nwhile maintaining a constant pixel space for defining the size and spacing of elements.\n\nA [SceneDecorator][SceneDecorator] may also be provided when building a storyboard.\nThis decorator will be applied around all scenes\nand can be used to adjust theming, provide composition locals, or add a shared background.\n\n## Libraries\n\nThere are two main libraries in Storyboard: Storyboard and Easel.\nThe Storyboard library contains the building blocks for Storyboards,\nwhile Easel contains UI components which make Storyboard usable on desktop and web.\n\n```kotlin\ndependencies {\n    implementation(\"dev.bnorm.storyboard:storyboard\")\n    implementation(\"dev.bnorm.storyboard:storyboard-easel\")\n}\n```\n\nThere are also some experimental libraries that hold common utilities for building storyboards.\n\n* _**storyboard-text**_ - Contains utilities for complex text animations and code rendering.\n* _**storyboard-diagram**_ - Todo: utilities for drawing diagrams with shapes and arrows.\n\n## References\n\nWant to see Storyboard in action?\n\n* **Kotlin + Power-Assert = Love** _(KotlinConf 2024)_ - \n  [Storyboard](https://deck.bnorm.dev/kotlinconf2024),\n  [Code](https://github.com/bnorm/deck.bnorm.dev/tree/kotlinconf2024/kotlinconf2024),\n  [Recording](https://www.youtube.com/watch?v=N8u-6d0iCiE)\n* **Writing Your Third Kotlin Compiler Plugin** _(KotlinConf 2025)_ - \n  [Storyboard](https://deck.bnorm.dev/kc25),\n  [Code](https://github.com/bnorm/deck.bnorm.dev/tree/kc25/kotlinconf2025/story),\n  [Recording](https://www.youtube.com/watch?v=9P7qUGi5_gc)\n* **(Re)creating Magic(Move) with Compose** _(droidcon NYC 2025)_ -\n  [Storyboard](https://deck.bnorm.dev/dcnyc25),\n  [Code](https://github.com/bnorm/deck.bnorm.dev/tree/dcnyc25/dcnyc25/story),\n  [Recording](https://www.youtube.com/watch?v=PgzBWebeJsk)\n\n[//]: # (Storyboard Links)\n\n[Storyboard]: storyboard/src/commonMain/kotlin/dev/bnorm/storyboard/Storyboard.kt\n[StoryboardBuilder]: storyboard/src/commonMain/kotlin/dev/bnorm/storyboard/StoryboardBuilder.kt\n[SceneDecorator]: /storyboard/src/commonMain/kotlin/dev/bnorm/storyboard/SceneDecorator.kt\n[SceneFormat]: /storyboard/src/commonMain/kotlin/dev/bnorm/storyboard/SceneFormat.kt\n[SceneScope]: /storyboard/src/commonMain/kotlin/dev/bnorm/storyboard/SceneScope.kt\n\n[//]: # (Compose Links)\n\n[compose]: https://www.jetbrains.com/lp/compose-multiplatform\n[compose-compiler]: https://www.jetbrains.com/help/kotlin-multiplatform-dev/compose-compiler.html\n\n[AnimatedVisibilityScope]: https://developer.android.com/reference/kotlin/androidx/compose/animation/AnimatedVisibilityScope\n[SharedTransitionScope]: https://developer.android.com/reference/kotlin/androidx/compose/animation/SharedTransitionScope\n[Transition]: https://developer.android.com/reference/kotlin/androidx/compose/animation/core/Transition\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbnorm%2Fstoryboard","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbnorm%2Fstoryboard","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbnorm%2Fstoryboard/lists"}