New timeline component pushes CSS grid to its absolute limit 🥵

lemme show you around

oh hey forgot to shout out my boy @hugosaintemarie - designs by him of course

@taylorotwell vibe coders will never understand the feeling of getting a visual perfection

@taylorotwell silly vibers

I am always amazed at what people can pull off with grid nowadays. This looks incredibly smooth and I would love to see the source code.

right? source code is just in a plain css file here:

Timeline component goes hard. 😮‍💨

whoda thought

nice, this solves like 90% of current UI design lol

haha

i got chills watching this with every layout transition I was imagining a sleepless night spent implementing it by hand

Haha indeed. And this was zero Claude 😱

oh boy! so cool

VERY nice!!

thanks mate!

How did you know I needed this? 🚀

just had a feeelin

...hmm... is this something that needs update outside of your package... I upgraded to `laravel/boost: 2.2` and did an artisan boost:update. I can still read the docs but I'm generally curious how boost gets updates.

@calebporzio We published the docs a couple of days ago and Boost has already picked it up. Are you still not seeing it?

@calebporzio Yeah - hmm - I tried this several times this morning (see screenshots) and in the same terminal window in the same Claude session now it's happy? Yup - works now. Thanks!

Was struggling with creating a timeline last month, will definitely replace that one with this component 💯

niceeee

bro he actually pulled it off, css grid to its absolute limit is some scary shit lol

@Hylianpie terrifying

@taylorotwell So cool

Bravo!

Fabulous component..! Hats off to you..🎩 @calebporzio

thanks mate!

Nice! I was thinking “this is super easy” and then tried to imagine how I would do this myself with just css and realised how much you cooked.

That’s beautiful

well if it ain't sorcery then idk what else it is

Flux is not for for react 🫣

Love the component and the Video here!

🤝

@taylorotwell Amazing 😍

This is the one thing I needed last week! Nice

Cool animations man.

need this in @shadcn ui

CSS grid is a superpower when pushed this hard. Would love a breakdown of the trick

Love the ideas of how it scales properly that pleasing to the eye. Good job brother. 🫡

@sr_masudur thanks mate

Where can I get it

🔥

awesome work

thanks!

Great to see!

👌👌

That’s an absolutely ultimate flexible timeline component 🔥

💪

fr, it's wild what you can do with grid these days. tried to build something similar and hit a wall. how’d you approach the layout?

CSS grid will get you shockingly far, but the moment you add real time updates you also need boring constraints: fixed row heights, virtualization, and a strict diff model. Curious if you have to drop to absolute positioning for perf once there are hundreds of items.

Absolutely amazing. I need to build a custom composable timeline for my design system. It would be great if it is as good as yours. Does it allow to put text on the left of the icon also ?

Looks great 👌 Will a carousel function be added to fluxui in future, so we can scroll cards etc… or should we implement a seperate one?

Incredible .. no one will know how hard to get it working if he never tried to do one with multiple variations before

true, im baffled how involved it was