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.
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.
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, lines, text, images, video, and audio. They can be grouped, and groups 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't be selected on the canvas until unlocked.
- Order & grouping
- Reorder objects front-to-back in the Objects panel. Group related objects to move and animate them together.
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
- Drag the four corners independently for a free-perspective warp. Off by default; turn it on to fake 3D placement or fit a surface.
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, video, and audio all accept fills, strokes, and effects too — so you can tint a photo, outline a clip, or drop a shadow under any of them.
Editing paths
Double-click a path (or press Enter with it selected) to enter path-edit mode. The sub-tool 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. Marquee-drag to select several anchors at once.
- Add anchor +
- Insert a new anchor point on the path — click an edge, or press the key.
- Delete anchor Delete
- Remove the selected anchor and reconnect its neighbors.
- 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
- Connect two open endpoints into a single continuous path.
- 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.
Tip Press Enter again, or click empty canvas, to finish editing and return to the select tool.
Editing images
Double-click an image to enter image-edit mode — a lightweight pixel editor built into the canvas. Make a selection, then paint, erase, or adjust within it. Without a selection, edits apply to the whole image.
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.
Paint tools
- Brush
- Paint pixels with the current color.
- Eraser
- Erase pixels to transparency.
- Fill
- Flood-fill the selection or the connected region with the current color.
- Stamp (clone)
- Sample one area and paint copies of it elsewhere.
Brush and eraser share four controls: Size (1–500 px), Hardness (0–100), Opacity (0–100), and Flow (0–100).
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.
- Curves
- Remap tonal values with a draggable curve for precise contrast and color control.
Note There's also Invert Colors for a one-click negative. Adjustments apply non-destructively within the current selection; the original pixels stay intact until you commit.
Fills
Fills paint the inside of an object. You can layer multiple fills on one object and toggle each independently.
Gradient shapes
- Linear
- Radial
- Angular
- Diamond
Dynamic fill presets
- Aurora
- Smoke
- Cloud
- Fire
- Liquid metal
- Lens flare
- Caustic light
Strokes
Strokes outline an object's edge. Like fills, you can stack multiple strokes, each with its own color or gradient.
- Width & alignment
- Set the thickness in pixels and align the stroke inside, centered, or 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.
- 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
- Add arrowheads or other endpoint markers to lines and open paths.
Effects
Effects add depth and atmosphere. They apply on top of fills and strokes and can be combined.
Parameters per effect
- Drop shadow
- Offset X / Y (−100–100), Blur (0–250), Spread (−200–200), Color, Alpha (0–1).
- Blur
- Strength (0–250) — the Gaussian blur radius.
- Outer glow
- Blur (0–250), Spread (−200–200), Color, Alpha (0–1), Intensity (0–4).
- Inner shadow
- Offset X / Y (−100–100), Blur (0–250), Spread (−200–200), Color, Alpha (0–1).
- Backdrop blur
- Strength (0–250) — how much the backdrop behind the object is blurred.
- Glass
- Refraction (0–2), Chromatic aberration (0–2), Blur (0–10), Tint (0–1).
- 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.
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.
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.
- 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.