Premium DOM Component


Multi-panel story with cool effects

by Read Write Tools
The rwt-storyboard DOM component displays a sequence of panels that tell a story. Transitions from one panel to the next can slide-in or fade-in to dramatic effect. The content of each panel is provided by an HTML template, and the sequencing speed can be controlled by CSS variables.


The rwt-storyboard DOM component is intended for use on web pages where the author wants to grab the reader's attention and funnel them towards a particular action.

The component has these features:

  • Each panel may contain any arbitrary content and styling.
  • Each panel may be transitioned to visibility using it's own effect.
  • The first panel can be shown with an initial delay before the sequencing begins.
  • The last panel can be shown with a final hold time before restarting the full sequence.
  • Sequencing occurs only when the component is fully visible within the browser's viewport. It is suspended when the component is hidden or only partially visible.
  • The user may suspend the auto-sequencing by clicking anywhere within the component's frame, and may resume the auto-sequencing by clicking the component a second time.
  • Round buttons along the bottom of the storyboard allow the user to override the auto-sequencing to display a particular panel.

In the wild

To see an example of this component in use, visit the READ WRITE STACK website. Each page uses this component to tell a user story about apps, plugins and DOM components. To understand what's going on under the hood, use the browser's inspector to view the HTML source code and network activity.


DOM components logo Documentation READ WRITE HUB
git logo Source code github
DOM components logo Component catalog DOM COMPONENTS
npm logo Package installation npm
Read Write Stack logo Publication venue READ WRITE STACK
Read Write Tools icon

Smart tech


Read Write Hub icon

Distraction-free writing



Rediscover HTML


Read Write Serve icon

Served with pure HTTP/2


Premium DOM Component

🔗 🔎