Decoration: light bursts, sparkles, confetti, ribbons and more
Light bursts, sparkles, confetti, coin showers, bubbles, snow, starfields, shine sweeps, rings, sunbursts, auras, spotlights, speed lines, dividers, ribbons and seals.
Decorations are pure looks that sit behind or around the rest of your UI: light, sparkles, confetti, rings, ribbons and seals. You find them in the library under Decoration. Search for "decoration" to see them all.
What's there
Decoration · Good for
Light Burst · Glowing rays behind a reward, a level-up badge or a title Sparkle Field · Little sparkles twinkling over a prize or a panel Confetti Burst · Confetti bursting out and fluttering down when the player wins Coin Shower · Coins (or gems) raining down and flipping Floating Bubbles · Bubbles rising and swaying, for water levels Rising Embers · Glowing embers drifting up, for fire and lava scenes Snowfall · Snowflakes falling softly Starfield · Stars drifting past in layers, for space backgrounds Shine Sweep · A glint sweeping across a button, card or logo Pulse Rings · Rings spreading out like ripples, to say "tap here" Glowing Orb · A bright orb with a soft glow and a turning halo Sunburst Stripes · Turning stripes behind a prize or a hero Fire Aura / Energy Aura · Flames or a crackling energy field round a character or an icon Vignette / Spotlight · Dark edges so the middle stands out, or a soft (moving) spot of light Speed Lines · Anime lines rushing to the centre, or streaks flying past Ornament Divider · A fancy line with a gem in the middle, between sections Ribbon Banner · A title ribbon with folded tails: Victory!, New!, Level Up! Badge Seal · A zig-zag seal for "Best Value", "-50%" or "New"
Every one of them has Opacity and Blend: Light (adds up) makes it brighten whatever is behind it, like real light; Normal paints over it.
Light Burst
Glowing rays round a bright core: the "you won!" shine behind a reward, a level-up badge or a title.
In Properties:
- Rays: how many rays, how wide (Ray Width), how soft their edges are (Soft Edges) and how long they stay bright (Bright Length).
- Colours: One colour, a Gradient from the centre to the edge, or a Rainbow (Rainbow Start turns the colours).
- Core: the bright centre's size, colour and brightness.
- Animation: Spin Speed (negative turns the other way), Pulse (grows and shrinks), Pulse Time and Twinkle (flickers).
Tip: Put a Light Burst behind a reward icon, add a Zoom In animation to both, and you have a reward reveal without any code.
Sparkles, confetti, coins, bubbles, embers, snow and stars
These are all the same kind of decoration with other settings, so you can turn one into another:
- Shape: sparkle, star, dot, square, confetti strip, coin, gem, heart, bubble, snowflake or diamond.
- Motion: Twinkle in place, Fall, Rise, Drift sideways or Burst from the centre.
- How Many, Smallest and Biggest, and Depth: far pieces are smaller, slower and dimmer, for a 3D feel.
- Colours: one colour, three colours (each piece picks one) or a rainbow; Glow puts a soft light round every piece.
- Speed, Spin, Sway, Flip (turns like a spinning coin) and Twinkle.
- Bursts: Gravity, Spread (360° = all ways, less = a fountain going up), Burst Every and Play once when shown.
- Pattern: try another number for a different scatter of pieces.
Tip: For confetti when the player wins, turn on Play once when shown and hide the decoration. A Show action (on the win) plays the burst once, every time.
Shine, rings, sunburst, auras and light
- Shine Sweep: the colour, Strength, Band Width, Soft Edges and Angle of the glint; Sweep Time and Pause Between. Place it on top of a button, the same size.
- Pulse Rings / Glowing Orb: Style picks ripples or an orb. Ripples have a number of rings, a start and end size and an optional fill; the orb has its centre colour, glow, a halo ring (solid or dashed) that turns and a gentle breathing.
- Sunburst Stripes: how many stripes, two colours (make the second one clear for rays only), Fade Out towards the edges, Spin, where the centre is and a glow in the middle.
- Fire Aura / Energy Aura: base and tip colours, how many flames, how long, the inner glow, Flicker, Speed and Rise Upwards (flames lean up like real fire). Put it behind the thing it surrounds.
- Vignette / Spotlight: Mode (dark round the edges, or a spot of light), colour, strength, size, soft edge and centre. Motion can sweep it side to side, pulse it or let it wander.
- Speed Lines: lines rushing to a centre (with a clear area in the middle, changing several times a second) or streaks flying sideways.
Dividers, ribbons and seals
- Ornament Divider: the line's colour and thickness, faded ends, a double line, end caps (dots or diamonds) and the ornament in the middle (diamond, two diamonds, star or circle).
- Ribbon Banner: type the Text, choose its font, colour and outline. The band has a top and bottom colour, a height, a shine and an outline; the Tails can be notched, pointed, straight or left out, with their own width and colours.
- Badge Seal: two lines of text, the seal's colours, how many points and how deep, a (dashed) ring inside and optional ribbon Tails. Spin The Edge slowly turns the zig-zag.
Make your own
Anything you design can be a decoration: a glowing circle, a frame of leaves, a banner. Keep it free of buttons the player has to press. Admins can add decorations to the library in the Decoration category (see the component guidelines in the admin panel). Your own decorations go to Unity as pictures; the built-in ones are drawn natively.
In Unity
The Light Burst is drawn by a shader, so its animation costs nothing on the CPU. All the other decorations are drawn as one mesh per decoration from the same maths as the web, so they look and move the same; Light (adds up) uses an additive shader. The clock starts when the element is shown, so Play once when shown plays again whenever it's shown. In UI Toolkit they are drawn the same way but always blend normally.