Motion recordK–INSP–016 · Inspiration
xAI Imagine Swipe Stack
A four-card image stack whose top frame can be thrown in either direction, returned by a spring, or advanced automatically with a quieter fade.
View studyBack to Explore SwingCat
K–INSP–026 · Inspiration · Animation
SwingCat
Pendulum Cat
A patched cat that sits under a swinging pendulum, leaps up to catch the ball when the pointer arrives, rides the swing with its tail swaying, and on a click lets go — eyes wide, mouth open — and drops out of sight before sitting back down.
- Authorship
- Third-party inspiration
- Techniques
- Cosine pendulum · Rod-attached character · Hover-to-jump, click-to-fall · State-machine phases · Web Animations drop
- Creator
- SynCraft
- Observed method
- Rive state machine (sit, jump, swing, fall) on a canvas scaled 2.4× / requestAnimationFrame cosine pendulum carrying the cat at 1.3 rod lengths / pointerenter and click triggers gated by (hover: hover) and (pointer: fine) / element.animate() for the 150px drop
Recreation / Live
Cats that swing.
Cats that fall.
Move a mouse over the scene and the cat leaps for the ball; click while it swings and it lets go. On a touch screen, tap once to jump and again to fall. The buttons do the same from a keyboard.
The cat is sitting.
Pendulum, styles and phase script from the supplied archive · cat traced to SVG from the source's Rive animation, 114 frames · buttons, status, off-screen stop and reduced-motion still added
Observed system / 03
A cat, a rod,
and one way to lose it.
These diagrams separate the pendulum that carries the cat, the state machine inside it, and the delay before it falls.
Why it is here
Two systems,
one cat.
The work is split cleanly. Rive owns how the cat looks — sitting, gathering itself, stretching up, hanging, startled, falling — and the page's own script owns where it is. The script never asks Rive what pose the cat is in; it listens for the state changes Rive reports and moves the element accordingly: at the seat, on the rod, or dropping away.
The jump is entirely Rive's. While it plays, the page leaves the cat at its seat; the animation itself carries the cat up its own artboard until its paws meet the ball. The moment the swing state begins, the page hands the cat to the rod. The fall is the reverse: the page holds on for 600 milliseconds so the surprise can register, then animates the element down while the animation drops the cat out of its frame.
Input is sorted by what the device can do. With a mouse, arriving over the scene is enough to start the jump and a click ends it. On touch there is no arrival, so the first tap jumps and the second lets go. Both paths ignore input that does not fit the current state.
A focus timer's pitch is that time spent concentrating becomes something you keep; this hero acts it out before a word is read. The cat waits until you arrive, leaps on its own, and only falls if you click — so the one thing the visitor can do to it is interrupt it, which is exactly what the app asks them not to do.
- Origin
- SwingCat landing page hero, beside the headline “Cats that swing. Cats that fall. Cats that stay.”
- Creator
- SynCraft
- Source evidence
- User-supplied Safari web archive of syncraft.dev/swingcat/en/, including the hero markup, inline styles and script, and the pendulum SVG. The Rive file the script loads was not in the archive; its four animations, frame counts, state machine and triggers were read on the live page on October 18, 2026, where the runtime resolved to @rive-app/canvas 2.45.0
- Observed animation
- One 1024-unit artboard with four 60fps animations: sit, 480 frames looping; jump, 300 frames with a work area ending at 275, played once; swing, 240 frames looping; fall, 240 frames played once. The state machine takes jumpTrigger, fallTrigger and cancelTrigger; in use, the jump plays at about 2.5 times speed and hands over to the swing after 1.83 seconds, and the fall returns to sitting after 4 seconds
- Observed script
- A cosine pendulum of ±20° over 4,000ms from the frame time; the cat hung at 0.82 + 0.48 pendulum widths and rotated with the rod; a seated height of min(scene height − 112, 0.82 widths + 86) adjusted by two custom properties; hover-to-jump and click-to-fall where (hover: hover) and (pointer: fine) match, tap-to-jump then tap-to-fall otherwise; a 600ms hold, then a 1.9-second, 150px drop on cubic-bezier(.24,.68,.3,1)
- Kaki treatment
- Recreation of the SwingCat landing-page hero at the owner's direction. Quoted verbatim from the archived page: the pendulum artwork (swincat_furiko_lp.svg), the scene and pendulum CSS with their custom properties and narrow-screen values, and the phase script — a cosine pendulum of ±20° over 4 seconds, the cat carried at 0.82 + 0.48 pendulum widths and rotated with the rod, the seated position, hover-to-jump and click-to-fall on fine pointers and tap-to-jump-then-fall on touch, the 600ms hold before letting go and the 1.9-second, 150px drop on cubic-bezier(.24,.68,.3,1). The cat itself is played by Rive on the source; Kaki ships no Rive runtime, so the cat is the source animation traced to SVG — 114 frames across its sit, jump, swing and fall animations, in its own five colours — and played by a small stand-in for its state machine on the measured timings: an 8-second seated loop, a jump played at 2.5× that hands over to the swing after 1.83 seconds, a 4-second swing loop, and a 4-second fall that returns to sitting. Frame rates are 4 a second seated, 8 swinging and 12 jumping and falling, against the source's continuous playback. Jump and Let go buttons, a polite status, an off-screen stop, a still scene under reduced motion, and a homepage preview that runs the sequence on its own are Kaki additions; the page's 20px offset beside its headline is dropped. The state machine's unused cancel trigger is not recreated.
- Accessibility addition
- The source scene responds only to pointer input and keeps moving under reduced motion. Kaki adds Jump and Let go buttons with disabled states that follow the cat, a polite status line, a stop when the scene is off screen, and under reduced motion a still pendulum with poses that change without animation. The homepage preview is non-interactive and removed from the tab order.
- Stated limit
- The source plays its cat continuously at the display's frame rate through Rive, with blended transitions. Kaki plays traced frames at 4 to 12 a second and switches states without blending, so motion is visibly steppier, and the unused cancel trigger is not recreated.
- Rights boundary
- No redistribution license identified. Kaki quotes the source artwork, styles and script for study under its attributed one-to-one recreation default, traces the cat from the source animation, and will remove or replace them on a takedown request from SynCraft.
- Reviewed
- October 18, 2026