Best Practices

You can make a theme by just throwing stuff on the canvas and hoping for the best. OR you can work smart and create themes that look professional, perform well, and are easy to maintain. Let's go with option two.

Design Principles

Less is More (Usually)

The temptation: Animate ALL THE THINGS!

The reality: Subtle, purposeful animation > chaotic motion soup

Good practice:

Pick 2-3 key elements to animate heavily
Use subtle animations on everything else
Let some things just... exist peacefully

Bad practice:

Everything bouncing, spinning, and flashing simultaneously
Viewer doesn't know where to look
Your theme looks like a Windows 98 screensaver

The test: Can someone focus on the actual content? Or are they distracted by your sweet, sweet animations?

Consistency is King

Pick a style and commit:

If you're going retro:

CRT filter on everything
Pixelate transitions
8-bit sounds
Consistent color palette

If you're going modern:

Clean animations
Subtle effects
Professional easing
Minimalist approach

Don't mix:

Retro pixelated elements with smooth gradients
Professional corporate vibes with Comic Sans
Subtle elegant motion with STROBE EFFECTS

Exception: Unless chaos IS your style. Then go wild. But make it intentionally chaotic.

The Rule of Threes

Three is the magic number:

Three main animated elements
Three colors in your palette
Three layers of depth (foreground, middle, background)

Why three?

Human brains like it
Creates visual hierarchy
Feels complete but not overwhelming

Not a hard rule, but a good guide!

Animation Best Practices

Speed Settings

Too fast = jarring Too slow = boring Just right = chef's kiss

Animation Type	Recommended Speed	Reason
UI feedback	0.2-0.5s	Responsive feel
Transitions	0.5-1.5s	Smooth but not slow
Entrance effects	0.8-2.0s	Build anticipation
Ambient motion	2.0-5.0s	Chill background vibes
Hover/pulse loops	1.0-3.0s	Gentle, not annoying

Golden rule: If you think it's too slow, speed it up 20%. If you think it's too fast, slow it down 30%.

Easing Function Wisdom

Default to Power2.Out for almost everything. Seriously, this one easing function will carry you far.

When to break the rule:

Bounce.Out - Fun, playful moments
Elastic.Out - Extra emphasis, special elements
None (Linear) - Constant motion (spinning, scrolling)
Sine.InOut - Smooth loops (floating, pulsing)
Back.Out - Attention-grabbing entrances

Avoid:

Power4.InOut on everything (too dramatic)
Elastic.InOut (usually too much)
Steps unless you want that specific effect

Loop Philosophy

Good loops feel endless:

Start and end values connect smoothly
Use Yoyo for back-and-forth motion
Subtle loops (10-20% change) beat dramatic ones

Bad loops are jarring:

Sudden jumps back to start
Dramatic value changes
Missing the Yoyo checkbox when you needed it

Test your loops:

Watch for 30 seconds
If it annoys you, it'll annoy users
Adjust or remove

Animation Layering

The layer cake approach:

Bottom layer (Background):

Very slow motion (5-10s animations)
Subtle effects
Sets the mood

Middle layer (Content):

Moderate motion (1-3s animations)
Where the action is
Most viewer attention

Top layer (UI/Interactive):

Quick animations (0.3-1s)
Responsive feedback
Clear and direct

Timing strategy:

Stagger start times slightly (0.1-0.3s apart)
Creates flow instead of "everything moves at once"
More natural feel

Performance Best Practices

Keep It Smooth

Light on resources:

Basic animations (Move, Scale, Rotate, Opacity)
Simple shapes
Optimized images

Heavy on resources:

Multiple shaders per layer
High-resolution videos
Tons of simultaneous animations

The rule: If preview playback stutters, you've gone too far.

Asset Optimization

Images:

Use appropriate resolution (don't upload 4K images for small icons)
Compress before uploading
PNG for transparency, JPG for photos
Remove unused assets

Video:

Compress video files
Use appropriate bitrate
Consider video length
Test playback performance

Audio:

Compress audio files
Use appropriate quality (128-192kbps usually fine)
Consider file size

The goal: Fast loading, smooth playback, happy users.

Theme Size Limit

HyperSpin flags themes over 25 MB with a size warning during development mode. Keep your finished theme under this threshold for the best user experience. Large themes take longer to load and can cause noticeable delays when navigating between games.

Tips to stay under 25 MB:

Compress images with tools like Squoosh or TinyPNG
Use shorter video loops (3-5 seconds is usually enough)
Remove unused assets before publishing
Prefer vector/PNG layers over embedded video where possible

Animation Limits

How many animations is too many?

Safe zone:

3-5 simultaneous animations
Mix of basic and advanced effects
Should run smoothly everywhere

Warning zone:

6-10 simultaneous animations
Multiple shaders active
May stutter on older hardware

Danger zone:

10+ simultaneous animations
Shaders everywhere
Good luck, brave soul

Pro tip: If your development machine struggles, users' machines will definitely struggle.

Organization Best Practices

Naming Conventions

Layers:

❌ Layer 1, Layer 2, Layer 3
✅ Logo, Background, Title, Wheel_Item_1

Why it matters:

Find stuff quickly
Know what layer does at a glance
Future you will thank present you

Naming patterns that work:

Descriptive: "Logo_Animated"
By location: "Top_Banner"
By function: "Game_Title_Text"
By category: "BG_Stars_Slow"

Group Organization

When to group:

Related elements (all UI elements)
Elements that move together
Thematic sections (intro sequence, main display, footer)

Group naming:

❌ Group 1
✅ Intro_Sequence
✅ Main_UI
✅ Background_Elements

Pro structure:

📁 Background_Layer
  └─ BG_Image
  └─ BG_Effect_Stars
📁 Main_Content
  └─ Logo
  └─ Title_Text
  └─ Subtitle
📁 UI_Elements
  └─ Button_Start
  └─ Menu_Icon

Asset Naming

Before uploading, rename files:

❌ IMG_20231015_0042.png
❌ final_FINAL_v3_REAL_final.png
❌ untitled.png

✅ logo_main.png
✅ background_stars.png
✅ button_start_normal.png

Your future self will high-five you.

Workflow Best Practices

The Iteration Loop

Good workflow:

Build basic layout (no animations)
Test composition
Add primary animations
Preview and adjust
Add secondary animations
Preview again
Polish and refine
Final preview
Save and publish

Bad workflow:

Add one element
Animate it to perfection
Add next element
Realize first element needs to move
Curse loudly
Start over

Build structure first, animate second!

Preview Constantly

Press Spacebar after EVERY change.

Seriously. After. Every. Change.

Why?

Catch mistakes immediately
Understand what changes do
Develop intuition faster
Avoid "I've been working for 2 hours on something that looks terrible" moments

The professional habit: Change → Preview → Adjust → Repeat

Save frequently

Use Ctrl+S and wait for the save result. Local recovery copies and queued offline saves still need successful sync before the server has your latest work.

Save after a useful round of edits.
Check sync status before closing the browser.
Keep local browser data until pending work syncs.

Before risky changes:

Save (Ctrl+S)
Make change
If it breaks everything, Ctrl+Z

Version Control (DIY Style)

HyperTheme doesn't have version history (yet), so:

For major changes:

Save current version
Keep a separate saved project copy before major changes
Make changes
Use Undo for retained changes, or return to the separate project copy

The "duplicate first" strategy:

Export screenshots of your progress
Keep notes of what worked
Build a personal library of successful techniques

Design Best Practices

Visual Hierarchy

Make important stuff obvious:

Size: Bigger = more important Motion: Moving = draws attention Color: Contrast = emphasis Position: Center/top = primary focus

Example hierarchy:

Game title (largest, animated, centered)
Game art (medium, subtle animation)
Metadata (smaller, static or subtle)
Background (largest area, slowest motion)

Color Theory Quick Wins

Complementary colors pop:

Blue + Orange
Purple + Yellow
Red + Cyan

Analogous colors harmonize:

Blue + Blue-Green + Green
Red + Red-Orange + Orange

Monochrome is classy:

Different shades of one color
Add white/black for contrast

The 60-30-10 rule:

60% dominant color (background)
30% secondary color (main content)
10% accent color (highlights)

Typography Tips

Readability is everything:

High contrast (dark text on light, or vice versa)
Appropriate size (test at target resolution)
Clean fonts for body text
Fancy fonts for titles only

Animation considerations:

Avoid blur filters on text (unreadable)
Subtle motion only (don't make people chase text)
Consider adding outlines for better visibility

Composition Guidelines

Rule of Thirds:

Place important elements at intersection points
More interesting than dead center

Negative Space:

Don't fill every pixel
Give elements room to breathe
Empty space is design tool

Visual Flow:

Guide viewer's eye
Use animation to direct attention
Create a visual journey

Testing Best Practices

The 30-Second Rule

Watch your theme for 30 seconds straight.

What to check:

Does it get annoying?
Is there a clear focal point?
Do loops feel smooth?
Does anything feel "off"?

If you get bored in 30 seconds, change something.

The Fresh Eyes Test

Take a break:

Work on theme
Save
Leave for 30 minutes (or overnight)
Come back
First impression is usually correct

What looked amazing at 2am might look terrible at 10am.

The Different Resolution Test

If supporting multiple aspect ratios:

Test EACH ratio
Ensure animations work across all
Check that nothing gets cut off
Adjust per-ratio if needed

Get Feedback

Show someone else:

They'll spot issues you missed
Fresh perspective is valuable
"I don't know why, but something feels off" is valid feedback

Community feedback:

Post work-in-progress
Ask specific questions
Iterate based on response

Common Mistakes to Avoid

The Kitchen Sink Syndrome

Don't: Use every animation type in one theme

Do: Pick animations that serve the theme's purpose

Animation Overkill

Don't: Animate everything simultaneously

Do: Create focal points with selective animation

Inconsistent Timing

Don't: Random speeds everywhere (0.3s here, 4.7s there)

Do: Use consistent speed ranges (UI stuff ~1s, ambient ~3s)

Ignoring Performance

Don't: Add shaders until preview crawls

Do: Test performance as you build

Poor Organization

Don't: "Layer 1" through "Layer 47"

Do: Descriptive names and logical groups

Forgetting Mobile/Lower-End Hardware

Don't: Assume everyone has a gaming PC

Do: Test on lower-end devices if possible

Over-Designing

Don't: Keep adding "just one more thing"

Do: Know when to stop (done is better than perfect)

The Professional Polish Checklist

Before publishing, check:

Learning from the Pros

Study successful themes:

What animations do they use?
How fast are they?
What creates the mood?
What makes them cohesive?

Steal techniques, not designs:

Learn the "how" and "why"
Apply to your own work
Develop your style

Build a swipe file:

Screenshot themes you like
Note what works
Reference when stuck

The 80/20 Rule

80% of impact comes from 20% of effort:

Focus on:

Clean layout
2-3 key animations
Consistent style
Smooth performance

Don't obsess over:

Perfect easing curves
Micro-optimizations
Every possible animation type
Pixel-perfect alignment (though close is good!)

Ship good work, not perfect work.

Growing as a Designer

Your first theme will not be your best.

That's fine! Every theme teaches you:

What works and what doesn't
Which animations you like
How to work more efficiently
Your personal style

The path:

Theme 1: Learning the tools
Theme 2: Trying too much
Theme 3: Finding restraint
Theme 4: Developing style
Theme 5+: Refining mastery

Keep making stuff. That's how you get better.

Next Steps

Troubleshooting - Fix common issues
Animation Basics - Refresh fundamentals
Interface Overview - Master the tools

Final Advice: Rules are meant to be broken. Once you understand these best practices, feel free to ignore them in service of your creative vision. But learn the rules first! 🎨✨

Design Principles​

Less is More (Usually)​

Consistency is King​

The Rule of Threes​

Animation Best Practices​

Speed Settings​

Easing Function Wisdom​

Loop Philosophy​

Animation Layering​

Performance Best Practices​

Keep It Smooth​

Asset Optimization​

Animation Limits​

Organization Best Practices​

Naming Conventions​

Group Organization​

Asset Naming​

Workflow Best Practices​

The Iteration Loop​

Preview Constantly​

Save frequently​

Version Control (DIY Style)​

Design Best Practices​

Visual Hierarchy​

Color Theory Quick Wins​

Typography Tips​

Composition Guidelines​

Testing Best Practices​

The 30-Second Rule​

The Fresh Eyes Test​

The Different Resolution Test​

Get Feedback​

Common Mistakes to Avoid​

The Kitchen Sink Syndrome​

Animation Overkill​

Inconsistent Timing​

Ignoring Performance​

Poor Organization​

Forgetting Mobile/Lower-End Hardware​

Over-Designing​

The Professional Polish Checklist​

Learning from the Pros​

The 80/20 Rule​

Growing as a Designer​

Next Steps​