Design fundamentals

Design in SSHOW is built on three ideas: scenes hold your composition, objects are the things inside a scene, and styles control how each object looks. Master these and the rest of the editor falls into place.

A dark stage scattered with rendered shapes: rounded cards and discs filled with linear, radial, angular, and diamond gradients, a glowing accent, an animated aurora panel, and a gradient-stroked outline. — Everything here is the live renderer — the four gradient kinds, a dynamic aurora fill, a gradient stroke, plus glow and shadow effects, composed on one stage.

Scenes

A project is an ordered set of scenes. One scene is shown at a time, and motion happens when you move from one scene to the next.

All scenes share a single canvas size — set the width and height once in the Scene inspector.
Each scene has its own background color and effects, plus a name and description for organization.
Turn on Clip Contents to hide anything that spills outside the scene bounds.
Double-click a scene's name on the canvas to rename it inline — press Enter to confirm or Esc to cancel.

Tip Duplicate a scene before making changes — the transition engine animates between the original and the copy automatically.

Objects

Objects are everything you place on the canvas: rectangles, ellipses, paths, text, images, video, and audio. They can be grouped or placed inside frames, and containers can be nested.

Transform & size: Position, rotation, scale, skew, and anchor point — plus width and height. The anchor sets the pivot for rotation and scaling.
Appearance: Opacity, blend mode, visibility, and lock. Locked objects can still be selected, but they can't be moved, resized, or rotated until unlocked.
Order & grouping: Reorder objects front-to-back in the Objects panel. Group related objects to move and animate them together.

Shape types

Frame: A fixed-size container with its own background and rounded corners that clips the layers inside it — a card, panel, or artboard you drop elements into.
Rectangle: Round each corner independently — from sharp right angles to a fully rounded pill.
Ellipse: Set an inner radius to cut a donut or ring; leave it at zero for a filled disc.
Text: Full typography — family, size, weight, style, line height, letter spacing, and horizontal + vertical alignment, with auto-size and {{variable}} tokens.
Path: Draw vector shapes from anchor points — straight, quadratic, or cubic segments, left open as a line or closed into a fillable shape.

Tip Drag any object onto a frame and it highlights as a drop target — release to nest the object inside, keeping its position. Drag it back out, or into another frame, the same way. Hold Space mid-drag to keep the current parent and move without re-nesting.

Alignment & distribution

Align: Select two or more objects and snap them to a shared edge — left, center, or right horizontally, top, middle, or bottom vertically. The align buttons appear in the sub-tool strip whenever a multi-selection is active.
Distribute: Space three or more objects evenly along the horizontal or vertical axis so the gaps between them are equal — the distribute buttons sit beside the align ones in the strip.

Pin (constraints)

Pin tells an object how to follow its parent when the parent changes size. It works for objects inside a frame and for objects sitting directly on the scene: resize the frame — or the scene itself — and every pinned child moves by its own rule, live as you drag. The default (left / top) keeps today's behavior, so nothing shifts until you ask it to.

The Pin section of the object inspector: a square widget with left, right, top, and bottom ticks around a center dot, plus a dropdown per axis. — The Pin widget — click a side tick to pin that edge or the dot to center; each axis also has a dropdown with Stretch and Scale.

Pin to an edge: Lock the distance to one side — left or right, top or bottom. A close button pinned right stays in its corner no matter how wide the frame gets.
Center: Keep the object centered on that axis — it takes half of every size change and stays balanced in the middle.
Stretch: Pin both sides at once: the object keeps its distance to both parent edges, growing and shrinking with the parent — ideal for full-width bars and backgrounds.
Scale: Position and size scale proportionally with the parent, like a percentage of the layout — the whole arrangement zooms together.

Set it in the right-hand inspector: the Pin section appears when the selected object sits directly in a frame or on the scene. Children of a group follow their group instead, so they don't show it.
Click the side ticks Figma-style — activating both sides of one axis turns it into Stretch — or pick any mode, including Scale, from the per-axis dropdowns.
Pins hold everywhere a parent can resize: dragging a frame handle on the canvas, typing a width in the panel, undo and redo — and even scene transitions, where pinned children morph smoothly between two frame sizes.

The same frame at two widths: a button pinned right stays in the corner, the centered title stays centered, and the background bar stretches to fill. — One frame, two widths — each child follows its own pin: right-pinned holds the corner, Center stays centered, Stretch fills.

Tip Designing one layout for many canvas sizes? Stretch the backgrounds, pin logos to a corner, center the titles — then change the scene size and watch the layout adapt by itself.

Images, video & audio

Media objects extend the shared object model — transform, opacity, blend mode, fills, strokes, and effects all still apply — and add their own fields for source media and playback.

Image properties

Source: The image asset to display. Swap it any time without losing the object's transform or styles.
Origin size: The asset's intrinsic pixel width and height. Resizing the object scales from this — use it to reset to the original aspect ratio.
Corner radius: Round the image corners individually as [top-left, top-right, bottom-right, bottom-left] — from a single rounded card to a full pill.
Distort: Warp an object in free perspective by dragging its four corners independently. Pick the Distort sub-tool, drag any corner (hold Shift to constrain) and watch the live preview — it works on images, video, and text, and can be hidden and brought back without losing the corners. Off by default.

Video properties

Playback: Autoplay (off), Loop (off), Muted (on), and Volume (0–1). Video stays muted by default so scenes open quietly.
Trim: Set Trim In and Trim Out to play only a portion of the clip; the rest is left untouched on the asset.
Timeline sync: Turn on to bind playback to the scene timeline so the clip scrubs with your animation instead of playing on its own.
Shape: Video shares the image corner-radius and distort controls, so a clip can be rounded or perspective-warped like any picture.

Audio properties

Playback: Autoplay (off), Loop (off), Muted (off), and Volume (0–1) — the same transport as video, minus the picture.
Trim: Trim In and Trim Out clip the track to the part you need.
Timeline sync: Bind the track to the scene timeline so sound follows your animation's playhead.
Canvas marker: Audio has no visible picture, so it shows as a small marker (20×20 by default) you can position freely on the canvas.

Note Images and video accept strokes and effects too — so you can outline a clip or drop a shadow beneath it. Fills are for shapes and text; audio carries no visual styling.

Formatting text

Double-click a text object to edit it, and a quick-format strip appears with the everyday controls — the same ones the keyboard shortcuts reach.

Split: Break a text object into one piece per word, or per character — wrapped in a group that replaces the original in a single undo. Each piece is its own editable text object, so every word or letter can move on its own; pair it with a staggered motion preset for instant per-word or per-letter animation. Whitespace stays as spacing, and character mode is safe with Korean syllables and emoji.
Distort: Drag the four corners for a free-perspective warp — the same control images and video use. The text bakes into a mesh and bends as one piece, staying crisp at any angle. Off by default; turn it on to lean type with the light or set a line onto a surface.

Tip Bold, italic, and underline also respond to Ctrl/⌘ + B / I / U while you're editing.

Formatting text

Double-click a text object to edit it, and a quick-format strip appears with the everyday controls — the same ones the keyboard shortcuts reach.

Bold Ctrl / ⌘ + B: Thicken the selected text using the font's bold weight.
Italic Ctrl / ⌘ + I: Slant the selected text.
Underline Ctrl / ⌘ + U: Draw a line under the text.
Strikethrough: Draw a line through the text.
Alignment: Set horizontal alignment — left, center, right, or justify — and vertical alignment — top, middle, or bottom — within the text box.
Auto-size: Leave it on and the box grows to fit the text; turn it off to fix the box width so body text wraps inside it.

Tip Bold, italic, and underline also respond to Ctrl/⌘ + B / I / U while you're editing.

Editing paths

Double-click a path — or press the path-edit button in the sub-tool strip — to enter path-edit mode. The strip swaps to anchor tools so you can reshape the curve point by point: drag an anchor to move it, or drag its handles to bend the bezier. Every operation is committed as its own undo step.

A curved path selected in the editor with the Anchor tool active, and the Path inspector on the right showing the point count and the raw path data. — With the Anchor tool, a path becomes editable point by point — the Path inspector shows its points and raw geometry.

The sub-tool strip in path-edit mode: add and delete anchor, join and split path, make corner and make smooth, plus anchor align buttons. — In path-edit mode the strip swaps to anchor tools — add, delete, join, split, corner, smooth, and align.

Add anchor +: Insert a new anchor — click anywhere on a segment to add one right there, or press the key to split the segment after the selected anchor at its midpoint.
Delete anchor Delete / −: Remove the selected anchors and reconnect their neighbors. A path always keeps at least two points.
Make corner Shift + S: Turn the selected anchor into a sharp corner by retracting its handles.
Make smooth Shift + C: Convert the selected anchor into a smooth point with symmetric handles.
Join path: Select a path's two open endpoints to connect them — endpoints close together merge into one point; distant ones get a connecting segment.
Split path: Break the path at the selected anchor to create an open end.
Align & distribute anchors: Line selected anchors up or space them evenly — the same align controls as objects, applied to points.

Mouse & modifiers

Select anchors Shift: Click an anchor to select it; Shift-click adds it to — or removes it from — the selection.
Move anchors Shift: Drag to move every selected anchor together; they snap to the x/y of nearby anchors. Hold Shift to lock the drag to one axis.
Bend handles Alt: Drag a handle to curve its segment — the opposite handle mirrors to keep the point smooth. Hold Alt to move one handle alone for an asymmetric curve.
Reset a handle: Double-click a handle to retract it; that side of the point becomes a straight corner.
Click a segment: Click anywhere on the path line to insert an anchor at that exact spot and drag it right away — hovering a segment shows a + indicator.
Marquee select Shift: Drag on empty canvas to select every anchor inside the box; hold Shift to add to the current selection.

Keyboard

Action	Key
Nudge the selected anchors by 1 px (Shift = 10 px)	`↑ ↓ ← →`
Select all anchors	`Ctrl / ⌘ + A`
Finish editing (Ctrl / ⌘ + Enter works too)	`Esc`

Tip Click empty canvas — or press Esc — to finish editing and return to the select tool. The number keys still press the visible sub-tool buttons in order, here as everywhere.

Editing images

Double-click an image — or press the image-edit button in the sub-tool strip — to enter image-edit mode, a lightweight pixel editor built into the canvas. Make a selection, then paint, erase, or adjust within it; with no selection, edits apply to the whole image. Every operation commits on its own, so each one is a single undo step.

Image-edit mode on the canvas: a lasso selection outlined by marching ants with the round brush cursor painting inside it. — Image editing happens right on the canvas — selections show as marching ants, and paint stays inside them.

Selection tools

Lasso: Draw a freehand selection around any region.
Rectangle select: Select a rectangular region.
Ellipse select: Select an elliptical region.
Invert selection: Flip the selection so everything outside it becomes selected.

Selections combine like in a photo editor: a plain drag starts a new selection, Shift-drag adds to it, and Alt-drag subtracts from it. A click without a drag — or Ctrl / ⌘ + D — clears the selection.

Paint tools

Brush: Paint pixels with the current color.
Eraser: Erase pixels to transparency.
Fill: Fill the selection — or the entire image when nothing is selected — with the current color in one click.
Stamp (clone): Clone pixels from one place to another: Alt-click to set the source, then paint — the source follows your stroke at a fixed offset.

Brush, eraser, and stamp each remember their own Size (1–500 px), Hardness (0–100), and Opacity (0–100); brush and stamp add Flow, and the brush color comes from the color panel. Shift-click any of them to paint a straight line from your last point.

The Brush panel: Size, Hardness, Opacity, and Flow sliders with a color swatch. — Brush, eraser, and stamp each keep their own settings — switch tools and your values are waiting.

Crop

Crop trims the image to a rectangle. It starts from your current selection's bounds — or the full image — with eight handles to adjust.

Crop area: Drag the corner and edge handles to frame exactly what you want to keep.
Keep ratio Shift: Hold Shift while dragging a handle to preserve the aspect ratio.
From center Alt: Hold Alt to resize the crop area around its center.
Commit / cancel Enter / Esc: Enter applies the crop — pixels outside are really removed, undoable as one step. Esc puts the crop tool away without changing anything.

The crop tool active on a photo: a bright rectangle with eight handles, the area outside dimmed. — Crop starts from your selection or the full image — Enter commits, Esc backs out.

Color & adjustments

Tone: Brightness, Contrast, and Exposure, each −100 to 100.
Color: Hue (−180–180°) and Saturation (−100–100).
Color balance: Shift Cyan/Red, Magenta/Green, and Yellow/Blue independently in shadows, midtones, and highlights.
Black & white: Convert the image to monochrome, with an optional tint color.
Curves: Remap tonal values with a draggable curve for precise contrast and color control.

The Image Adjustments panel: Tone (brightness, contrast, exposure) and Colour (hue, saturation) sliders, plus collapsible Colour Balance, Black & White, Levels, and Curves, with Reset and Apply. — Non-destructive image adjustments — tone, colour, colour balance, levels, and curves, all on one Reset/Apply panel.

Shortcuts in image-edit mode

Action	Key
Copy the selected pixels (also lands on the system clipboard as a PNG)	`Ctrl / ⌘ + C`
Cut — copy the selected pixels, then clear them	`Ctrl / ⌘ + X`
Paste as a new image object, placed exactly where it was copied	`Ctrl / ⌘ + V`
Clear the selected pixels to transparency	`Delete`
Select the whole image	`Ctrl / ⌘ + A`
Deselect	`Ctrl / ⌘ + D`
Invert the selection	`Ctrl / ⌘ + Shift + I`
Invert colors — a one-click negative	`Ctrl / ⌘ + I`
Step back: put away the crop or selection first, then exit	`Esc`

Note Adjustments preview non-destructively — within the selection when there is one — and the original pixels stay intact until you commit. One limit: while Distort is turned on for the image, the coordinate-based tools (selection, paint, crop) are disabled; Invert Colors and Adjustments still work.

Fills

Fills paint the inside of an object. You can layer multiple fills on one object and toggle each independently.

Solid A single color with adjustable opacity.

Gradient Smooth blends across multiple color stops, in four shapes.

Image Place an image as a fill with scale, offset, rotation, and tiling.

Dynamic Procedural, animated textures generated in real time.

Gradient shapes

Linear
Radial
Angular
Diamond

Dynamic fill presets

Aurora
Ink
Fire
Lens flare

Four rounded tiles, each filled by a live procedural shader — aurora ribbons, marbled ink, rising fire, and a lens flare. — Dynamic fills are real-time shaders, not images — four built-in presets, each animating continuously in the editor.

Working with color

Eyedropper: Click the picker in the color editor, then click anywhere on the canvas to sample that pixel's color — a magnifier loupe follows the cursor so you hit the exact spot. Press Esc to cancel. The sample lands on the current fill or the selected gradient stop.
Recent colors: The editor keeps a row of colors you've used so you can reapply one with a click. Right-click a swatch to pin it as a favorite — favorites sort first and never drop off — or to remove it. The list is shared across every fill, stroke, and effect and saved in your browser.
On-canvas gradient handles: With a gradient fill active, handles appear right on the object: drag the endpoints to aim a linear gradient, the center and radius rings for radial and diamond, or the rotation handle for angular. Hold Shift to snap to 45°, Alt for fine control. Click the gradient line to add a stop, double-click one to remove it (two stops minimum).

Strokes

Strokes outline an object's edge. Like fills, you can stack multiple strokes, each with its own color or gradient.

Four outline treatments in a row: a thick rounded-join iridescent border, a dashed outline, a partially-drawn outline that glows, and an arrowed curved path. — One stroke system, many looks — width and join, dashes, trim for draw-on reveals, and arrowheads on open paths.

Width & alignment: Set the thickness in pixels, then slide Align from 0 (inside the edge) through 0.5 (centered) to 1 (outside the edge).
Color & gradient: Strokes accept a solid color or any gradient type, with independent opacity.
Caps & joins: Choose butt, round, or square line caps, and miter, round, or bevel corners.
Opacity & visibility: Each stroke has its own opacity (0–100%) and a show/hide toggle, so you can dim or temporarily hide one stroke in a stack without deleting it.
Dashes: Define a dash pattern to turn a solid line into dashes or dots.
Trim: Reveal only part of a stroke with start, end, and offset — great for drawing-on animations.
Line heads: Cap the ends of lines and open paths with markers — none, triangle, open chevron, diamond, circle, square, or bar — with start and end set independently, each at its own scale. Closed shapes have no ends, so heads don't apply there.

The Stroke panel: width and opacity, cap and join (both Round), dash style, start and end line heads, and trim-path start, end, and offset sliders. — The stroke settings up close — width, cap and join, dashes, line heads, and trim, all in one panel.

Effects

Effects add depth and atmosphere. They apply on top of fills and strokes and can be combined.

Six copies of the same gradient card, each with a different effect: plain, drop shadow, inner shadow, outer glow, gaussian blur, and a refractive glass panel over a conic colour wheel. — The same card under the effect pipeline — drop shadow, inner shadow, outer glow, blur, and a refractive glass panel that bends the colour wheel behind it.

Drop shadow Offset, blur, spread, and color for a cast shadow.

Blur A smooth Gaussian blur of the whole object — uniform, or eased along a gradient from sharp to soft.

Outer glow A soft luminous halo around the object's edge.

Inner shadow A shadow cast inward for recessed, inset looks.

Backdrop blur Blurs whatever sits behind the object — the frosted-glass look. Like Blur, it can ease along a gradient instead of staying even.

Glass Advanced glass-morphism with refraction and a fresnel edge.

Noise Adds film grain or texture with adjustable scale and opacity.

Adjustment Tune brightness, contrast, saturation, and hue.

Parameters per effect

Drop shadow: Offset X / Y (−100–100), Blur (0–100), Spread (−100–100), Color, Alpha (0–1).
Blur: Strength (0–100) — the Gaussian blur radius. Turn on Gradient to blur along a line: drag the start and end handles on the canvas and set the blur strength at each end.
Outer glow: Blur (0–100), Spread (−100–100), Color, Alpha (0–1), Intensity (0–4).
Inner shadow: Offset X / Y (−100–100), Blur (0–100), Spread (−100–100), Color, Alpha (0–1).
Backdrop blur: Strength (0–100) — how much the backdrop behind the object is blurred. Gradient blurs the backdrop progressively along a line you drag on the canvas.
Glass: Refraction (0–2), Chromatic aberration (0–2), Blur (0–10). The glass tint is taken from the object's fill colour.
Noise: Amount (0–1), Scale (1–10), Monochrome (on/off), Seed (0–100).
Adjustment: Brightness / Contrast / Exposure (−100–100), Hue (−180–180°), Saturation (−100–100), per-range Color Balance (shadows · midtones · highlights), and Black & White conversion with an optional tint.

The Effects panel editing a drop shadow: Offset X and Y, Blur, Spread, Colour, and Alpha controls. — Each effect opens its own controls — here a drop shadow's offset, blur, spread, colour, and alpha.

Tip Effects render on the GPU, so stacking several stays smooth — but a heavy blur on a very large object is the most expensive. Keep an eye on it for long animations.

Blend modes

Every object carries a blend mode that decides how its colors mix with the layers behind it. Leave it on Normal for ordinary stacking, or switch it to fuse layers like light, ink, or glass.

Normal: The default — the object covers what's behind it, scaled only by its opacity.
Darken family: Darken, Multiply, and Color Burn keep the darker result of the two layers — ideal for shadows, ink, and tinting onto light backgrounds, since white drops out.
Lighten family: Lighten, Screen, and Color Dodge keep the brighter result — perfect for glows, highlights, and light leaks, since black drops out.
Contrast family: Overlay, Soft Light, and Hard Light darken and lighten at once around mid-grey to boost contrast and texture.
Comparative: Difference and Exclusion invert colors against each other for bold, graphic, sometimes psychedelic results.
Component: Hue, Saturation, Color, and Luminosity borrow a single channel from the object and take the rest from below — recolor artwork while keeping its shading.

Note Blend modes work together with opacity, not instead of it. Pair a mode with reduced opacity to ease the effect in.

Reuse styles

Style one object the way you like, then stamp that look onto everything else — no need to rebuild it by hand.

A fully-styled source card on the left — gradient fill, gradient outline, and glow — with a trail of dots leading to a circle, a square, and a small card on the right that all wear the exact same style. — Copy one object's look and paste it onto any selection — fills, strokes, and effects travel together.

Copy / Paste Styles: Right-click an object and choose Copy Styles to pick up its fills, strokes, and effects, then Paste Styles onto everything you've selected. It's type-aware: images and videos take strokes and effects (not fills), and groups take effects only.
Copy / Paste Typography: For text, Copy Typography carries the formatting — font, size, weight, style, line height, letter spacing, decoration, and alignment — and pastes it onto your other text objects, leaving each one's words untouched.

The right-click context menu showing Copy Styles and Paste Styles, alongside group, mask, arrange, and visibility actions with their shortcuts. — Right-click any object for Copy Styles / Paste Styles (and Copy / Paste Typography on text) — the same menu also holds Group, Use as Mask, and arrange.

Tip Paste is one-to-many: select several objects and a single paste styles them all, undoable in one step.

Masking

Masking clips a set of objects to the silhouette of another shape. Select two or more objects, then apply a mask — they become a group whose visibility is shaped by the top object.

Bold 'SSHOW' lettering filled with an iridescent gradient on a dark stage — the colour shows only through the letter shapes. — Masking clips one object to the shape of another — here a colour fill shows only through text used as the mask.

Mask Ctrl / ⌘ + M: The topmost object becomes the mask; everything below it shows only where the mask covers them.
Inverted mask Ctrl / ⌘ + Shift + M: Flips the mask so the shape punches a hole instead — the content shows everywhere except under the mask.
Release: Apply the same shortcut again on a masked group to turn masking off and get the plain objects back.

How masks behave

Any shape can be a mask — a rectangle, ellipse, star, or custom path. The top object in the group is always the mask.
Text masks by its alpha: brighter, more opaque letters reveal more of the content beneath, so you can knock a photo out through type.
A normal mask takes the bounds of the mask shape; an inverted mask takes the bounds of the masked content.

Tip Edit either part later — double-click into the group to restyle or move the mask shape, and the clip updates live.