Skip to content
astro-dev

astro-webtools

Astro component for generic components, as text effect, image effect, navigation,...
Github Npm
Terminal window
npm install astro-webtools

Svg Text

Neon Effect

A Neon effect, as an astro component. Color, speed and rotation angle can be provided.

Full code

Neon
Effect

Polaroid

A polaroid effect, as an astro component.

Full code

Polaroid
Polaroid
Polaroid
Effect

PostIt

A PostIt effect, as an astro component.

Full code

Awesome effect
using astro and webtools!

Garland

A garland effect, as an astro component.

Full code

Garland Effect

Navigation

A navigation bar / hamburger, as an astro component.

Full code

Coming soon

Text effect

https://codepen.io/EricPorter/pen/JjPmOOb https://ianlunn.github.io/Hover/ https://codepen.io/pbrand/details/JjrBYPQ https://codepen.io/Tbgse/pen/dYaJyJ https://codepen.io/Srcko85/pen/bxaGqz https://codepen.io/Sonick/pen/AwXJdM https://codepen.io/yoannhel/pen/DMzjog https://codepen.io/yemon/pen/pWoROm https://codepen.io/ClaireLarsen/pen/XmVyVX https://codepen.io/RobinTreur/pen/pyWLeB https://codepen.io/FrankieDoodie/pen/dgVGad https://codepen.io/TajShireen/pen/abzmoRE https://codepen.io/TajShireen/pen/xxGPEEp https://codepen.io/TajShireen/pen/jOPyQrw https://codepen.io/TajShireen/pen/wvBmXVN

Button

https://codepen.io/yuhomyan/pen/OJMejWJ

Numbers

https://codepen.io/chigggsy/pen/KKVyXPV https://codepen.io/duvander/pen/KXOpXw

Checkboxes

https://codepen.io/collection/zxNagj

https://codepen.io/ash_creator/pen/zYaZXLJ

Tools & Resources

https://www.calligrapher.ai/ https://web.dev/patterns https://web.dev/top-cwv-2023/