AdirCode

Head of Development at Kido,
Maintainer of SVG Studio.
Frontend Developer and Figma enthusiast.

[AdirCode @adircode]

I made the new @Apple iMac (#imac2021) with only HTML & CSS, and it rotates in 3D while you can change colors with the buttons at the bottom.
Here’s the @CodePen:
https://t.co/CczI6gJ7OV

[AdirCode @adircode]

@gabriell_lab A very smooth Slider.
Also - how do you call this UI? 😜

[AdirCode @adircode]

@ty_kra_lab Rebuilding it from 200+ real interfaces is the right way to learn it. You can't fake that feel from a style guide. You said the fluidity needs work. Are you tuning spring curves per component, or trying to find one shared motion system the whole kit uses?

[AdirCode @adircode]

@CodePen Putting a canvas inside a <dialog> for a mascot is such a fun touch. Did you consider SVG for Penny, or did canvas win on performance once she's zooming around? Curious where you draw that line.

[AdirCode @adircode]

@gethyper @abduzeedo Love the "LLM plus you can still draw by hand" balance. That's the part most AI design tools skip. I'm building SVG Studio and wrestling with the same question: how much do you let the model drive, and when do you hand control back to the canvas? Would love to try it.

[AdirCode @adircode]

@CCDDBB One continuous line for all of that is wild. How do you keep the path from getting huge? Do you simplify the points before export, or does the plotter handle a dense path fine? No libraries makes it even more impressive.

[AdirCode @adircode]

This is so charming 🍉 Love how the seeds give it rhythm without any extra elements. Are the seeds rotating as one group with a transform, or is each one animated on its own? I've been building SVG Studio for exactly this kind of loader, and simple shapes with smart timing always win.

[AdirCode @adircode]

@SebCornelius That’s the right way to go.
But I bet it was a lot of work to make 😜

[AdirCode @adircode]

Today I tried to ask @claudeai to use SVG Studio by itself, I gave it the live website URL.
The animation it made with too simple but I was amazed it was able to do it at all, and now I need to optimize the bot experience as well 😜

#tech #animation #SVG #AI

[AdirCode @adircode]

@Anthony99_s Looks really fun 🤩
I wonder - did you test this out with screen readers? Does it any the accessibility concerns?

[AdirCode @adircode]

@beastydesign @figma Some people just take the first thing the AI gives them as the finished design.
Some get these amazing tools and get so lazy.

[AdirCode @adircode]

@kazdenc This is the way

[AdirCode @adircode]

@_rudosurebec Not mad at all. Exporting the frame as SVG gives Claude exact geometry instead of making it guess from a screenshot. One tip: turn on 'Include layer ID' when you export, so the SVG keeps your layer names and the generated code gets meaningful names too.

[AdirCode @adircode]

@RamyWafaa 2,600 in one drop is wild, congrats! Do you keep stroke widths and viewBox consistent across the whole set? That's what makes icons easy to animate later. I've been animating icon sets in SVG Studio, the tool I'm building, and clean, consistent paths make all the difference.

[AdirCode @adircode]

@flyosity This is such a good use of embeddings. The best icon search I've used always matched on intent, so 'delete' finds trash and 'money' finds wallet, not filenames. Are you only embedding the names and tags, or also something from the shapes themselves?

[AdirCode @adircode]

@NatA556W @figma @claudeai @cursor_ai The food was small but yummy - like in a 5 star chef restaurant

[AdirCode @adircode]

I went to a Meetup about @figma and design in the age of AI, every talk was someone saying he/ she didn’t even open Figma in the last year or so.

They’re all into @claudeai or @cursor_ai like all of us.

Anyway it was really fun to chat with people and just bots.

#design #tech

[AdirCode @adircode]

@aliszu “The discovery of the new”
That’s what Ratatouille taught us - is the measure of a real artist.