Skip to main content

Interface Overview

Let's take a tour of your new creative workspace! The HyperTheme interface might look like a lot at first, but it's actually pretty intuitive once you know where everything lives.

The Big Picture​

The interface is divided into four main areas:

┌────────────┬─────────────────────────────┬──────────────┐
│            │                             │              │
│   Library  │                             │  Properties  │
│     &      │        Canvas               │      &       │
│   Layers   │     (Your Theme)            │  Animations  │
│            │                             │              │
│            │                             │              │
└────────────┴─────────────────────────────┴──────────────┘
                    Timeline & Controls

Think of it like this:

  • Left: Your ingredients (assets and layers)
  • Center: Your workspace (the canvas)
  • Right: Your tools (properties and effects)
  • Bottom: Your playback controls (timeline)

Left Panel: Library & Layers​

This is your asset management and organization hub.

Library Tab​

Your media storage closet. Everything you upload lives here.

What you'll find:

  • All your uploaded images
  • Audio files
  • Video files
  • A preview of whatever you click on

What you can do:

  • Upload: Click the upload button or press Ctrl+U
  • Preview: Click any asset to see it
  • Drag to Canvas: Click and drag assets onto your theme
  • Organize: Assets organized by type automatically
  • Delete: Remove assets you're not using

Pro tips:

  • Name your files sensibly BEFORE uploading (easier to find later)
  • Preview assets before adding them to canvas
  • Delete unused assets to keep things tidy

Layers Tab​

Your organization HQ. Every element in your theme appears here as a layer.

What you'll find:

  • List of all layers in your theme
  • Hierarchy (groups and nested layers)
  • Visibility toggles (eye icon)
  • Selection indicators

What you can do:

  • Reorder: Drag layers up/down to change stacking order
  • Rename: Double-click the layer name
  • Group: Select multiple and click "Group"
  • Hide/Show: Click the eye icon
  • Delete: Click the X or press Delete
  • Select: Click to select (highlights on canvas too)

Reading the Layer List:

  • Top = Front: Top layers appear in front
  • Bottom = Back: Bottom layers appear behind
  • Indented = Grouped: Nested layers are inside groups
  • Eye icon: Visible (open eye) or hidden (closed eye)

Pro tips:

  • Name your layers! "Layer 1" tells you nothing
  • Use groups for complex themes
  • Hide layers to reduce clutter while editing
  • Top-to-bottom matches front-to-back (it's intuitive once you get it)

Group Organizing​

Click the "Group" button after selecting layers. Groups help you:

  • Organize related elements
  • Move multiple things together
  • Collapse/expand for cleaner workspace
  • Apply effects to multiple layers at once

Center: The Canvas​

This is where the magic happens. Your actual theme lives here.

Canvas Features​

The Grid/Rulers:

  • Turn on via Settings → Grids
  • Options: None, 10×8 Grid, Rule of Thirds, Golden Triangle
  • Helps with alignment and composition

Selection Handles:

  • Corner handles: Resize (hold Shift for proportional)
  • Rotation handle: The circular arrow above
  • Center dot: The anchor/pivot point
  • Bounding box: Shows what's selected

Canvas Controls:

  • Zoom: Ctrl + (in), Ctrl - (out), Ctrl 0 (fit screen)
  • Pan: Just zoom in and drag the canvas
  • Multi-select: Click multiple layers while holding Ctrl

What you can do here:

  • Drag to move: Click and drag any layer
  • Resize: Drag corner handles
  • Rotate: Drag the rotation handle
  • Nudge: Arrow keys for pixel-perfect positioning
  • F1: Set animation start point
  • F2: Set animation end point

The Background:

  • Click the paint bucket icon (bottom toolbar) to change
  • Options: Color, Image, Video, EmuMovies Video
  • Doesn't export with theme (it's just for editing)

Right Panel: Properties & Animations​

Your control center for customization and effects.

Properties Tab (The Controls Panel)​

This is your layer customization powerhouse! Shows interactive controls for whatever you have selected. The controls update automatically as you make changes on the canvas.

How the Controls Work:

The right panel contains dynamic controls that change based on what you've selected. These aren't just static text fields - they're interactive sliders, color pickers, dropdowns, and number inputs that respond in real-time.

Types of Controls You'll See:

  1. Sliders: Drag to adjust values (position, scale, rotation)
  2. Number Inputs: Type exact values or use arrows
  3. Color Pickers: Click to choose colors visually
  4. Dropdowns: Select from predefined options (fonts, easing types, blend modes)
  5. Checkboxes: Toggle features on/off (loop, yoyo, visibility)
  6. Action Buttons: Perform operations (delete animation, add gradient stops)

Layer Transform Controls (visible when layer selected):

  • Position: X and Y sliders for horizontal/vertical position
  • Scale: Width and Height with optional aspect ratio lock
  • Rotation: Degrees slider with visual feedback
  • Pivot/Anchor: Set the center point for rotation and scaling
  • Opacity: Transparency slider (0 = invisible, 100 = solid)

Text Layer Controls (when text layer selected):

  • Text Content: The actual text to display
  • Font: Dropdown of available fonts
  • Font Size: Size slider (typically 8-144)
  • Color: Color picker for text color
  • Alignment: Left, Center, Right options
  • Position: X and Y coordinates
  • Line Spacing: Control vertical spacing between lines
  • Letter Spacing: Adjust spacing between characters

Shape Layer Controls (when shape selected):

  • Shape Type: Rectangle, Circle, Rounded Rectangle dropdown
  • Color: Fill color picker
  • Size: Width and Height
  • Corner Radius: For rounded rectangles
  • Gradient Options: Enable gradients with color stops
    • Add/Remove gradient stops
    • Adjust stop positions and colors
    • Control gradient direction

Sprite/Image Controls (when image layer selected):

  • Transform: Position, Scale, Rotation as above
  • Tint: Color overlay with intensity
  • Blend Mode: How it blends with layers below (Normal, Add, Multiply, Screen, etc.)
  • Tiling: Repeat texture horizontally/vertically (for backgrounds)

Video Layer Controls (when video selected):

  • Loop: Whether video repeats
  • Muted: Audio on/off
  • Playback Rate: Speed multiplier (0.1 = very slow, 2.0 = double speed)

Animation Controls (when animation selected on timeline):

These controls are specific to the animation type you've selected:

Basic Animation Controls:

  • Start Value: Where animation begins
  • End Value: Where animation ends
  • Speed: Duration in seconds (lower = faster)
  • Delay: Seconds before animation starts
  • Easing: Animation curve (Linear, Sine, Quad, Cubic, etc.)
  • In/Out: Whether easing applies at start, end, or both
  • Loop: Repeat animation continuously
  • Yoyo: Reverse animation instead of jumping back to start

Filter Animation Controls:

  • Intensity: Effect strength
  • Speed: Transition duration
  • Loop/Yoyo: Repeat options
  • Plus filter-specific parameters (blur amount, pixelation level, etc.)

Shader/Effect Controls (advanced):

  • Multiple parameters specific to each effect
  • Real-time preview as you adjust
  • Can get complex with 10+ parameters per shader!

Control Organization:

Controls are often organized into folders (collapsible sections) for complex layers:

📁 Position
  ├─ X slider
  └─ Y slider
📁 Scale
  ├─ Width slider
  └─ Height slider
📁 Gradient (for shapes)
  ├─ Enabled checkbox
  ├─ Gradient Type dropdown
  └─ Color Stops (expandable)

Click folder titles to collapse/expand sections you're not using.

Real-time Updates:

As you drag elements on the canvas, the controls update automatically! And vice versa - adjust a control and watch your canvas update instantly.

Pro Tips:

  • Hover for tooltips: Many controls show helpful descriptions
  • Use arrow keys: After clicking a number field, use ↑↓ for fine adjustments
  • Shift+drag sliders: Hold Shift while dragging for finer control
  • Copy values: Double-click to select number, then Ctrl+C to copy
  • Right-click numbers: Some controls allow resetting to default (where available)

What You Won't See:

The controls adapt intelligently:

  • No text controls for image layers
  • No gradient controls unless you enable gradients
  • Animation controls only appear when an animation is selected
  • Some controls hide when others are enabled (color picker hides when gradient is on)

Animations List​

Scrollable list of all 63+ animation types.

How it's organized:

  • Basic Animations (Move, Scale, etc.)
  • Preset Animations (Bounce, Swing, etc.)
  • Filter Animations (Blur, Pixelate, etc.)
  • Advanced Effects (Shaders and special FX)

Using animations:

  • Double-click: Adds to selected layer immediately
  • Drag: Drag onto timeline for precise placement
  • Search: Look for specific animations (if search bar available)
  • Preview icon: Some show a preview of the effect

Themes Selector​

If your project has multiple themes (like different aspect ratios):

  • Switch between themes from the dropdown
  • Each theme can have different layouts
  • Animations can be different per theme

Bottom: Timeline & Controls​

Your animation command center.

Playback Controls​

The buttons on the left:

  • Play (spacebar): Preview all animations
  • Pause (spacebar again): Pause playback
  • Stop: Reset to beginning
  • Screenshot (camera icon): Appears during playback

Timeline Area​

The visual representation of all your animations.

What you see:

  • Horizontal ruler: Time markers (seconds)
  • Layer rows: One row per layer with animations
  • Animation blocks: Colored blocks showing animations
  • Playhead: Vertical line showing current time

What you can do:

  • Drag blocks: Move animation timing
  • Drag edges: Adjust duration
  • Click block: Select animation (properties update)
  • Scrub playhead: Drag to preview specific times
  • Delete: Select block and press Delete

Quick-Add Toolbar​

Icons at the bottom for adding layer types quickly:

  • Text (T icon)
  • Scrollable Text (scrolling T icon)
  • Shapes (square/circle)
  • Sprite Sheet (film icon)
  • Flip Book (pages icon)
  • Metadata Image (game art icon)
  • Metadata Text (info icon)
  • Background (paint bucket)

Pro tip: Hover over icons for tooltips!

Undo/Redo Buttons​

  • Undo (curved arrow left): Ctrl+Z
  • Redo (curved arrow right): Ctrl+Y
  • Unlimited undo during session (amazing!)

Top Menu Bar​

Your main navigation and file operations.

File Menu​

  • Save (Ctrl+S): Save project
  • Publish (Ctrl+P): Publish theme
  • Upload (Ctrl+U): Add assets
  • Import from PSD: Bring in Photoshop files
  • Exit (Esc): Close theme builder

Edit Menu​

  • Undo (Ctrl+Z): Undo last action
  • Redo (Ctrl+Y): Redo undone action
  • Copy (Ctrl+C): Copy selected layer
  • Paste (Ctrl+V): Paste copied layer
  • Metadata: Edit project info

Tools Menu​

  • Take Screenshot: Capture current canvas
  • Zoom In (Ctrl +): Zoom into canvas
  • Zoom Out (Ctrl -): Zoom out of canvas
  • Fit to Screen (Ctrl 0): Reset zoom to fit

Settings Menu​

  • Grids: Choose overlay grid type
  • Handle Opacity: Adjust selection handle visibility
  • Handle Line Thickness: Change handle border width

Theme Info Bar​

Shows at the very top:

  • Project name
  • Theme type
  • Current aspect ratio
  • Aspect ratio switcher (if multiple ratios)

Customizing Your Workspace​

Handle Visibility​

Tired of those selection handles getting in the way?

Adjust opacity:

  • Settings → Handle Opacity
  • Choose: 10%, 25%, 50%, 100%
  • Or press Alt+H to cycle through

Temporarily hide:

  • Hold Alt+H while working
  • Release to bring them back

Grid Overlays​

Turn on grids for better composition:

None: Clean canvas, no helpers

10×8 Grid: Even spacing, good for alignment

Rule of Thirds: Photography composition guide (put interesting stuff at intersections)

Golden Triangle: Advanced composition (diagonal lines)

Canvas Zoom​

Get up close or see the big picture:

  • Zoom In: Ctrl + (or Ctrl scroll up)
  • Zoom Out: Ctrl - (or Ctrl scroll down)
  • Fit Screen: Ctrl 0 (resets to fit entire canvas)
  • Manual Zoom: Zoom control in top right

Workflow Tips​

Typical Session Flow​

  1. Add assets (left panel, Library tab)
  2. Drag to canvas (center area)
  3. Arrange layers (left panel, Layers tab)
  4. Adjust properties (right panel, Properties)
  5. Add animations (right panel, drag to timeline)
  6. Preview (spacebar)
  7. Refine and repeat

Efficient Habits​

Use keyboard shortcuts - Way faster than clicking menus

Work in layers - Build bottom to top

Preview often - Catch issues early

Save frequently - Ctrl+S is your friend (though it auto-saves)

Name everything - Future you will thank present you

Use groups - Organize as you go, not after

Interface Customization​

Currently the interface is fixed, but these are good mental adjustments:

Panel Focus:

  • Working with assets? Focus on left panel
  • Animating? Focus on right panel + timeline
  • Designing? Focus on canvas

Hide Distractions:

  • Hide unused layers (eye icon)
  • Collapse groups you're not working on
  • Use canvas zoom to focus on specific areas

Common Interface Confusion​

"Where did my layer go?"

  • Check if it's hidden (eye icon in Layers tab)
  • Check if it's behind other layers (reorder in Layers)
  • Check if it's off-canvas (zoom out to find it)

"My timeline is empty!"

  • Make sure you have a layer selected
  • Animations are layer-specific

"I can't select my layer!"

  • Another layer might be covering it
  • Click it in the Layers tab instead
  • Try clicking its very edge on canvas

"My properties panel is empty!"

  • Nothing is selected - click a layer or animation
  • Or you're in the wrong tab

"I can't see my handles!"

  • Press Alt+H to cycle handle opacity
  • Check Settings → Handle Opacity
  • Something might be covering them

Pro Interface Tips​

  1. Left hand on keyboard (Ctrl, Shift, Alt, Spacebar)
  2. Right hand on mouse (select, drag, adjust)
  3. Eyes on canvas (where the action is)
  4. Quick glances at timeline (check timing)
  5. Occasional property checks (fine-tune values)

Next Steps​

Now that you know where everything is:

Challenge: Spend 5 minutes just clicking around. Open every menu. Try every button. Break nothing (you can undo!). Familiarity breeds speed! 🖱️