Skip to main content

Your First Theme - Complete Walkthrough

Let's build an actual theme together, step by step. No skipping steps, no assumptions. By the end, you'll have a fully animated theme and understand the complete workflow.

What We're Building​

A classic wheel theme with:

  • Animated background
  • Logo with entrance effect
  • Wheel items that bounce
  • Floating metadata
  • Ambient animations

Time to complete: 20-30 minutes

Before We Start​

You'll need:

  • A few images (logo, background, wheel item images)
  • Or use the built-in assets/shapes if you don't have images yet

Don't stress about:

  • Making it perfect
  • Using "real" assets
  • Getting everything right first try

This is about learning the workflow!

Phase 1: Project Setup (2 minutes)​

Step 1: Create Your Project​

  1. Open HyperTheme
  2. Click File → New Project
  3. Fill in the details:
    • Name: "My First Theme"
    • Type: Hyperspin Theme
    • Aspect Ratio: 16:9
  4. Click Create

You're now staring at a blank canvas. That's normal!

Step 2: Set a Background Color​

Before we start adding elements, let's set a background so we can see what we're doing.

  1. Look at the bottom toolbar
  2. Find the paint bucket icon (background)
  3. Click it
  4. Choose Color
  5. Pick a dark color (easier to see light elements)
  6. Click Apply

Your canvas now has a colored background. Much better!

Phase 2: Build the Layout (5 minutes)​

Now we'll add elements WITHOUT animating them yet. Structure first!

Step 3: Add a Background Image​

Let's add a background layer.

If you have an image:

  1. Click File → Upload (or Ctrl+U)
  2. Select your background image
  3. Wait for it to appear in Library tab (left panel)
  4. Drag it from Library onto the canvas
  5. Resize using corner handles to fill the screen

If you don't have an image:

  1. Click the rectangle icon in bottom toolbar
  2. A shape appears on canvas
  3. Drag corner handles to fill screen
  4. In the controls panel (right side):
    • Set a Fill color (dark blue or purple works great)
    • Set Opacity to 0.3 (subtle background)

Pro tip: Hold Shift while resizing to maintain proportions!

Step 4: Name Your Background Layer​

Let's start good habits immediately.

  1. Look at Layers tab (left panel)
  2. Find the layer you just added (probably "Layer 1" or "Rectangle 1")
  3. Double-click the name
  4. Rename it to "Background"
  5. Press Enter

See? Now you know what it is!

Every good theme needs a logo or title.

If you have a logo:

  1. Upload it (Ctrl+U)
  2. Drag from Library to canvas
  3. Position it at the top-center of the screen
  4. Resize to appropriate size

If you don't have a logo:

  1. Click the T icon (text) in bottom toolbar
  2. A text box appears
  3. Double-click the text to edit it
  4. Type "MY THEME" or whatever you want
  5. In the controls panel (right side):
    • Increase Font Size (try 72)
    • Change color to white or bright color
    • Choose a bold font

Position the logo:

  • Drag it to top-center
  • Use arrow keys for fine-tuning
  • Leave some space from the top edge

Step 6: Name the Logo Layer​

In Layers tab:

  1. Double-click the layer name
  2. Rename to "Logo"
  3. Press Enter

Step 7: Add Wheel Items​

Now let's add some elements that represent games on your wheel.

The quick way (3-5 items):

For each wheel item:

  1. Upload an image OR add a rectangle shape
  2. Drag to canvas
  3. Resize to similar sizes (smaller than logo)
  4. Position them in a rough horizontal line across middle of screen
  5. Rename each layer: "Wheel_Item_1", "Wheel_Item_2", etc.

Layout suggestion:

        [Logo at top]

[Item1]  [Item2]  [Item3]  [Item4]  [Item5]

Don't worry about perfect spacing yet. Just get them roughly positioned.

Step 8: Review Your Layout​

Press Ctrl+0 to fit the entire canvas on screen.

You should have:

  • Background layer
  • Logo at top
  • 3-5 wheel items across middle
  • All layers named in Layers tab

Take a screenshot mentally. This is your foundation!

Phase 3: Add Basic Animations (8 minutes)​

Now the fun part - making things move!

Step 9: Animate the Background​

Let's give the background subtle motion.

  1. Select the Background layer (click it in Layers tab)
  2. Look at the right panel (animations list)
  3. Scroll down to find "Hover" in the presets
  4. Double-click "Hover"

What just happened:

  • Hover animation added to timeline (bottom)
  • Background will now float gently

Let's customize it:

  1. Timeline now shows a block for the Background layer
  2. Click that animation block to select it
  3. In the controls panel (right side), you'll see Hover settings:
    • Speed: Change to 3.0s (slow, peaceful motion)
    • Loop: Make sure it's checked ✓
    • Yoyo: Make sure it's checked ✓
  4. Press Spacebar to preview

Your background is now floating! Subtle but alive.

Step 10: Animate the Logo (Dramatic Entrance)​

Let's make the logo drop in from above.

  1. Select the Logo layer
  2. Find "Move Y" in Basic Animations (right panel)
  3. Double-click to add it
  4. The animation block appears on timeline

Configure the animation:

  1. Click the Move Y animation block on timeline
  2. In the controls panel (right side):
    • Start Value: -200 (above screen)
    • End Value: (leave as is - current position)
    • Speed: 1.5s
    • Easing: Bounce.Out (find in dropdown)
    • Loop: Leave unchecked (only happens once)
  3. Press Spacebar to preview

Your logo drops in with a bounce! Very satisfying.

Let's add a fade-in too:

  1. Logo still selected
  2. Find "Opacity" in Basic Animations
  3. Double-click to add it
  4. Configure in the controls panel:
    • Start Value: 0 (invisible)
    • End Value: 1 (fully visible)
    • Speed: 1.5s (same as Move Y)
    • Loop: Unchecked

Press Spacebar to preview both animations together!

Now your logo drops AND fades in simultaneously. Professional!

Step 11: Animate Wheel Items (Bouncing)​

Time to make those wheel items bounce!

For EACH wheel item:

  1. Select Wheel_Item_1
  2. Find "Bounce" preset
  3. Double-click to add
  4. Configure:
    • Speed: 2.0s
    • Loop: Checked ✓
    • Yoyo: Checked ✓
    • Delay: 0s (for first item)

Here's the cool part - stagger them:

  1. Select Wheel_Item_2

  2. Double-click "Bounce" preset

  3. Configure same as above BUT:

    • Delay: 0.2s (slight offset)

  4. Select Wheel_Item_3

  5. Add "Bounce"

  6. Delay: 0.4s

  7. Select Wheel_Item_4 (if you have it)

  8. Add "Bounce"

  9. Delay: 0.6s

Continue pattern for any additional items.

Press Spacebar to preview.

Your wheel items now bounce in sequence! This is called "staggering" and it looks AMAZING.

Step 12: Preview Your Work​

Press Spacebar and watch for 20-30 seconds.

You should see:

  • Background floating gently
  • Logo drops in with bounce and fade
  • Wheel items bouncing in sequence

Looking good! Let's add one more layer of polish.

Phase 4: Add Polish (5 minutes)​

Step 13: Add a Pulsing Effect to Selected Item​

Let's make one wheel item look "selected."

  1. Pick your middle wheel item
  2. Find "Scale" in Basic Animations
  3. Double-click to add
  4. Configure:
    • Start Value: 1.0 (normal size)
    • End Value: 1.1 (10% bigger)
    • Speed: 1.0s
    • Easing: Sine.InOut
    • Loop: Checked ✓
    • Yoyo: Checked ✓

This item now pulses slightly, showing it's selected!

Let's give the logo a tiny bit of personality.

  1. Select Logo layer
  2. Find "Rotation" in Basic Animations
  3. Double-click to add
  4. Wait! We need to position this on timeline:
    • Look at timeline
    • Logo already has Move Y and Opacity animations
    • We want Rotation to start AFTER the drop

Position the rotation animation:

  1. Drag the Rotation block on timeline
  2. Move it to start around 1.5s mark (after drop completes)
  3. Configure:
    • Start Value: -5 (tilt left)
    • End Value: 5 (tilt right)
    • Speed: 2.0s
    • Easing: Sine.InOut
    • Loop: Checked ✓
    • Yoyo: Checked ✓

Now logo drops in, THEN starts gently swaying!

Step 15: Add Background Scrolling Stars (Optional)​

If you want extra ambience:

  1. Upload a small star image (or create a tiny white circle shape)
  2. Drag to canvas
  3. Resize very small
  4. Rename layer: "Star"
  5. Add "Move Y" animation:
    • Start: -50 (above screen)
    • End: 1200 (below screen)
    • Speed: 5.0s
    • Loop: Checked
  6. Add "Opacity" animation:
    • Start: 0
    • End: 1 then back to 0
    • Speed: 5.0s
    • Loop: Checked

A star drifts down! Duplicate this (Ctrl+C, Ctrl+V) for more stars.

Phase 5: Refine & Polish (5 minutes)​

Step 16: Adjust Timing​

Watch your theme preview (Spacebar) and ask:

Is anything too fast?

  • Increase Speed value (the duration in seconds - longer duration = slower animation)

Is anything too slow?

  • Decrease Speed value (shorter duration = faster animation)

Do animations feel disconnected?

  • Adjust delays so things flow better
  • Try overlapping animations slightly

Does anything feel wrong?

  • Try different easing functions
  • Adjust start/end values
  • Sometimes removing an animation is better than adding

Step 17: Check Layer Order​

Look at your Layers tab. Order from top to bottom should be:

Logo (front)
Wheel_Item_5
Wheel_Item_4
Wheel_Item_3
Wheel_Item_2
Wheel_Item_1
Star (if you added it)
Background (back)

Drag layers up or down to reorder if needed.

Step 18: Organize with Groups (Good Habit)​

Let's group related items:

  1. Click Wheel_Item_1
  2. Hold Ctrl and click Wheel_Item_2, 3, 4, 5
  3. Click the "Group" button
  4. Rename group to "Wheel Items"

Now you can collapse/expand that group!

Step 19: Fine-Tune Positions​

  1. Press Ctrl+0 to fit screen
  2. Look at overall composition
  3. Use arrow keys to nudge elements
  4. Aim for balanced, centered layout

Enable grid overlay:

  • Settings → Grids → Rule of Thirds
  • Position important elements at intersection points
  • Disable grid when done (Settings → Grids → None)

Phase 6: Final Preview & Save (3 minutes)​

Step 20: The 30-Second Test​

  1. Press Stop button (timeline) to reset to beginning
  2. Press Spacebar to play
  3. Watch for at least 30 seconds
  4. Ask yourself:
    • Does it flow well?
    • Is anything annoying?
    • Are the loops smooth?
    • Would I want to see this theme?

Make any final adjustments based on what you see.

Step 21: Take a Screenshot​

  1. Tools → Take Screenshot
  2. This saves a preview image
  3. Great for sharing or remembering what you built

Step 22: Save Your Project​

  1. Press Ctrl+S
  2. Wait for save confirmation
  3. Your theme is now saved to the cloud!

You can close and come back anytime.

What You've Learned​

Workflow:

  1. Create project
  2. Set background
  3. Add elements (no animation yet)
  4. Name your layers
  5. Add animations one by one
  6. Preview constantly
  7. Refine and adjust
  8. Save

Skills acquired:

  • ✅ Creating and naming layers
  • ✅ Adding basic and preset animations
  • ✅ Using the timeline
  • ✅ Adjusting animation properties
  • ✅ Staggering animations with delays
  • ✅ Combining multiple animations
  • ✅ Using keyboard shortcuts
  • ✅ Organizing with groups
  • ✅ The importance of previewing

Next Steps: Level Up Your Theme​

Easy Additions​

Add more variety:

  • Try different preset animations on wheel items
  • Add filter effects (pixelate, blur, etc.)
  • Experiment with colors using Tint

Add interactivity indicators:

  • Create a "selected" frame around middle item
  • Add arrow graphics that point to selection
  • Animate arrows with bounce or pulse

Add metadata:

  • Click metadata icon (bottom toolbar)
  • Add game name, year, rating, etc.
  • Position and style the text
  • These will auto-update with game info

Intermediate Challenges​

Improve the entrance:

  • Make wheel items slide in from sides
  • Add rotation while they enter
  • Fade in at different speeds

Add depth:

  • Scale back items smaller (perspective effect)
  • Blur slightly (depth of field)
  • Slower animation on distant items

Create an ambient scene:

  • Multiple scrolling background layers at different speeds (parallax)
  • Add particle effects (floating dust, sparkles)
  • Include subtle color shifts using filters

Advanced Experiments​

Shader effects:

  • Add Flag effect to a banner
  • Use Rays behind logo for drama
  • Apply CRT filter for retro vibe

Complex animations:

  • 3D-style rotation effects
  • Multi-stage entrance sequences
  • Interactive-looking highlights

Theme variations:

  • Create versions for different aspect ratios
  • Each can have unique layouts
  • Same assets, different arrangements

Common First-Theme Issues​

"Everything moves at once and it's chaos!"​

Fix: Stagger your animations with delays. Not everything should start at 0s.

"My loops don't look smooth"​

Fix: Enable Yoyo on looping animations. Makes them reverse instead of jump.

"It looks boring"​

Fix: You probably need MORE contrast. Make fast things faster, slow things slower. Bigger differences = more interesting.

"I can't tell what's important"​

Fix: Use the rule: Biggest + Moving + Centered = Most Important. Scale down and slow down less important elements.

"It's too complicated"​

Fix: Remove animations until it feels right. Less is often more.

Celebrate!​

You just built your first theme! 🎉

It might not be perfect. That's totally fine! Every theme you make will be better than the last.

What matters:

  • You learned the workflow
  • You used multiple animation types
  • You previewed and refined
  • You saved your work
  • You finished something!

Your Next Theme Will Be Better​

Now that you know the basics:

Second theme: Focus on one aesthetic (retro, modern, minimal, etc.)

Third theme: Try advanced effects and shaders

Fourth theme: Build something specific for a system or genre

Fifth theme+: Develop your signature style

Save This Theme as a Template​

This basic structure works for tons of themes:

  • Background with subtle motion
  • Logo/title with entrance
  • Main content with staggered animations
  • Selection indicator with pulse

You just built your template. Now customize it for different projects!

Additional Resources​

Now go build something awesome! Start your second theme while this knowledge is fresh. That's how you get good! 🚀