Juicy Labs

Creative experience with 🧡 for DX/UX/UI created using @tailwindcss + @Alpine_JS for @laravelphp and @astrodotbuild made by @timo_hoelzer and @ra_der_macher

[Juicy Labs @juicylabs_dev]

✨ Pro Tip: Adjusting the stroke-width of icons to match the font-weight makes your buttons more adaptive.

➡️ Try it out:
https://t.co/aZpbpeYT9Y
🎨 Test it with:
https://t.co/530axTGiej

Got any great sources for line-based icons? Share them in the comments below! ⬇️

[Juicy Labs @juicylabs_dev]

Drop in another Lottie JSON. Boom 💥 Done!

Our Alpine helper to trigger it effortlessly is coming soon. Follow us to make sure you don’t miss it!

[Juicy Labs @juicylabs_dev]

ANIMATIONS 🎮 Controlling @LottieFiles animations with @Alpine_JS and IntersectionObserver is a blast! 💥

A progress value, tied to the item’s dimensions (wait for dotted outline), ensures users experience the full timeline, regardless of viewport height.

[Juicy Labs @juicylabs_dev]

@LottieFiles @Alpine_JS ✨ Free snippet how to simply control Lottie with Alpine
https://t.co/VC7lP1PORd

[Juicy Labs @juicylabs_dev]

@PatricioOnCode Exactly. Uses an IntersectionObserver with specific setup. Smooth like butter even on mobile devices. We have built an Alpine directive for flexible usage.

Some free stuff will be ready soon.
So you will be able to get a taste of the DX we are creating.

TALL Stack, too?

[Juicy Labs @juicylabs_dev]

BUTTONS💥Adding nice effects to our buttons for user attention often relies on :hover state, which doesn’t work well on touch devices. What a pity. A generic button that triggers its hover state when entering the viewport could be a solution. Thoughts? 🤔

[Juicy Labs @juicylabs_dev]

@PatricioOnCode Thank you 😀 Fun fact is you do not have to register a single scroll listener for this

[Juicy Labs @juicylabs_dev]

@thebigk @Alpine_JS @tailwindcss There will be both.
Some free stuff will be ready soon.

[Juicy Labs @juicylabs_dev]

🎉The real fun begins when it comes to nesting of @Alpine_JS components. This experimental number input is bound to a native number input outside the component.
Combines two of our upcoming components into a new. Thank you @tailwindcss for easy styling 👍

[Juicy Labs @juicylabs_dev]

@thebigk @tailwindcss @Alpine_JS You like to use it as a Blade Component in Laravel, right?
And „Light Mode“ ready 🫡

[Juicy Labs @juicylabs_dev]

After squeezing 🍋 numbers we are now focusing on letters again. Raise your hand 👋 if you like to use talking placeholders like this with ease and no more dependencies than @tailwindcss and @Alpine_JS.
Fully customizable with Tailwind right into your markup. Anyone ? 😜

[Juicy Labs @juicylabs_dev]

Emoji Chaos

[Juicy Labs @juicylabs_dev]

So much fun 😛 testing some options for alternative chars and custom stagger delay building up from rear.
No animation library involved. Just a clever use of CSS and a tiny bit of @Alpine_JS.

[Juicy Labs @juicylabs_dev]

"Board" Apes

[Juicy Labs @juicylabs_dev]

Sometimes animations need to be started by event. This one is triggered by Alpine's x-intersect API at 0.5 of the viewport height.

Added Sound FX 🔊 for fun too 🙉

[Juicy Labs @juicylabs_dev]

Numbers again. We are testing new transition effects for the final package and experimenting with theming and prefix/suffix icons & symbols. Screen capture eats 50% of the performance. But still slick... is't it? 😎

[Juicy Labs @juicylabs_dev]

https://t.co/J6jWhzgASk

[Juicy Labs @juicylabs_dev]

Thanks to all the amazing people already following us 🙏 There's a ton more to come. Promised.

[Juicy Labs @juicylabs_dev]

😜Playtime with Numbers. We think the world should know what @Alpine_JS & @tailwindcss can do. Agree? Like. Retweet. Comment.

[Juicy Labs @juicylabs_dev]

@Alpine_JS @tailwindcss https://t.co/TvlyDuTigF

[Juicy Labs @juicylabs_dev]

Hello @tailwindcss & @Alpine_JS Lovers!

We have some tasty stuff brewing for you. Get a peek behind the curtains every week. Stay tuned!

# Sneak Peek 1⃣
Simply wrap your text with our component, mount it to a vertical trigger and you're all set. 🚀

Follow us for more.