Lucas Bassetti

Be yourself because everyone else is already taken

Building & more

[Lucas Bassetti @LucasBassetti]

I built GodUI.

It’s an open-source collection of UI components. Started as a personal stash of stuff I could reuse and steal ideas from. Then I opened it up.

The idea’s simple: good-looking components you drop into any project, most with animation already baked in.

A few things I care about:

Animation where it counts. Some components lean hard on motion, the simpler ones stay clean and fast.

The motion isn’t random. The whole thing follows 12 principles, with tokens mapped to systems like Material 3, so it feels consistent.

shadcn compatible. Install from the CLI straight into your codebase, fully yours to edit.

MCP server. Add it to your AI IDE and just ask for a component. It finds it and writes the code.

Built with React, TypeScript, Tailwind and Motion.

It’s fully open source. A star genuinely helps.

Link in the replies.

[Lucas Bassetti @LucasBassetti]

👀

[Lucas Bassetti @LucasBassetti]

https://t.co/4rrLoikUMa

[Lucas Bassetti @LucasBassetti]

New GodUI Learn page: how ASCII Dither turns a photo or video into live characters and halftone dots on one 2D canvas.

It starts by throwing away resolution. The source is drawn “contain” into an offscreen canvas sized cols × rows, one pixel per output cell. getImageData reads it back as each cell’s average color, computed by the browser’s own downscaling. A 4K photo and a 400px thumbnail collapse to the same grid, so a frame’s cost scales with the grid, not the media.

Each cell reduces to one number: ink coverage. Rec. 601 luma (0.299r + 0.587g + 0.114b), flipped so dark pixels want more ink. ASCII indexes the ramp ” .:-=+*#%@”. Dither thresholds ink against a 4×4 Bayer matrix and quantizes to levels steps; 2 gives 1-bit halftone.

Motion is a per-cell alpha term. No extra layers, no DOM. A center-out wipe over ~700ms on first scroll into view, plus a pointer focus-lens where a cell’s alpha falls off with distance from the cursor. Both stack multiplicatively.

Idle cost is near zero. A static image draws once, no requestAnimationFrame. Only video, glitch, and an active pointer keep the loop running, capped at 30fps. IntersectionObserver stops it off-screen; visibilitychange pauses it on a hidden tab.

[Lucas Bassetti @LucasBassetti]

Just discovered this pure CSS magic that auto-switches text to black or white based on any background color 🔥

No JS. No media queries. Just relative color syntax:

.magic {
--bg: #ff0000;
background: var(--bg);
color: lch(from var(--bg) calc((49.44 - l) * infinity) 0 0);
}

Light bg → black text
Dark bg → white text

Perfect contrast every time.

[Lucas Bassetti @LucasBassetti]

New GodUI component: a split-flap departure board.

The whole flip is one property: rotateX.

No layout, no paint, no box-shadow. Transform on the compositor. Every column spins at once, still 60fps.

[Lucas Bassetti @LucasBassetti]

https://t.co/dMHc9YJmfs

[Lucas Bassetti @LucasBassetti]

Free Portfolio template available at GodUI

Check it now! 👇

[Lucas Bassetti @LucasBassetti]

@tranmautritam One more: https://t.co/dMHc9YJmfs

An open-source collection of crafted motion components built with React, TypeScript, Tailwind CSS, Motion, and shadcn/ui.

[Lucas Bassetti @LucasBassetti]

Docs: https://t.co/dMHc9YJmfs
GitHub: https://t.co/Hw4n53NSZ9

[Lucas Bassetti @LucasBassetti]

New updates on the Learn page of GodUI. 🙏

If you don't know: every component has a Learn tab. It's where we break down how the motion actually works. Anatomy, timing, code, then the live result.

I rebuilt the UI for that.

Before, each scene was its own card in a long scroll. The animation left the screen while you were still reading about it.

Now one preview stage stays pinned. As you scroll through the chapters, the stage updates: new scene, new explanation, code when you want it. The last step is the real interactive component.

Live now! Link in the comments 👇

[Lucas Bassetti @LucasBassetti]

Link: https://t.co/vm1KrQKHAy

[Lucas Bassetti @LucasBassetti]

🤯 Someone built a playable waterbending simulator with Claude Opus 5.

Millions of snow particles. Cloth physics.

No Unity. No Unreal.

Just WebGPU, one detailed prompt, and a few screenshot-based iterations.

Built in 9 hours using 4 million tokens.

[Lucas Bassetti @LucasBassetti]

What are you folks building today?

Drop your project below 👇

[Lucas Bassetti @LucasBassetti]

For me the best way to architect a frontend is by features.

Each feature stands on its own. It can’t import another feature. Shared code lives in its own packages, and dependencies only point one way. I keep an import linter on it, so if someone crosses that line the build fails instead of it slipping in quietly.

Same idea inside a feature: modules stay isolated, shared code moves up, one entry point out.

The reason I like it is simple. I can delete a feature without breaking the rest, hand someone a single module to work on, or swap a dependency, and the damage stays inside the box I drew around it.

How do you approach it? Curious what rules other people actually hold to.

[Lucas Bassetti @LucasBassetti]

@augustopolonio Great job, mate! Keep going!

[Lucas Bassetti @LucasBassetti]

Almost 100⭐️, maybe today? 😬🙏
https://t.co/Hw4n53NSZ9

[Lucas Bassetti @LucasBassetti]

@edo_lunardi Looks great!!

[Lucas Bassetti @LucasBassetti]

Every GodUI component comes with its own Storybook playground.

Change the props, see it live, grab the code.

[Lucas Bassetti @LucasBassetti]

@anupamrjp An open-source collection of beautifully crafted motion components built with React, TypeScript, Tailwind CSS, Motion, and shadcn/ui.
https://t.co/dMHc9YJmfs

[Lucas Bassetti @LucasBassetti]

@lightsilver323 An open-source collection of beautifully crafted motion components built with React, TypeScript, Tailwind CSS, Motion, and shadcn/ui.
https://t.co/dMHc9YJmfs