Creative experience with ๐งก for DX/UX/UI created using @tailwindcss + @Alpine_JS for @laravelphp and @astrodotbuild made by @timo_hoelzer and @ra_der_macher
โจ 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! โฌ๏ธ
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.
@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?
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? ๐ค
๐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 ๐
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 ? ๐
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.
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 ๐
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? ๐
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.