pro
Valerio Donfrancesco
Senior UX/UI Designer for SaaS & Web Apps
- 6
- Followers
No Effort Rentals: a direct booking platform, end to end
1
1
Launch Heroes: four interactive SVGator launch templates
Four interactive launch announcements built in SVGator: hold a button, tear a box open, flip an event pass, deal a deck of cards. Each hero is one SVGator timeline split into named segments, and a small script maps the gesture to it through the SVGator Player API: holding plays the charge and letting go winds it back, dragging scrubs the tear, the pointer picks the tilt of the pass, each click throws a card.
Each one is a template: every text, image and brand colour is a named layer. The second brand (Harbor) of each hero was made by editing 31 to 37 layers by name through the SVGator MCP, in under three minutes per hero.
Play them: https://valeriodonfrancesco.pro/work/launch-heroes.html
0
36
Departures: split-flap boards for any small business
Departures is a family of split-flap boards for the screen of any small business: price lists for bars, cafés and shops, schedules for gyms and cinemas, queue boards for barbers and pharmacies, and a welcome board for holiday rentals. Every row is live text in a monospaced font whose letter spacing matches the flap grid, so whatever you type, each letter lands in its own flap, and two pages flip into each other every 12 seconds. Best for menu boards, class and showtime screens, now-serving displays and guest TVs, edited in SVGator or by chat through the SVGator MCP.
Departures turns the TV behind the counter into an Italian station board. Rows of flaps turn through the letters, an amber dot-matrix ticker scrolls the news of the day, a live dot breathes next to the board title, and every 12 seconds the board flips to its second page.
Three templates, one mechanic:
- List board (name · price · status): bar menu, cocktail list, greengrocer price list, holiday-rental welcome screen.
- Schedule board (time · class or film · room · status): gym classes, cinema showtimes, event agendas.
- Queue board (ticket · client or service · desk · wait): barbers, pharmacies, delis. Here the flip is the queue moving on.
Why it is a template and not a one-off: each row is one live text layer per column, set in Chivo Mono (open source) with a letter spacing equal to the flap pitch. Type CAPPUCCINO, PILATES REFORM or A043 and every character falls into its own flap; right-aligned columns keep 1.20 and 10.00 lined up. The flap strips are locked layers, so people only touch what they need: the texts on page-a and page-b, the column labels, the board title, the ticker message (one text layer, up to 140 characters, it scrolls by itself), logo, qr-code and two brand-color layers (info-tab, live-dot). A "how to make it yours" note sits next to the canvas in the editor, outside the artboard, so it never shows up in exports.
The motion: when the board updates, a wave of flaps runs column by column and row by row (105 ms between rows). The flaps are half tiles that rotate on their hinge twice, and the text changes in the instant they cover it, so you see half letters mid-flip like on a real board. Then the statuses blink three times and the board settles.
Sound: SVGator exports carry no audio, so I built a small TV player for the boards. It listens to the board through the SVGator Player API and plays an alert each time it flips: a soft bell, a ding-dong, a chime, your own sound file or nothing, with a volume control and a choice between every update and the first one only. The same panel lets a shop owner retype the ticker message and point the QR code to their own link: the player swaps both on the board, no editor needed. Try it on any screen: https://valeriodon.github.io/departures-player/
Proof: the video opens on eight businesses flipping at once, then walks through a bar, a greengrocer, a gym, a cinema, a barber, a pharmacy and a holiday rental. Five of those eight boards were made from the three templates by a script that edits layers by name through the SVGator MCP (52 to 65 edits each, three to five minutes per board). The last scene is a chat message to the holiday-rental board, "New guests tomorrow: the Müller family. Check-out is Sunday at 11:00.", applied in 3 edits and visible at the next flip.
Best use of MCP: the templates were generated through the SVGator MCP (about 130 layers and 800 keyframes each, kept light so the editor stays fast), and because every text is a named layer, an assistant can keep a board up to date for someone who will never open an animation tool: sold-out items, today's prices, tonight's showtimes, the next guest's name, the line on the ticker.
All artwork is mine: the eight businesses, their logos and the QR placeholders are fictional and made for this template.
SVGator project (public, view only): https://app.svgator.com/editor#/2298b9724f0645a0a9cdab5ba6322226
TV player with alert sound, ticker and QR fields: https://valeriodon.github.io/departures-player/
5
4
391
UNLIT: The House Wakes
The house of Corvin Ashgrave has more than one room, and now it knows you are inside.
UNLIT: The House Wakes is the second chapter of UNLIT, a horror game that lives entirely inside one Rive file. You still carry a dying torch and you are still looking for the woman a demon took on the night of the storm. This time the search runs through three rooms, and each one plays by its own rules.
• The Parlor: eight relics in the dark, eyes that open in the doorway and the mirror, mimics that breathe and bite, a faceless walker that steals what you light.
• The Ballroom: the dead still waltz. When the music box starts, every relic you have not found changes place.
• The Bride's Chamber: Ashgrave's dead wife sleeps in her wedding dress. Keep the light off her face, or she wakes. And when your torch finds the cracked mirror, sometimes the girl you came for is behind the glass, hands against it, screaming for you to save her.
• From the second room on, the necromancer himself walks in, wrapped in a dark aura. When he comes your torch dies for ten seconds, and the voices in the dark come closer while you wait for the light.
Between the rooms, painted passages told inside Rive: the door opens, you walk the corridor with the torch, and the next room is waiting at the threshold, with its own narration.
The torch has a new weapon: every relic you find charges the flare, and the meter comes alive when it is ready. The relics you collect fall into a living portal at the bottom of the screen, a hole torn in space whose edge writhes with fat black tentacles, turning and swelling, with cold blue light leaking between them and quiet static.
How it is built (Rive CLI + GPU Canvas, both):
• Rive CLI: every room, passage and screen is RML written with Claude Code as my coding agent, generated from small Python scripts so the three rooms share one structure and each one keeps its own paintings, relics, hiding places and lairs. The room you are in is a single view model value; the slots, labels and art swap through data binding and converters.
• GPU Canvas: a WGSL shader decides what you are allowed to see (torch cone, fog inside the beam, grain, flare bloom, the possessed-screen glitch). The relic portal and the mirror are drawn by the Luau script every frame: rings of round-tipped tentacles built from smooth curves that turn in opposite directions, a void core, a blue haze and thin electric bolts; around the mirror, an irregular spectral glow that pulses and smoke that drifts across the girl's face.
• Scripting (Luau): one script directs all three rooms: the waltz that reshuffles the relics, the necromancer's blackout, the sleeping bride and her lunge, the apparition in the mirror, the flare charge, the passages and their sound cues on the same clock as the timeline.
• Data Binding + State Machines: the script writes view model values (room, flare charge, portal pulse, the necromancer's presence) and the markup reacts on its own.
• Still accessible: assist mode keeps the brighter torch, outlined relics, the sonar ping, captions for every voice and no strobing; the portal's static switches off in assist mode.
• Human touch (Rive Editor): the title screen is the one I designed by hand in the Rive Editor for the first chapter, carried into this one: dark grey letters with a blood red hidden inside them that only your torch can burn through, a soft halo, and a stuttering dying-bulb flicker keyed frame by frame. And every new piece of this chapter was art-directed by eye, round after round: the bride had to be her own creature, not a copy of the parlor's ghost; the girl in the mirror had to stay sharp behind drifting smoke, inside a glow that never holds its shape; the portal went from a plain box to a torn hole whose edge writhes with fat, round tentacles.
Assets: rooms, passages, relics, the bride, the girl and the necromancer were generated with AI image tools and art-directed into the same gothic storybook palette as the first chapter; the narration and the voice behind the mirror are Gemini text to speech; ambience, the music box and positional effects are synthesized in code.
Features used: Rive CLI, GPU Canvas (WGSL), Scripting (Luau), Data Binding, State Machines.
The first chapter, the single parlor: https://unlit-tqra9g.rive.to
0
128