Rise Canvas

Build · arrange · export to Rise

EXPORT TOO LARGE TO PASTE

This export is

It contains embedded images or media, and pasting anything over 1 MB into a Rise code block is slow and unreliable, so Copy HTML is disabled for this canvas. Download it as a zip instead: same content, with the media as proper files, and no size limit.

1 Download the zip below.

2 In your Rise lesson: add a block → Code category → Upload project.

3 Choose the downloaded zip. Done: it renders exactly like the pasted version.

ANIMATION MODE

Entrance animations & block transitions

Two ways to bring a combined canvas export to life: blocks that animate in as the learner scrolls, and runs of blocks that become pages with a Continue button instead of a scroll. Both apply to the combined canvas export and Preview only. A single component copied on its own is not affected.

1 Entrance animations: blocks that arrive with style

Turn on ✨ Animations in the toolbar. Every block gets a small ✨ badge in its top-left corner.
Open the badge’s dropdown and pick an entrance for that block, or leave it on None.
Press ▶ Play entrances to preview the whole canvas, top to bottom, right here.
Export as usual. In the export, each block plays its entrance once, when the learner scrolls it into view.

Fade / Fade upThe classics: subtle and safe anywhere.

Slide left / rightDirectional arrival; good for alternating content.

Scale / BlurGentle grow-in, or a soft focus-pull.

Rise-settleRises with a slight overshoot, then settles. Premium feel.

Bounce / DropPlayful: springs up, or falls in with a squash.

Tilt / Flip-up / Swing3D arrivals: a lean-in, a page hinge, a door swing.

Wipe / IrisReveals: a left-to-right sweep, or a circle blooming open. Striking on imagery.

FanLands with a slight rotation, like a card being placed.

2 Block transitions: turn blocks into pages

Marking blocks ▦ Deck turns the export into screens: consecutive marked blocks appear together on one screen, every unmarked block becomes its own screen, and nothing further down is visible until the learner gets there. The Continue button transitions from screen to screen: a page change, not a scroll.

Arrange your blocks in Design first. Each screen keeps the exact layout of its grouped blocks (side-by-side is fine). Screen order follows the canvas, top to bottom.
In Animation mode, click ▦ Deck on each block you want as a page. Marked blocks show ▦ In deck.
Consecutive marked blocks share one screen (shown together, stacked). An unmarked block ends the group and becomes its own screen. Once anything is marked, the whole export pages screen-by-screen.
Each marked block’s badge gains two extra controls (a screen takes its transition and button label from its last marked block; mark a block on its own to customise a solo screen):
- a transition dropdown: how this page leaves when Continue is pressed;
- a label box: the Continue button’s text while this page is showing (“Continue”, “Next section”, “Kick on”…).
Use Preview to try it. Preview renders the real export, so the deck pages, transitions and buttons all work in it.

The screens automatically get a ← Back button and progress dots. The final screen has no Continue.

PushSlides in from the right: the classic slide-deck feel. The default.

FadeA clean crossfade.

TurnThe page turns away on a left hinge, like a book.

CubeRotates as if the pages were faces of a box.

IrisThe new page blooms open in a circle from the button.

ZoomThe old page blurs towards you as the new one rises. Cinematic.

WipeThe new page sweeps across from the right.

DealThe old page flies off like a dealt card.

3 Locking Continue until a section is complete

On an interactive deck page (a quiz, scenario, sorting activity…), click the block’s 🎯 target button to mark it required for completion. It’s the same control you already use for Rise completion.
In the export, that page’s Continue button locks (with a “Complete this section to continue” hint) until the learner finishes the component (passes the quiz, completes the scenario).

This makes a deck a genuine gated learning path: content → check → content, with no skipping ahead.

4 Good to know

Combined export only. Entrances and decks live in the whole-canvas export (and Preview). Copying one component’s HTML on its own ignores them.
Screens keep your design layout. Grouped blocks appear exactly as arranged on the canvas (side-by-side included), scaling down as one to fit narrower containers. On phones (under 600px wide) a screen’s blocks stack vertically instead.
Entrances work inside screens too. When a screen appears (the first on scroll-in, later ones as their transition lands), its blocks play their chosen entrance animations, gently staggered. Blocks set to None simply show. On canvases with no marked blocks, entrances behave exactly as described above.
Decks are linear: Continue always goes to the next page. (Branching, where buttons jump to a chosen page, is on the roadmap.)
Accessibility is automatic. If a learner’s device asks for reduced motion, entrances simply appear and page changes swap instantly, so nothing is ever hidden from them.
Speed is yours to set. The two sliders next to ▶ Play control how long entrances and screen transitions take. They apply to the whole canvas and are saved with your project.
Everything saves. Animation and deck choices live with the blocks: autosave, undo/redo, project save/load and export round-trips all keep them.

5 If something looks wrong

“My screens aren’t appearing”: paging engages once at least one block is marked and there are two or more screens overall. With a single screen (one component, or everything grouped together) there’s nothing to page between, so instead its chosen transition plays once as an arrival effect when it scrolls into view.
“Continue is greyed out”: that page is gated (🎯). Finish the component, or unmark it if you didn’t mean to gate it.
“Nothing animates when I paste my component”: single-component copies don’t carry animations; use the combined canvas export.
“My side-by-side screen stacked up”: on narrow or mobile viewports (under 600px) a screen’s blocks stack vertically by design; on desktop they keep the canvas layout.

Canvas Preview

🎨

Your canvas is empty

Select a component from the sidebar to build it and place it here.

← Select a component to start

100%

How to load a saved project

Your canvas is empty

Builder couldn't load

🔤 Global font