Work on rive now briefly pauses. we go on pen and paper to story board.
The way I storyboard rive animations is a bit different from aftereffects projects.
The way I storyboard rive animations is a bit different from aftereffects projects.
Third step. Pretty messy, but, I figure out the state machine interaction first. With it, common layer animations that stay the same across animations get decided (bouncing, secondary animations to the bouncing like bobbing etc)
Next, initial state, then the climax of the animation get decided (what will happen, what are some major elements that need to be animated, and what is the main action/story that all the animation should direct towards (through grids, direction, composition and movement etc)
Once climax is animated, then we got the viewer’s attention, that is when we jump to steady state, idle animations (talking/not talking for this specific case)
Once again, in doing all those, it is important to note all major animated parts/elements on the bottom. Reason is to move quickly as we will not be skipping attention to detail but still won’t spend time on deciding small animations
Next, initial state, then the climax of the animation get decided (what will happen, what are some major elements that need to be animated, and what is the main action/story that all the animation should direct towards (through grids, direction, composition and movement etc)
Once climax is animated, then we got the viewer’s attention, that is when we jump to steady state, idle animations (talking/not talking for this specific case)
Once again, in doing all those, it is important to note all major animated parts/elements on the bottom. Reason is to move quickly as we will not be skipping attention to detail but still won’t spend time on deciding small animations
It is also important that we keep the principles of animation in mind to make sure we won't end up on a dead end later when working on the details
Sporadic Attempts at Design and Life
bill splitter web app made on react using claude, fully with prompts (I didn't write a single line of code)
Fucked around and made the V2 of the bill splitter, you can find it at bills.tem.works
🔥3
This media is not supported in your browser
VIEW IN TELEGRAM
Fun fact that I learned today: you can drop a folder with subfolders in it on figma to import everything in the folder and it's subfolders.
Sporadic Attempts at Design and Life
Fucked around and made the V2 of the bill splitter, you can find it at bills.tem.works
Media is too big
VIEW IN TELEGRAM
Meet Split/it!
The cleanest bill spliting app that saves friend groups from splitting up😂
Find it at bills.tem.works
Some of the things you can do:
- Add an unlimited amount of friends, list out what they each had
- Option to add what you used inclusive/exclusive of VAT (for those times where you see what you had on the bill but the bill calculates VAT at the bottom, not per item)
- Ability to compare to the total price that came up (and to figure out who's capping😂)
- Ability to put in who had what but then still split the bill equally (three friends split what four people had, the broke friend will love this one)
- Include Service charge/ if you tip in percents like americans
- Download a summary as a png
The cleanest bill spliting app that saves friend groups from splitting up😂
Find it at bills.tem.works
Some of the things you can do:
- Add an unlimited amount of friends, list out what they each had
- Option to add what you used inclusive/exclusive of VAT (for those times where you see what you had on the bill but the bill calculates VAT at the bottom, not per item)
- Ability to compare to the total price that came up (and to figure out who's capping😂)
- Ability to put in who had what but then still split the bill equally (three friends split what four people had, the broke friend will love this one)
- Include Service charge/ if you tip in percents like americans
- Download a summary as a png
Daniel Caesar - Toronto 2014 (with Mustafa)
Sporadic Attempts at Design and Life via @spotifybot
Skepta – Disguise
I have never laughed this hard to a song
Design Aesthetics you can copy for your next project
Retro cartoon branding / modern vintage illustration.
1. Mid-Century Modern Illustration
• Simplified shapes, clean lines, and flat colors.
• Reminiscent of 1950s–1960s commercial art and packaging.
2. Mascot/Character Branding
• The central figure (Piccolo) has a strong character-driven design, common in nostalgic food brands.
• Often used to build emotional connection and memorability.
3. Badge & Emblem Typography
• The circular badge layout with curved text around the mascot is typical of vintage food labels.
• The custom, chunky serif font adds to the retro charm.
4. Monoline Icons
• The ingredient icons (e.g. cane sugar, onion & garlic) use a monoline, minimal iconography style.
• Simple and bold, suitable for screen printing or vintage print techniques.
——————
Retro cartoon branding / modern vintage illustration.
1. Mid-Century Modern Illustration
• Simplified shapes, clean lines, and flat colors.
• Reminiscent of 1950s–1960s commercial art and packaging.
2. Mascot/Character Branding
• The central figure (Piccolo) has a strong character-driven design, common in nostalgic food brands.
• Often used to build emotional connection and memorability.
3. Badge & Emblem Typography
• The circular badge layout with curved text around the mascot is typical of vintage food labels.
• The custom, chunky serif font adds to the retro charm.
4. Monoline Icons
• The ingredient icons (e.g. cane sugar, onion & garlic) use a monoline, minimal iconography style.
• Simple and bold, suitable for screen printing or vintage print techniques.
——————
❤3
If you’re trying to reference this look for your own work, try searching for:
• Retro food packaging
• Mid-century logo design
• Flat character branding
• Modern vintage illustration style
⸻
Color Palette (Retro Warm Tones)
These colors mimic the bold yet friendly orange theme in the design:
Main Orange
Bold, vintage-friendly
Soft Cream BG
Warm, off-white background
Accent Brown/Orange
Deeper orange for contrast
Light Yellow Accent
Good for subtle highlights
⸻
• Retro food packaging
• Mid-century logo design
• Flat character branding
• Modern vintage illustration style
⸻
Color Palette (Retro Warm Tones)
These colors mimic the bold yet friendly orange theme in the design:
Main Orange
#F8981DBold, vintage-friendly
Soft Cream BG
#FFF6F1Warm, off-white background
Accent Brown/Orange
#D16C00Deeper orange for contrast
Light Yellow Accent
#FFECB3Good for subtle highlights
⸻
Fonts to Match the Style, all under google fonts ;)
1. For Logo/Display Text (like “PICCOLO’S”)
• Font: Chewy
• Style: Bouncy, cartoonish, retro
• Best for: Character names, main brand wordmarks
• Alternative: Lilita One
• Slightly more compact and structured, but still retro-bold
⸻
2. For Labels/Badges (like “BRINED CUCUMBERS” or “GLUTEN FREE”)
• Font: Chicle
• Has a playful, hand-lettered feel
• Perfect for ingredient tags and flavor badges
• Alternative: Fredoka
• Rounded, modern-vintage look, great legibility
⸻
3. For Supporting Text (like ingredients or small notes)
• Font: Quicksand
• Geometric, clean, and soft. Plays well with the friendly branding.
• Alternative: Archivo
• If you want something a bit more structured but still retro.
⸻
Tips for Applying the Style
• Use bold weights of these fonts to echo the thick linework in the illustrations.
• Stick to 2–3 font families max to keep the hierarchy clean.
• Use color blocks or strokes to emulate the badge-like shapes around text.
1. For Logo/Display Text (like “PICCOLO’S”)
• Font: Chewy
• Style: Bouncy, cartoonish, retro
• Best for: Character names, main brand wordmarks
• Alternative: Lilita One
• Slightly more compact and structured, but still retro-bold
⸻
2. For Labels/Badges (like “BRINED CUCUMBERS” or “GLUTEN FREE”)
• Font: Chicle
• Has a playful, hand-lettered feel
• Perfect for ingredient tags and flavor badges
• Alternative: Fredoka
• Rounded, modern-vintage look, great legibility
⸻
3. For Supporting Text (like ingredients or small notes)
• Font: Quicksand
• Geometric, clean, and soft. Plays well with the friendly branding.
• Alternative: Archivo
• If you want something a bit more structured but still retro.
⸻
Tips for Applying the Style
• Use bold weights of these fonts to echo the thick linework in the illustrations.
• Stick to 2–3 font families max to keep the hierarchy clean.
• Use color blocks or strokes to emulate the badge-like shapes around text.