Effects

12 min read

Add visual effects to enhance your designs. PinePaper includes 15 built-in effects ranging from particle systems to environmental simulations.

Available Effects

Sparkle

A glowing particle that follows the outline of your item, leaving a trail of sparkles.

Best for: Logos, highlighted text, magical themes

Property	Description	Default
Color	Sparkle/glow color	`#fbbf24` (gold)
Speed	Animation speed multiplier	`1.0`
Size	Particle radius	`2`

Blast

An explosion of particles from the center of an item. One-shot by default, or set an interval for repeating bursts.

Best for: Reveals, emphasis, celebrations

Property	Description	Default
Color	Particle color	`#ef4444` (red)
Radius	Explosion spread distance	`100`
Count	Number of particles	`20`
Interval	Repeat interval in seconds (0 = one-shot)	`0`
Repeat	Number of repeats (0 = one-shot only)	`0`

Fire

Organic flame shapes with gradient coloring, sinusoidal wave animation, and turbulence. Flames pre-warm automatically so there is no cold-start gap.

Best for: Torches, campfires, dramatic emphasis

Property	Description	Default
Color	Base color for auto-generated gradient	`#fbbf24`
Colors	Custom gradient stops array (overrides color)	yellow → orange → red
Count	Spawn rate	`12`
Speed	Spawn rate multiplier	`1.5`
Spread	Horizontal spawn spread	`0`
Size	Base flame size	`3`
Height	Max rise height (0 = auto from item bounds)	`0`
Particle Life	Flame lifetime in seconds	`1.5`
Turbulence	Wave amplitude multiplier	`1.0`
Max Particles	Max simultaneous flames	`30`

Smoke

Rising smoke or steam particles with sinusoidal horizontal drift. Pre-warms automatically for instant visibility.

Best for: Chimneys, steam, atmospheric haze

Property	Description	Default
Color	Smoke color	`#888888`
Count	Spawn rate	`15`
Speed	Spawn rate multiplier	`1.0`
Spread	Horizontal spawn spread	`0`
Size	Initial particle radius	`3`
Drift	Horizontal sinusoidal drift distance	`8`
Height	Max rise height (0 = auto)	`0`
Particle Life	Particle lifetime in seconds	`1.5`
Growth Rate	Scale growth as particle rises	`0.3`
Max Particles	Max simultaneous particles	`18`

Rain

Downward rain streaks with configurable wind angle and drop size.

Best for: Weather scenes, mood, environmental backgrounds

Property	Description	Default
Color	Raindrop color	`#93c5fd` (light blue)
Count	Spawn rate factor	`15`
Speed	Fall speed multiplier	`2.0`
Angle	Wind angle (affects horizontal drift)	`0`
Spread	Horizontal spawn spread factor	`1.0`
Size	Raindrop length and width multiplier	`1.0`

Snow

Slowly falling snowflakes with gentle horizontal drift and rotation.

Best for: Winter scenes, holiday themes, gentle atmosphere

Property	Description	Default
Color	Snowflake color	`#e2e8f0` (light gray)
Count	Spawn rate factor	`10`
Speed	Fall speed multiplier	`0.5`
Spread	Horizontal spawn spread factor	`1.5`
Particle Life	Flake lifetime in seconds	`4.0`

Confetti

Colorful tumbling rectangles with physics-based gravity. One-shot by default, or set an interval for repeating bursts.

Best for: Celebrations, achievements, party themes

Property	Description	Default
Colors	Array of confetti colors	red, yellow, green, blue, purple
Count	Particles per burst	`30`
Radius	Explosion speed range	`150`
Gravity	Downward acceleration	`200`
Size	Rectangle size	`6`
Spread	Spawn area spread	`0`
Offset X/Y	Center offset	`0`
Interval	Repeat interval in seconds (0 = one-shot)	`0`
Repeat	Number of repeats (0 = one-shot only)	`0`

Ripple

Expanding concentric circles that fade out from the item center.

Best for: Water drops, impact points, sonar/radar

Property	Description	Default
Color	Ring color	`#60a5fa` (light blue)
Speed	Expansion speed multiplier	`1.0`
Max Radius	Maximum ring size	`150`
Ring Count	Number of rings to spawn	`3`
Stroke Width	Ring line width	`2`

Glow

A pulsing aura behind the item that oscillates in scale.

Best for: Highlights, power-ups, attention-drawing

Property	Description	Default
Color	Glow color	`#fbbf24` (gold)
Speed	Pulse frequency multiplier	`1.0`
Intensity	Maximum opacity	`0.6`
Size	Scale oscillation range (1.0 → this value)	`1.5`

Electric

Flickering jagged lightning bolts around the item.

Best for: Energy, power, sci-fi themes

Property	Description	Default
Color	Bolt color	`#67e8f9` (cyan)
Speed	Flicker rate multiplier	`1.0`
Bolt Count	Number of simultaneous bolts	`3`
Length	Bolt length in pixels	`60`
Flicker Rate	Flicker frequency in Hz	`8`

Bubbles

Rising transparent bubbles with specular highlights and gentle horizontal wobble.

Best for: Underwater scenes, whimsical themes, drinks

Property	Description	Default
Color	Bubble rim color	`#93c5fd` (light blue)
Count	Spawn rate	`6`
Speed	Rise speed multiplier	`1.0`
Size	Bubble radius	`5`
Spread	Horizontal spawn spread	`1.0`

Dust

Floating dust motes that drift gently in the air with subtle motion.

Best for: Atmospheric scenes, aged/vintage looks, sunbeams

Property	Description	Default
Color	Dust color	`#d4c5a9` (warm beige)
Count	Number of motes	`15`
Speed	Drift speed multiplier	`1.0`
Size	Mote size	`2`
Spread	Area spread	`1.0`

Fireflies

Glowing dots that wander organically with smooth steering behavior.

Best for: Night scenes, magical forests, ambient backgrounds

Property	Description	Default
Color	Firefly glow color	`#fde68a` (warm yellow)
Count	Number of fireflies	`8`
Speed	Movement speed multiplier	`1.0`
Size	Glow radius	`4`

Shockwave

A single expanding ring that shoots outward from the item center. One-shot burst effect.

Best for: Impact moments, power-ups, dramatic reveals

Property	Description	Default
Color	Ring color	`#f97316` (orange)
Radius	Max expansion radius	`150`

Trail

A persistent path of particles that follow the item as it moves.

Best for: Moving objects, path visualization, comet tails

Property	Description	Default
Color	Trail color	`#fbbf24` (gold)
Speed	Fade speed	`1.0`
Size	Trail particle size	`3`

Shader Effects (silhouette-clipped)

A new family of GPU-rendered effects added in v0.5. Unlike particle effects, shader effects are continuous animated shaders composited against your item’s silhouette — think “fire-filled text” or “molten chrome on a logo.” Three types ship today:

Heatmap

A glowing thermal halo with animated turbulence. Reads as fire when filling text, and as a hot glow when haloing a shape.

Best for: Text titles, energy effects, attention emphasis

Property	Description	Default
Mode	Where the shader appears: Fill item / Halo around item / Overlay (blend on item)	Fill item
Intensity	Brightness multiplier (0–1.5)	`1.0`
Radius	Glow falloff distance (0.2–1.5)	`0.85`
Palette	Hot (red/yellow), Cool (blue/cyan), Violet	Hot
Halo padding	Bounds expansion for outside halo (0–1.5)	`0.4`
Offset X / Y	Shifts the shader pattern center within bounds (-1 to 1)	`0`
Tint	Color picker — biases the palette toward this color (white = no bias)	`#ffffff`

Liquid Metal

Reflective chrome flowing surface with banded streaks and specular highlights. Three metal palettes: Chrome, Gold, Copper.

Best for: Logos, premium-feel highlights, metallic typography

Gem Smoke

Soft volumetric smoke wreath with curling motion and internal sparkles. Three color palettes: White, Rose, Emerald.

Best for: Mystical atmosphere, dreamy backgrounds, magical reveals

Animation Channels

Each shader effect has two independent animation channels (A and B) driving distinct visual aspects. For Heatmap that’s Flow (background turbulence) + Shimmer (high-frequency detail). For Liquid Metal it’s Streaks (drift) + Bands (reflection oscillation). For Gem Smoke it’s Drift (curl direction) + Sparkle (internal accents).

Each channel exposes:

Speed — 0× freezes the channel, 1× = preset default, up to 5×
Curve — how raw time gets transformed:

Curve	What it does
Linear	Steady continuous flow (default — recommended for “Flow”-type channels)
Sine	Smooth pulse
Triangle	Sharp pulse
Pulse	On/off square wave
Ease	Slow → fast → slow
Sawtooth	Ramp + reset
Bounce	Decaying oscillation
Noise	Random walk

You can mix curves between A and B for layered motion — e.g., Heatmap with Flow on Linear and Shimmer on Pulse gives a steady glow with a strobing detail.

Stacking Shader Effects

You can apply more than one shader effect to a single item. Heatmap + Gem Smoke on the same image gives you a fiery halo with smoke wisps drifting through it. Each effect runs independently with its own params and channels. The Clear Effects button removes all of them at once.

Composite Modes

The Mode dropdown decides how the shader output blends with the item:

Fill item — shader appears only inside the item’s silhouette. Default for text and shapes.
Halo around item — shader appears only outside the item’s edge. Best for opaque shapes that want a glow.
Overlay (blend on item) — shader stylizes the item’s existing pixels via multiply blend. Default for images.

Applying Effects

Select an item with the Selection Tool (V)
In the Properties Panel, find Effects
Click Add Effect
Choose an effect type
Adjust settings as desired

Removing Effects

Select the item with the effect
In the Properties Panel, find the effect
Click the × button to remove it

Multiple Effects

You can apply multiple effects to the same item. They will all play simultaneously.

Effect Types

Category	Effects	Behavior
Continuous (particle)	Sparkle, Smoke, Fire, Rain, Snow, Ripple, Glow, Electric, Bubbles, Dust, Fireflies, Trail	Run until removed
One-Shot Burst	Blast, Confetti, Shockwave (without interval)	Play once and disappear
Repeating Burst	Blast, Confetti (with interval)	Re-trigger at set interval
Shader (silhouette-clipped)	Heatmap, Liquid Metal, Gem Smoke	Run until removed; multiple stack per item

Effect vs. Animation

Feature	Animation	Effect
What it does	Transforms the item (move, scale, rotate)	Adds visual elements around the item
Examples	Pulse, bounce, fade	Sparkle trail, particle explosion
Combine?	One per item	Multiple per item

Export Compatibility

Effect	MP4	GIF	SVG
Sparkle	✅	✅	⚠️ Static
Blast	✅	✅	❌
Fire	✅	✅	❌
Smoke	✅	✅	❌
Rain	✅	✅	❌
Snow	✅	✅	❌
Confetti	✅	✅	❌
Ripple	✅	✅	❌
Glow	✅	✅	⚠️ Static
Electric	✅	✅	❌
Heatmap (shader)	✅	✅	❌
Liquid Metal (shader)	✅	✅	❌
Gem Smoke (shader)	✅	✅	❌

SVG Limitations: Effects are frame-based particle systems and shader-rendered surfaces — neither maps cleanly to static SVG. For full effect animations, export as MP4 or GIF.

Tips

Effect Tips:

Sparkle effects work best on items with clear outlines
Fire and smoke pre-warm automatically — flames appear instantly with no startup delay
Use blast and confetti sparingly for impact moments
Rain and snow work best on larger items or full-canvas elements
Combine glow with blend modes for dramatic lighting
Match effect colors to your design palette

Shader Effect Tips:

For text, Fill item mode produces a “fire-text” / “smoky-text” look. For shapes, try Halo around item. For images, Overlay preserves the image while tinting it with the shader.
Stack multiple shader effects on one item: heatmap on Fill + gem_smoke on Halo around layers a glowing core under a smoky halo.
Use Offset X/Y to push the heatmap’s bright spot toward a corner instead of center — useful for asymmetric “hot edge” looks.
The Tint color picker biases the palette without losing structure. Keep it white for the preset’s natural look.
Channel curves let you mix steady flow with strobing detail. Try Heatmap with Flow=Linear and Shimmer=Pulse for a flickering candle effect.
Performance auto-tunes based on your device. On slower machines the editor will quietly drop resolution before frame rate; you can lock a quality tier via the developer console (PinePaper.itemAuraSystem.setQualityTier(N)).

Related: Animations | Blending | Masking