Skip to main content

Interface Overview

HyperTheme places every theme-building tool in one workspace. Four regions handle assets, composition, layer settings, and animation timing.

HyperTheme editor with the main workspace regions visible

Workspace map​

RegionPurpose
Left panelPreview assets, upload media, and manage layer order
CanvasPosition, resize, rotate, and review theme elements
Right panelAdd animations and edit settings for the selected layer
TimelineArrange animation timing and control playback

Start by selecting a layer. HyperTheme highlights the matching canvas element, loads the layer settings, and shows every animation assigned to the layer.

Left panel​

The left panel contains the Library and Layers tabs. Use the Library during asset setup. Use Layers during layout and animation work.

Library​

HyperTheme Library panel with uploaded theme assets

The Library stores images, video, audio, and other project media.

  • Select an asset to load the preview.
  • Select Upload to add media.
  • Select Import From PSD to bring in a Photoshop layout.
  • Drag an asset onto the canvas to create a layer.
  • Select the X beside an unused asset to remove the asset.

Use short, descriptive file names before upload. Clear names make later searches and layer setup faster.

Layers​

HyperTheme Layers panel with the Token layer selected

Layers control stacking order and selection.

  • Higher rows appear in front of lower rows.
  • Select a row to select the matching canvas element.
  • Drag rows to change stacking order.
  • Select the eye icon to hide or show a layer.
  • Select the X to delete a layer.
  • Select several layers, then select Group, to move and organize them together.

Name layers by purpose, such as logo, game title, or background video. Avoid names such as Layer 1.

Canvas​

HyperTheme canvas with a selected token layer

The canvas shows the current theme at the selected aspect ratio. The checkerboard marks transparent space outside the artwork.

When a layer is selected:

  • Drag inside the selection to move the layer.
  • Drag a corner handle to resize the layer.
  • Drag the rotation control to rotate the layer.
  • Use the center marker to review the pivot point.
  • Use arrow keys for small position changes.

The ruler shows canvas coordinates. Use Settings to add grid overlays or change handle visibility.

Right panel​

HyperTheme animation and properties panel

The right panel combines animation choices with settings for the current selection.

Animation choices​

The upper section groups animation types into tabs. Common choices include:

  • Move X and Move Y
  • Scale
  • Opacity
  • Rotation
  • Flip and skew
  • Hover
  • Horizontal and vertical scrolling

Select an animation type to add or configure motion for the selected layer.

Properties​

The lower section changes with the selected layer or animation. A selected image layer exposes settings such as:

  • Opacity
  • X and Y position
  • X and Y scale
  • Pivot location
  • Rotation angle
  • Tiling
  • Stroke
  • 3D perspective

Open or close each section from the heading. Type exact values in number fields when precise placement matters.

The playhead must sit at 0s before layer property edits. Move the playhead to the start when the controls appear disabled.

Timeline and playback​

HyperTheme timeline with four animation tracks

The bottom workspace controls theme playback and animation timing.

Toolbar​

The toolbar adds common layer types and project media. Hover over any icon to view its label.

From left to right, the toolbar includes Publish, background tools, media tools, text tools, shapes, sprite tools, playback, undo, and redo.

Timeline​

Each blue bar represents one animation assigned to the selected layer.

  • Drag the red playhead to inspect a specific time.
  • Select an animation bar to load its settings.
  • Drag a bar to change its start time.
  • Drag a bar edge to change its duration.
  • Press Delete after selection to remove an animation.
  • Move the playhead to 0s before changing layer properties.

Use the play button for a full preview. Use the stop button to return to the start.

Top menu bar​

The top menu bar handles project-wide actions.

File​

  • Save the project.
  • Publish the theme.
  • Upload media.
  • Import a PSD.
  • Exit the builder.

Edit​

  • Undo or redo changes.
  • Copy and paste selected layers.
  • Edit project metadata.

Tools​

  • Take a canvas screenshot.
  • Zoom in or out.
  • Fit the canvas to the workspace.

Settings​

  • Choose a grid overlay.
  • Set handle opacity.
  • Set handle line thickness.

The center title identifies the current project and system. The aspect-ratio selector sits on the right.

First-session workflow​

  1. Upload source media from the Library.
  2. Drag each needed asset onto the canvas.
  3. Order and name layers in the Layers tab.
  4. Position and size each layer on the canvas.
  5. Enter exact values in the Properties panel.
  6. Add animations from the right panel.
  7. Adjust timing on the timeline.
  8. Preview from the start.
  9. Save the project.

Quick fixes​

A layer is missing​

  • Check the eye icon in Layers.
  • Move the layer higher in the layer list.
  • Zoom out and look beyond the visible canvas.

A layer is hard to select​

  • Select the layer from the Layers tab.
  • Hide any layer covering the target.

Properties appear disabled​

  • Select a layer.
  • Move the timeline playhead to 0s.

The timeline looks empty​

  • Select a layer with assigned animations.
  • Add an animation from the right panel.

Next steps​