Studio

FolioTier 2

@sprite-grow

Scale a sprite in from a speck up to full size, settling on a motion curve - entrance reveal.

Use @sprite-grow to reveal a sprite by scaling it up from a near-invisible point to its full display size. It is the go-to entrance effect when you want a character or object to feel like it is materializing or bursting onto the stage rather than simply appearing. The effect reads especially well for dramatic introductions, summoned creatures, or any moment where the arrival of a sprite should feel kinetic.

Call it immediately after showing the sprite. The sprite needs to be on screen first so the engine has something to scale, then @sprite-grow handles the reveal.

The curve you choose shapes the personality of the landing, not the speed. Overshoot plants the sprite with a satisfying snap that slightly overshoots full size before settling back, which is why it is the default. Elastic carries that further with a springy ring-out. If your scene calls for something more restrained, decel slows as it arrives and reads as graceful rather than punchy.

Raising from_scale changes the character of the effect entirely. Near zero the sprite appears to grow from nothing; push it toward 0.9 and you get a quick pop-in from nearly full size, which suits UI elements or objects that need to feel close rather than distant.

Set wait to false when you want to layer this effect with another one on the same beat, such as growing and shaking a sprite simultaneously, or when you want dialogue to begin while the animation is still playing. Leave it at the default true when the arrival should feel complete before the scene continues.

Parameters

ParameterKindRequiredDefaultNotes
targetstringyes""Sprite tag to target.
curvestringnoovershootOne of: linear, slide, accel, decel, overshoot, bounce, elastic. Default overshoot.
durationnumberno0.60.05-3 seconds. Default 0.6.
from_scalenumberno0.050-0.9 × multiplier. Default 0.05.
waitbooleannotrueBlock for the effect's duration when true; false fires and continues so effects can overlap.

Canonical example

sprite show ada
say "Ada": "Ta-da!"
@sprite-grow(0.6, target=ada, curve=overshoot)

@sprite-grow snaps a sprite to from_scale of its resting size (a near-invisible speck at the default 0.05) and grows it back to full over duration, settling on the chosen curve. The sprite ends at the scale it started the beat at, so a grow on an already-placed sprite is a mid-scene reveal, not a permanent resize.

Curves - how it settles

curve reuses the same vocabulary as sprite move … with <curve>:

  • decel / slide - grow and ease cleanly to a stop, no bounce.
  • overshoot (the default) - grow slightly past full size, then snap back.
  • bounce - grow past and bounce down to rest.
  • elastic - springs past and wobbles into place.
  • linear / accel - mechanical / "materializing" feels.

Entrance vs. mid-scene

To grow a sprite in as it appears, author the entrance directly on the sprite show instead: sprite show ada entrance(grow, duration=0.6). That mounts the sprite already growing (no flash of the full-size sprite first) and is mutually exclusive with a with fade. Reach for the standalone @sprite-grow when the sprite is already on stage and you want to re-reveal it for emphasis.

Notes

@sprite-grow is a Pixi-renderer effect that rides the sprite's outer scale (like @sprite-pop), so the idle-motion pass yields to it while it runs. Under prefers-reduced-motion the grow is skipped - the sprite simply appears at full size.

See also