Use the code below to embed this stepwork on any site.
These commands are part of the official Stepwise specification, and are more likely to be supported in other stages or clients.
| Command | Description | $setbackcolor:[CSS color] |
Sets the current background color. | $setforecolor:[CSS color] |
Sets the foreground color. | $setmidcolor:[CSS color] |
Sets the middle ground color. |
|---|
These commands are specific to the current stage, and are less likely to be supported in other stages or clients.
| Command | Description | $setfadeduration:[seconds] |
Set the duration of fade animations. | $setfont:[Google font name][:font weight] |
Sets the current font to a selection from Google Fonts. Font weight parameter is optional. | $setfontsize:[size] |
Sets the current font size. | $setletterspacing:[spacing] |
Sets the current letter spacing. | $setlineheight:[height] |
Sets the current line height. | $setperspective:[px value] |
Sets the perspective from which 3D elements are viewed. Analogous to the CSS perspective property. |
$setscale:[scale] |
Sets the current scale. Analogous to the CSS scale() method. |
$settextalign:[alignment] |
Sets the horizontal alignment of text. Analogous to the CSS text-align property. |
$settexttransform:[text transform] |
Sets the current text transform. | $settransformorigin:[x-axis y-axis z-axis] |
Sets the origin for 3D transforms. Analogous to the CSS transform-origin property. |
$settransition:[seconds] |
Sets the duration of a transition in seconds. | $setrotate3d:[x,y,z,angle] |
Sets the rotation in 3D. Analogous to the CSS rotate3d method. |
$setrotatex:[degrees] |
Sets the rotation on the x axis. Analogous to the CSS rotateX method. |
$setrotatey:[degrees] |
Sets the rotation on the y axis. Analogous to the CSS rotateY method. |
$setrotatez:[degrees] |
Sets the rotation on the z axis. Analogous to the CSS rotateZ method. |
$settranslate3d:[x,y,z] |
Sets the translation in 3D. Analogous to the CSS translate3d method. |
$settranslatex:[pixels] |
Sets the translation on the x axis. Analogous to the CSS translateX method. |
$settranslatey:[pixels] |
Sets the translation on the y axis. Analogous to the CSS translateY method. |
$settranslatez:[pixels] |
Sets the translation on the z axis. Analogous to the CSS translateZ method. |
$settextshadowposition:[x y] |
Sets the text shadow's distance from the text. |
|---|
$setmidcolor command to change the color of the text shadow.Enter the URL of your specially formatted Google Sheets document below. The document must be published to the web in Google Sheets using File > Publish to the Web... but do not use the URL shown in the Publish to Web dialog. Instead, copy the URL to your spreadsheet from the location bar of your browser.
Enter Stepwise XML below. More about Stepwise XML.
Choose a new script to load.
The opening number from Hamilton: An American Musical. Book, lyrics and music by Lin-Manuel Miranda. © Hamilton the Musical.
Verbs from a walkthrough for the boss battles of the 1994 video game Earthworm Jim, set to music adapted from Tommy Tallarico’s score.
A sentence that includes every letter of the alphabet.
Packing instructions for strangers met in passing. Text by Erik Loyer. Music inspired by a phrase credited to Aaron Copland in Miguel Atwood-Ferguson's Phrase Codex, elaborated by Erik Loyer.
A collection of Critical Commons GIF animations from GIPHY. Includes animations by SSWIII.
A poetic loop from Laura Mvula's song "Green Garden".
Non-Stop, from Hamilton: An American Musical. Book, lyrics, music, and © by Lin-Manuel Miranda.
A protest chant.
Eight scholars join an experimental writing workshop in the hope of transforming their work and its impact. They find that by changing the way you write, you can indeed change the way you think—but can that change the world? Part 1 of 2.
Eight scholars join an experimental writing workshop in the hope of transforming their work and its impact. They find that by changing the way you write, you can indeed change the way you think—but can that change the world? Part 1 of 2.
Gerunds from a walkthrough for the 1994 video game Super Metroid, set to music adapted from Kenji Yamamoto and Minako Hamano's score.
A musical adaptation of the influential work of concrete poetry by Décio Pignatari. Text by Décio Pignatari. Music by Erik Loyer.
A description of Isao Tomita's album "The Bermuda Triangle" published in Electronics and Music Maker magazine, February 1983.
Apocalyptic tic-tac-toe inspired by the 1983 film WarGames.
A protest chant.
A story about a depressed and anxious mind. By Elizabeth Brantley.
A transcription of the text and music for Nike's Unlimited Greatness ad telling the story of Serena Williams' career, first aired during the 2016 U.S. Open. © 2016 Nike.
The classic Abbott and Costello comedy routine. Demonstration text showing dialogue between two characters.
A story in which some Americans are surprised to discover to whom they are adjacent. Three rows of randomized statements describing attitude, proximity, and identity. Text and music by Erik Loyer.
Enter the text of your script below. Each line wil be turned into a separate step.
Displays text anchored to the bottom left corner of the window; new lines of text push older ones upward. Allows customization of font, color, 3D rotation, and much more. Includes music support via the GibberSynth effect.
2 Jan 2017 View script CC BY 4.0 Technical notes Music, Mobile-Friendly