Advanced Effects (Shaders & Special FX)

Alright, now we're getting into the REALLY cool stuff. These 30+ advanced effects are shader-based, which basically means "GPU-powered magic." This is where you go from "that's a nice theme" to "wait, HOW did you do that?!"

What Are Shaders?

Shaders are programs that run on your graphics card. They can create effects that would be impossible (or super slow) otherwise. The good news? You don't need to know ANY of that technical stuff. Just pick an effect, tweak some settings, and watch the magic happen.

Shader Categories

HyperTheme organizes shaders into six main categories:

1. Transform Shaders - Movement and deformation (Flag, etc.)
2. Color Shaders - Color manipulation (Grayscale, Color Replace, Adjustment)
3. Blur & Focus Shaders - Blur effects (Blur, Gaussian, Tilt Shift)
4. Style Shaders - Artistic styles (ASCII, Cross Hatch, Outline, Bevel)
5. Effect Shaders - Visual effects (Bloom, Ripple, Stripes, Circles, Rays)
6. Transition Shaders - Reveal and wipe effects (Swipe, Reveal Left/Right/Top/Bottom)
7. Preset Filters - Pre-configured effect combinations (CRT, Old Film, RGB Split, Tilt Shift)

The Advanced Effects Arsenal

Wave & Distortion Effects

Flag Effect

Makes your layer wave like a flag in the wind. Seriously cool.

What it does:

• Adds wave motion across the image
• Looks like fabric rippling
• Continuous flowing movement

Perfect for:

• Actual flags (duh!)
• Banners and ribbons
• Water reflection simulation
• Cloth and fabric
• Making anything feel alive

Settings to play with:

• Wave speed (how fast it ripples)
• Wave amplitude (how BIG the waves are)
• Wave frequency (how many waves)

The vibe: Whoooosh (that's wind sound)

Pro tip: Combine with slight rotation for wind-blown flag perfection!

Ripple

Water ripple effect that emanates from a point. Like dropping a stone in a pond.

What it does:

• Concentric waves spread outward
• Distorts the image in wave patterns
• Can be continuous or triggered

Perfect for:

• Water effects (obviously)
• Impact moments
• Selection highlights
• Portal effects
• "Disturbance in the force" vibes

The vibe: Plop! 💧

Cool trick: Center it on a logo for an emerging-from-water effect!

Line & Stripe Effects

Stripe Effect (2 variations)

Animated stripes that can transition or move across your layer.

What it does:

• Creates stripe patterns
• Can transition between images
• Directional movement

Perfect for:

• Wipe transitions
• Barcode aesthetics
• Speed lines
• Zebra patterns (if that's your thing)
• Loading/processing effects

Variation 1 vs 2: Different stripe patterns and behaviors. Try both!

The vibe: Transitioning between dimensions

Cross Hatch

Creates a sketchy, hand-drawn crosshatch pattern. Instant artistic vibes.

What it does:

• Adds diagonal line hatching
• Makes stuff look sketched
• Artistic/illustration effect

Perfect for:

• Comic book themes
• Sketch/art style
• Cel-shaded looks
• Making screenshots look like drawings
• Unique visual style

The vibe: Your theme just got drawn by hand

Reveal Effects

These are PERFECT for transitions and dramatic reveals.

Reveal Left / Right / Top / Bottom

Directional reveals that wipe across the screen.

What they do:

• Gradual reveal from one direction
• Clean, professional transitions
• Customizable edge softness

Perfect for:

• Scene transitions
• Slide show effects
• Page turns
• Dramatic reveals
• Professional presentations

Which direction to pick:

• Left/Right: Most common, feels natural
• Top: Curtain falling effect
• Bottom: Rising up reveal

The vibe: Smooth and professional

Pro tip: Chain multiple reveals on different layers for complex transitions!

Geometric Effects

Circle Effect

Circular reveal or wipe. Like an iris transition in old movies.

What it does:

• Expands or contracts in a circle
• Clean geometric transition
• Center-focused reveal

Perfect for:

• Iris wipes (classic cinema!)
• Spotlight effects
• Zoom transitions
• Focus on center element
• Portal/tunnel effects

Settings:

• Radius (size of circle)
• Position (where it centers)
• Softness (hard edge vs soft fade)

The vibe: Silent film transition (but make it modern)

Light & Glow Effects

Rays Effect

Shoots light rays from a point. Dramatic and godly.

What it does:

• Radiating light beams
• Customizable ray count and spread
• Animated rotation

Perfect for:

• Divine light beams
• Dramatic emphasis
• Sun rays breaking through
• Power-up effects
• "Chosen one" moments
• Lens flare vibes

The vibe: Angelic choir sounds

Pro tip: Place behind text or logos for instant epicness!

Bloom

Adds a glow/bloom effect to bright areas. Everything gets dreamy and soft.

What it does:

• Makes bright parts glow
• Soft light spill
• Ethereal atmosphere

Perfect for:

• Neon signs
• Magic effects
• Lightsabers (if you're into that)
• Glowing UI elements
• Dreamy atmospheres

The vibe: Cyberpunk neon meets fantasy magic

Warning: Can make text harder to read. Use sparingly on UI text!

Color & Adjustment Effects

To Grayscale / To Color

Animated transition between color and black & white.

What they do:

• To Grayscale: Color → B&W transition
• To Color: B&W → Color transition

Perfect for:

• Flashback sequences
• Mood changes
• Focus shifts (gray out background, color foreground)
• Dramatic moments
• Wizard of Oz effect

The vibe: Time traveling between eras

Adjustment

Your all-in-one color correction tool. Brightness, contrast, saturation—the works.

What you can adjust:

• Brightness: Make it lighter or darker
• Contrast: Punch it up or flatten it
• Saturation: More color or less color
• Gamma: Mid-tone adjustments
• Red/Green/Blue: Individual channel tweaking

Perfect for:

• Color correction
• Mood adjustments
• Making things pop
• Matching visual styles
• Fixing washed-out images

The vibe: Photoshop, but for your theme

Pro tip: Animate from normal to high contrast for dramatic moments!

Color Replace

Swaps one color for another. Color magic!

What it does:

• Finds a specific color
• Replaces it with a different color
• Adjustable tolerance

Perfect for:

• Team color swaps
• Palette changes
• Fixing "almost right" colors
• Creating variants of same design

The vibe: Paint bucket tool on steroids

Blur Effects

Gauss (Gaussian Blur)

High-quality blur effect. The premium blur experience.

What it does:

• Smooth, professional blur
• Better quality than basic blur
• More control over blur quality

Perfect for:

• Backgrounds
• Depth of field
• Focus effects
• Soft atmospheres

The vibe: Cinematic quality blur

When to use this vs regular Blur: Use Gauss when quality matters. Use basic Blur for simple effects.

Edge & Outline Effects

Outline

Adds an outline around your layer. Instant graphic novel vibes.

What it does:

• Draws outline around edges
• Customizable thickness and color
• Inner or outer outline

Perfect for:

• Comic book style
• Making text readable over busy backgrounds
• Cel-shaded looks
• Stickers effect
• Graphic design pop

The vibe: Cartoon network / comic book

Pro tip: White or black outlines work with almost any image!

Bevel

Adds 3D beveled edges. Makes flat things look raised or pressed.

What it does:

• Creates highlight and shadow on edges
• 3D embossed effect
• Customizable depth and angle

Perfect for:

• Buttons that look clickable
• Embossed logos
• Raised text
• 3D-ish effects without actual 3D

The vibe: Windows 95 buttons (but make it stylish)

Special Style Effects

ASCII

Converts your image to ASCII art. Yes, really.

What it does:

• Replaces pixels with text characters
• Creates ASCII art effect
• Adjustable character set and size

Perfect for:

• Hacker themes
• Matrix aesthetics
• Terminal/DOS vibes
• Retro computing
• "I'm in" memes

The vibe: You just hacked the mainframe

Pro tip: Works GREAT with high contrast images!

Swipe Effects

Swipe Effect

Customizable swipe/wipe transitions.

What it does:

• Wipes across the screen
• Adjustable direction and pattern
• Smooth transitions

Perfect for:

• Scene changes
• Slide transitions
• Dynamic reveals

The vibe: PowerPoint, but actually cool

Combining Advanced Effects

This is where things get WILD. Stack these bad boys:

Cyberpunk Dream

Bloom + RGB Split (from filters) + Adjustment (high contrast)

Neon-soaked future achieved

Comic Book Page

Outline + Cross Hatch + Adjustment (high contrast)

Panels and speech bubbles not included

Divine Moment

Rays + Bloom + To Color

Biblical levels of drama

Hacker Vision

ASCII + To Grayscale + slight Pixelate

We're in

Retro Film

Old Film (filter) + Gauss (subtle) + Adjustment (low saturation)

Found footage authenticity

Animation Ideas

Dramatic Entrance

1. Start with Circle Effect (small)
2. Expand circle while adding Rays Effect
3. Finish with Bloom Like a superhero landing!

Style Transition

1. Grayscale → To Color
2. Add Outline halfway through
3. Finish with Bloom Comic book comes to life

Glitch Sequence

1. RGB Split pulse (filter)
2. Quick Stripe Effect
3. Ripple at end Digital corruption complete

Performance Reality Check

Advanced effects are POWERFUL, but they're also more resource-intensive. Here's the deal:

Light effects (use freely):

• Outline
• Bevel
• Color Replace
• Simple reveals

Medium effects (use thoughtfully):

• Adjustment
• Rays
• Circle Effect
• To Color/Grayscale

Heavy effects (use sparingly):

• Ripple
• Flag Effect
• ASCII
• Complex combinations
• Multiple shaders on one layer

Golden rule: 2-3 advanced effects total is usually plenty. More than that and you risk slow playback.

When to Use Advanced Effects

Perfect for:

• Unique visual styles
• Specific theme aesthetics
• Dramatic moments
• Scene transitions
• Standing out from the crowd

Maybe skip when:

• Going for minimalist/clean design
• Already have tons of filters
• Targeting older hardware
• Performance is critical

Shader Settings Deep Dive

Most shaders have adjustable parameters:

Speed/Rate: How fast the effect animates Intensity: How strong the effect is Scale: Physical size of the effect Position: Where it's centered Color: For effects with color options

Don't be afraid to crank these settings to 11 and see what happens. You can always dial it back!

The "Signature Effect" Strategy

Pick ONE advanced effect and make it YOUR THING for a theme. Like:

• A theme entirely built around Flag Effect for sailing theme
• ASCII effect for hacker/terminal theme
• Rays everywhere for divine/epic theme
• Ripple on every transition for water theme

Consistency creates professional-looking results.

Quick Effect Reference

Effect	Best For	Complexity	Wow Factor
Flag	Movement	Medium	High
Ripple	Impacts	High	Very High
Rays	Drama	Medium	High
Bloom	Atmosphere	Low	Medium
Reveals	Transitions	Low	Medium
ASCII	Style	Medium	Very High
Outline	Polish	Low	Medium
Cross Hatch	Artistic	Medium	High
Circle	Transitions	Low	Medium

Advanced Effect Philosophy

These effects exist for when basic animations and filters aren't enough. They're the hot sauce of theme design—a little goes a long way, but sometimes you want to drown your entire plate in it. Both approaches can work!

The key is intentionality. Use shaders because they serve your theme's vision, not just because they're cool (though being cool is a valid reason too).

Shader Parameters Reference

Each shader has configurable parameters exposed in the Properties panel. Here's the complete reference:

Flag Effect Parameters

Access: Properties → Flag Effect settings

Parameter	Range	Default	Description
Speed	0.0 - 5.0	1.0	Wave animation speed
Frequency Y	0.0 - 20.0	5.0	Vertical wave count
Frequency X	0.0 - 20.0	2.0	Horizontal wave count
Amplitude Y	0.0 - 100.0	30.0	Vertical wave height
Amplitude X	0.0 - 100.0	10.0	Horizontal wave depth
Inclination	-100.0 - 100.0	0.0	Diagonal tilt

What each parameter does:

• Speed: Higher = faster rippling
• Frequency Y/X: More waves across surface
• Amplitude Y/X: Bigger wave displacement
• Inclination: Makes flag appear windblown

Quick presets:

• Gentle breeze: Speed 0.5, Amp 15/5
• Strong wind: Speed 2.0, Amp 50/20
• Hurricane: Speed 4.0, Amp 80/40

Ripple Parameters

Access: Properties → Ripple settings

Parameter	Range	Default	Description
Speed	0.0 - 5.0	1.0	Ripple animation speed

Note: Ripple center is fixed at image center. Speed controls how fast waves emanate outward.

Use cases:

• Slow (0.5): Gentle water ripple
• Medium (1.0): Standard impact effect
• Fast (3.0): Energy burst

Bloom Parameters

Access: Properties → Bloom settings

Parameter	Range	Default	Description
Strength	0.0 - 3.0	1.0	Glow intensity
Blur	0 - 20	5	Glow spread
Quality	1 - 10	4	Render quality
Threshold	0.0 - 1.0	0.5	Brightness trigger

What each parameter does:

• Strength: How bright the glow
• Blur: How far glow extends
• Quality: Higher = smoother but slower
• Threshold: Only pixels brighter than this glow

Optimization tip: Lower quality for better performance.

Gaussian Blur Parameters

Access: Properties → Gauss settings

Parameter	Range	Default	Description
Strength	0 - 20	5	Blur amount
Quality	1 - 10	4	Blur quality
Resolution	0.1 - 1.0	1.0	Render resolution

Performance vs Quality:

• Low quality (2-3): Fast, acceptable for backgrounds
• Medium quality (4-5): Balanced
• High quality (8-10): Slow, best for hero elements

Adjustment Parameters

Access: Properties → Adjustment settings

Parameter	Range	Default	Description
Brightness	-1.0 - 1.0	0.0	Lighter/darker
Contrast	-1.0 - 1.0	0.0	Difference boost
Saturation	-1.0 - 1.0	0.0	Color intensity
Gamma	0.1 - 3.0	1.0	Mid-tone adjustment
Red	-1.0 - 1.0	0.0	Red channel
Green	-1.0 - 1.0	0.0	Green channel
Blue	-1.0 - 1.0	0.0	Blue channel

Common adjustments:

• Brighten: Brightness +0.2
• More pop: Contrast +0.3, Saturation +0.2
• Desaturate: Saturation -0.5
• Warm tone: Red +0.1, Blue -0.1
• Cool tone: Red -0.1, Blue +0.1

Color Replace Parameters

Access: Properties → Color Replace settings

Parameter	Type	Default	Description
Original Color	Color Picker	#FF0000	Color to find
New Color	Color Picker	#00FF00	Replacement color
Tolerance	0.0 - 1.0	0.4	Match flexibility

How tolerance works:

• Low (0.1): Only exact color matches
• Medium (0.4): Similar shades match
• High (0.8): Broad color range matches

Use cases:

• Team color swaps
• Palette adjustments
• Quick recoloring

Outline Parameters

Access: Properties → Outline settings

Parameter	Type	Default	Description
Thickness	0 - 20	2	Outline width
Color	Color Picker	#000000	Outline color

Common setups:

• Black outline (default): Thickness 2-3
• White outline (snow/glow): Thickness 1-2
• Thick cartoon: Thickness 5-8
• Subtle edge: Thickness 1

Bevel Parameters

Access: Properties → Bevel settings

Parameter	Range	Default	Description
Light X	-1.0 - 1.0	-0.5	Light source X
Light Y	-1.0 - 1.0	-0.5	Light source Y
Thickness	0 - 10	3	Bevel depth
Angle	0 - 360	45	Light angle

Light positioning:

• Top-left: X: -0.5, Y: -0.5
• Top-right: X: 0.5, Y: -0.5
• Bottom-left: X: -0.5, Y: 0.5
• Bottom-right: X: 0.5, Y: 0.5

ASCII Parameters

Access: Properties → ASCII settings

Parameter	Range	Default	Description
Size	2 - 20	8	Character size

Character size guide:

• Small (2-4): Dense, detailed
• Medium (6-10): Balanced readability
• Large (12-20): Bold, blocky

Works best with:

• High contrast images
• Simple shapes
• Monochrome sources

Cross Hatch Parameters

Access: Properties → Cross Hatch settings

Parameter	Range	Default	Description
Line Spacing	1 - 20	5	Gap between lines
Line Thickness	0.5 - 5.0	1.0	Line width

Artistic styles:

• Fine sketch: Spacing 3, Thickness 0.5
• Standard: Spacing 5, Thickness 1.0
• Bold ink: Spacing 8, Thickness 2.0

To Grayscale / To Color Parameters

Access: Properties → To Grayscale / To Color settings

Parameter	Range	Default	Description
Progress	0.0 - 1.0	0.0	Transition amount
Apply Fade In	Boolean	False	Fade opacity too

Progress animation:

• 0.0: Full color (To Grayscale) / Full gray (To Color)
• 0.5: 50% transition
• 1.0: Full gray (To Grayscale) / Full color (To Color)

Fade In option:

• Disabled: Only affects color
• Enabled: Fades in as color changes

Effect Shader Parameters (Pixelate, Blur, Stripes, etc.)

Access: Properties → Effect shader settings

Common parameters across all effects:

Parameter	Range	Default	Description
Progress	0.0 - 1.0	0.0	Effect strength
Apply Fade In	Boolean	False	Fade opacity

Effect-specific behaviors:

Pixelate:

• Progress 0.0: Normal image
• Progress 1.0: Maximum pixelation (25 pixels)

Flag (shader version):

• Progress controls wave intensity
• Animated version of transform Flag

Stripes / Stripes2:

• Progress controls stripe reveal
• Use for wipe transitions

Blur:

• Progress controls blur amount
• Dynamic blur effect

Circle:

• Progress controls circle expansion
• Iris wipe effect

Rays:

• Progress controls ray reveal
• 10 rays emanate from center

Swipe:

• Progress controls swipe direction
• Circular wipe pattern

Reveal Left/Right/Top/Bottom:

• Progress controls reveal direction
• Clean directional reveals

Shader Combination Matrix

What works well together:

Base Effect	+ Second Effect	Result
Bloom	Adjustment (high contrast)	Cyberpunk neon
Outline	Cross Hatch	Comic book
ASCII	To Grayscale	Terminal aesthetic
Rays	Bloom	Divine glow
Flag	Adjustment (low sat)	Old cloth
Ripple	Bloom	Energy wave
To Grayscale	Outline	Film noir

What to avoid:

Bad Combo	Why
Multiple blurs	Too slow, muddy
ASCII + Cross Hatch	Visual conflict
Too many color effects	Confusing colors
3+ heavy shaders	Performance death

Shader Performance Guide

GPU Cost (Low to High):

1. Lightweight (use freely):

   • To Color / To Grayscale
   • Color Replace
   • Outline
   • Bevel

2. Medium (use thoughtfully):

   • Adjustment
   • Reveal effects
   • Circle/Rays
   • Stripes

3. Heavy (use sparingly):

   • Bloom
   • Gaussian Blur
   • Ripple
   • Flag Effect

4. Very Heavy (one at a time):

   • ASCII
   • Cross Hatch
   • Multiple shaders on one layer

Optimization strategies:

• Use lower quality settings
• Apply heavy shaders to small layers
• Limit heavy shaders to 1-2 per theme
• Test on target hardware

Animating Shader Parameters

Most shader parameters can be animated!

Example: Animated bloom intensity

1. Add Bloom shader to layer
2. Add "Shader Properties" animation
3. Animate Strength parameter 0.5 → 2.0
4. Duration: 1 second
5. Loop: Yes
6. Result: Pulsing glow!

Example: Ripple on trigger

1. Add Ripple shader
2. Animate Speed 0.0 → 2.0 → 0.0
3. Duration: 2 seconds
4. Trigger on game selection
5. Result: Impact ripple effect

Example: Color shift

1. Add Adjustment shader
2. Animate Red channel -0.5 → +0.5
3. Animate Blue channel +0.5 → -0.5
4. Duration: 3 seconds
5. Loop: Yoyo
6. Result: Warm/cool color shift

Shader Tips & Tricks

Discovery mode:

• Add shader with default settings
• Preview (Spacebar)
• Adjust one parameter at a time
• Note what looks good
• Build your personal presets

Save your favorites:

• Screenshot Properties panel with good settings
• Note them in a document
• Build a personal shader preset library
• Reuse across projects

Test early:

• Add shaders to test layer first
• Verify performance acceptable
• Then apply to real theme layers
• Saves time vs fixing later

Less is more:

• One great shader > three mediocre shaders
• Consider removing effects if theme feels cluttered
• Let your design breathe

Next Steps

You've now got the full animation arsenal at your disposal. Time to learn how to orchestrate it all:

• Animation Timeline - Conducting your animation symphony
• Best Practices - Making it all work together
• Interface Overview - Master the tools

---

Mad Scientist Time: Create a "shader playground" project. One layer. Try EVERY shader. Combine them. Break stuff. Save nothing. This is pure experimentation. Go wild! 🧪✨