Building animated components and micro-interactions for ReactJS ecosystem.
Joined June 2024
- Tweets 51
- Following 4
- Followers 104
- Likes 76
7 Photos and videos
Animata.design retweeted
Day 11 of improving Animata!
π ROLL TEXT
This transition looks simple, but getting it to feel right was surprisingly difficult.
β’ font-kerning: none to fix spacing issues between character and word modes
β’ clip-path over overflow: hidden to prevent text clipping
β’ Custom hover animation control so animations finish before a new one starts
The best UI animations are often the ones users never notice.
1
1
7
186
Animata.design retweeted
Day 9 of updating Animata - React Components!
πcomponent - hyperspace scatter
In the video π, a demo created with the new one updated glitch text.
1
1
4
119
Animata.design retweeted
Day 5 - Get this Gooey Tab created using SVG effect.
Notice the nice effect when tabs are together or when animating?
<πΆππππ’ππππ defaultActiveIndex={πΆ}>
<πΆππππ’ππππ.π»πππ>
<πΆππππ’ππππ.πππ color="ππ-ππππππ-π»πΆπΆ πππππ:ππ-ππππππ-πΌπΆπΆ" label="π·πππ">
<πΆππππ’ππππ.πΈπππ>
<π·πππππΈπππ weight="πππππππ" aria-hidden />
</πΆππππ’ππππ.πΈπππ>
<πΆππππ’ππππ.π»ππππ>π·πππ</πΆππππ’ππππ.π»ππππ>
</πΆππππ’ππππ.πππ>
</πΆππππ’ππππ.π»πππ>
</πΆππππ’ππππ>
Source code below π
1
1
3
114
Go check
Day 4 - Navigation bar
import ππππππππ΅πππππ½ππ from "@/animata/container/πππππππ-πππππ-πππ";
<ππππππππ΅πππππ½ππ mode="ππππ" aria-label="π΅πππππ" className="πππ-π‘-πΌ">
<ππππππππ΅πππππ½ππ.π»πππ href="/ππππ">π³πππ</ππππππππ΅πππππ½ππ.π»πππ>
<ππππππππ΅πππππ½ππ.π»πππ href="/πππππππππ">π²ππππππππ</ππππππππ΅πππππ½ππ.π»πππ>
</ππππππππ΅πππππ½ππ>
Check the source code below π
19
Check it out
Day 3 of updating Animata!
Collaboration card that you can use for your product demo, link to the source code below π
#React #AnimatedComponents
13
Animata.design retweeted
Join the Nextbunny waitlist to get an early invite π₯
Beta users get first access to premium features and the editor before public launch.
Limited spots. I want the first users to feel like insiders.
nextbunny.co
2
2
7
209
Animata.design retweeted
May 10
status button by @animatadesign
npx shadcn add https://animata .design/r/button/status-button.json
1
1
24
1,301
Apr 30
New shader-based component dropping soon
67
Animata.design retweeted
shadcn registry is live for animata!
now, you can install using single command instead of copying files :)
1
1
2
138
Animata.design retweeted
The new landing page is almost ready.
Animata will soon receive a bunch of new updates, all thanks to AI. :)
3
1
9
164
Animata.design retweeted
new feature: swipe β¬
οΈ β‘οΈ to change letter spacing, β¬οΈβ¬οΈ to change line height
check it out @ https://pickfont[.]com
2
1
5
149
Animata.design retweeted
17 May 2025
Somebody forked my open-source library and pushed it without any new changes.
What do you think of this?
It is MIT-licensed, so I don't mind, but it is a little too much to just steal the work without adding new value.
2
1
12
561
Animata.design retweeted
7 Oct 2024
π₯ WE'RE LIVE! π₯
Postable is out of beta and ready for you to try!
Give it a go and let us know your thoughts.
β‘οΈ @Postable_App
3
3
18
1,895
Animata.design retweeted
30 Sep 2024
We are celebrating Hacktoberfest π¨βπ»π©βπ»
Link below π
3
1
7
677
Animata.design retweeted
26 Sep 2024
Wow! π Weβve hit 1k stars on our GitHub project in just 3 months! π€―
Grateful to everyone whoβs been a part of this journey. π
With #Hacktoberfest around the corner, we're rolling out some π₯ new components!
1
2
9
465
Animata.design retweeted
14 Sep 2024
Added this little upload interaction.
3
1
11
581