Most of the time I share my learnings on design engineering and building my SaaS. Sometimes I shitpost, Sometimes I rant, and sometimes I try to get as much fomo as I can.
Here are some of the tweets that I'm proud of.
@mannupaaji
Use πππππππ-πππππ‘() to stagger children of a parent without having to manually track a using --π πππππππππ or having to use an animation library .ππππ { πππππππππ: πππππ πΆ.πΊπ»π πππππ-πππ£πππ(πΆ.πΈπΈ, π·, πΆ.πΉπΌ, π·)
@mannupaaji
Using `π·ππ` instead of `π·ππ` for inline icons or logos accounts for the extra line height additions. .ππππ { ππππππ: π·ππ; π ππππ: π·ππ; } The logo fills up the visual length of the text line exactly. Change your πππππππ / ππππ-ππππππ
@mannupaaji
An upper shadow of as small as πΆ.π»ππ‘ can help your buttons stand out <ππππππ ππππππ½πππ="πππππππ-ππππ ππ-ππππππ-ππ-π ππππ-πππππππ-πΏπΆπΆ ππ-πππππ ππ‘-πΊ ππ’-πΈ πππ‘π-π ππππ
@mannupaaji
One of my favourites latest CSS property is ππππππ πππππππππππ .πππππππ { ππππππ-ππππ: --πππ; } .πππππππ { ππππππππ: πππ‘ππ; ππππππππ-ππππππ: --πππ; ππππππππ-ππππ: πππ ππππππ;
@mannupaaji
you can create a CSS only carousel with CSS `ππππππ-ππππ` .ππππππππ { ππππππππ -π‘: ππππ; ππππππ-ππππ-ππ’ππ: π‘ πππππππππ’; ππππππ-πππππππ-ππππππ: π·.π»πππ; /* πππππππ π’πππ
@mannupaaji
I don't know what a vestaboard is here's a component that flips characters - Pass in an array of messages / a single message to display - Import via @shadcn CLI or Open in @v0 - Light and dark mode - Mobile responsive Built with Claude Opus 4.6 High + Composer 2 in around an
@mannupaaji
For dark mode box shadows, use a layered dark color for the shadow instead of white to add elevation to your cards πππ‘ππππππ : ππππ(πΆ, πΆ, πΆ, πΆ.πΊπΈ) πΆππ‘ π»πΊππ‘ π»π»ππ‘, ππππ(πΆ, πΆ, πΆ, πΆ.πΉπΌ) πΆππ‘ -π·πΈππ‘ πΉπΆππ‘, ππππ(πΆ, πΆ, πΆ, πΆ.πΈπΆ)
@mannupaaji
Create multiple lines and scales around your cards with πππππππππ-ππππππ-ππππππππ Instead of using divs and spans, use πππππππππ-ππππππ-ππππππππ and ππππ-π-ππππ-π»πΆ% for smooth set of lines <πππ
@mannupaaji
Left: ππππππ ππππππ-πππππππ-πΈπΆπΆ Right: ππππππ -ππ ππππππ -πππππ/π·πΆ ππππ-π· ππππ-πππππ/π·πΆ Shadow paired with a ring utility elevates the input boxes to a very subtle extent. i love the right one personally.
@mannupaaji
Create image reveal effects with CSS ππππ-ππππ .ππππππ { ππππ-ππππ: πππππ(πΆ π·πΆπΆ% πΆ πΆ); πππππππππ: ππππ -πππππ π·π ππππ ππππ ππππππ; } @πππ’ππππππ ππππ -πππππ { ππ {
@mannupaaji
Use the π πππππ·ππππ prop on the parent to animate children <ππππππ.πππ π πππππ·ππππ="πππππππ" πππππππ="πππππππ"> ... <ππππππ.πππ ππππππππ={{πππππππ: π’:πΊπΆ, π‘: πΈπΆ}}> ...
@mannupaaji
Small little detail added to the macbook skeleton's screen lid πππππππππππ-πππππππ to the parent ππππππ-π‘-πΊπΆ ππππ-ππ ππππππ-πππ along with πππππππ and πππππππ variants from @motiondotdev Super nice effect, got to learn
@mannupaaji
Smooth Edges for Marquees with CSS Mask ππππ-π-ππππ-πΎπΆ% ππππ-π-ππππ-πΎπΆ% Can be used on card skeletons, marquees, or anywhere you want to smooth out the edges.
@mannupaaji
Left prompt Create a keyboard component, make no mistakes. Right prompt Create a mac style keyboard component with the following features - Every number should be accompanied by a symbol, symbols should be lighter that the number - Each key should be a component that has to be
@mannupaaji
Instead of repeating code for child elements, use the `&` operator on the root tag Here's an example of check items with with nesting `&` selector <ππ ππππππ½πππ="ππππ‘ ππππ-ππππ ππππ‘-πππ πππ-πΈ [&_ππ]:ππππ‘ [&_ππ]:πππππ-ππππππ
@mannupaaji
Learn how to create this 3D animation from @perplexity_ai comet's invite screen
@mannupaaji
Learn how to create this 3D Marquee animation from @vercel 's OSS starter pack page
@mannupaaji
Not many people know this but @fireship_dev taught me how to print "Hi Mom" in Javascript
@mannupaaji
How to create this infinite testimonial carousel from scratch with @tailwindcss and @framer motion β¬οΈ
@mannupaaji
I've seen a lot of isometric illustrations and they look GREAT, but I cannot create them myself since I'm not that great with Figma I use claude code + cursor to create SVGs for me Created a bunch of isometric illustrations with AI, used @motiondotdev to animate them on hover
@mannupaaji
everyone is a content creator until this thing appears in front of you then you just sit there, silent, questioning your own existence
