Play Sakura Shrine in your browser · Cascade Lite (free): https://u3d.as/45jX · Cascade Pro: https://u3d.as/45jT
Sakura Shrine is a small 2D side-scroller I built to see whether Unity's UI Toolkit can carry a whole game interface: a HUD, scroll windows, an inventory, a shop, skills, a quest, character select, and a level-up moment that feels like a reward. It's a showcase for Cascade, my tween library for UI Toolkit (arrow keys, Z to attack, F1 for help).
Sakura Shrine is built with Cascade and is coming as a sample for it.
The style: an Edo shrine, not a computer window
I wanted the classic 2D MMO feel without copying anyone's art, so every window is a hand scroll: an indigo title band with a thin gold rule, washi paper, small gold corner brackets. Buttons are vermilion lacquer tags. The "+" on a stat is a tiny red seal. Labels are Japanese with English underneath. I designed every screen in Figma first, from components, and only then rebuilt them in UI Toolkit.
How much of it is Cascade
Almost everything that moves on screen is a Cascade tween: 104 Animate() chains, about 260 verbs. There is no Unity Animator, no USS transitions and no hand-written per-frame animation. Two things aren't Cascade: where the characters stand (that's the physics, which has to follow held keys every frame), and the drawings themselves.
Windows unroll from the title band down. Seals stamp in with a bounce and a tiny shake:
public static TweenSequence Stamp(VisualElement e, float from = 1.35f) => e.Animate().ScaleTo(1f, 0.28f).From(from).Spring(SpringPreset.Bouncy) .Then().NudgeX(2f, 0.04f).Then().NudgeX(-2f, 0.04f).Then().NudgeX(0f, 0.04f); 
One tween for the whole time of day
Press T and the shrine moves from morning to dusk to night. That's one Value tween. Every part of the scene reads the same number: the sky tint, the sun shafts, the lanterns, the fireflies and the moon.
_labelHost.Animate().Value(0f, 1f, 1.8f, v => Apply(Mathf.Lerp(from, to, v) % 3f)).Ease(Ease.InOutCubic); Going from night back to morning continues forward through a dawn instead of rewinding through dusk.
The samurai: drawings by AI, motion by Cascade
UI Toolkit has no sprite animator, so the character is two layers. The drawings are 88 frames (idle, walk, jump, attack, dash, climb, cheer). Cascade decides which frame shows: a looping Value tween steps the frame index.
_el.Animate().Value(0f, _frames.Length, _frames.Length / (fps * rate), Show).Ease(Ease.Linear).Loop(LoopMode.Restart); On top of the frames, Cascade adds the take-off stretch, the landing squash, the lunge, the dash lean, the hurt flash and the blink while you're invulnerable.
The frames took a few tries:
- A cut-out puppet (head, body, scarf, sword arm) from one illustration. The legs were one piece, so walking was a slide.
- Local video generation on my laptop. Green smears, colour blobs, 5 to 20 minutes per try. I deleted it.
- fal.ai, pay per clip (about $7 for the whole set): an image model redrew the samurai side-on, then an image-to-video model animated each move. A tracking shot gave a walk that stays centred; using the pose as the last frame too made the idle loop seamless.
- The backdrop bled into the clothes. A light grey background leaked into the cream hakama. A chroma-green backdrop with an exact key fixed it.
- The video model refused the hurt clips (the prompt described being hit). Getting hurt is a Cascade flash and recoil instead, and it reads better anyway.
Try it
Play Sakura Shrine in your browser. Cascade has a free Lite tier and a Pro tier on the Unity Asset Store:
- Lite (free): https://u3d.as/45jX
- Pro: https://u3d.as/45jT
- Docs: https://twitchedd.github.io/cascade/docs/
The music and ambience were generated with ElevenLabs on fal; the sound effects are Kenney's (CC0). Fonts are OFL (Shippori Mincho, Zen Old Mincho, Yuji Syuku, Dela Gothic One).
Originally posted on itch.io.
