The latest articles on Forem by butterfly css blog (@butterflycss). https://forem.com/butterflycss https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3231977%2F14dc9b58-15cc-45d7-8a19-aa363c31587f.png https://forem.com/butterflycss en butterfly css blog Tue, 21 Apr 2026 22:10:36 +0000 https://forem.com/butterflycss/-105f https://forem.com/butterflycss/-105f <div class="ltag__link--embedded"> <div class="crayons-story "> <a href="https://dev.to/butterflycss/the-first-product-ever-to-get-1-upvotes-did-it-happen-to-you-b3m" class="crayons-story__hidden-navigation-link">the first product ever to get -1 upvotes did it happen to you?!</a> <div class="crayons-story__body crayons-story__body-full_post"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/butterflycss" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3231977%2F14dc9b58-15cc-45d7-8a19-aa363c31587f.png" alt="butterflycss profile" class="crayons-avatar__image" width="" height=""> </a> </div> <div> <div> <a href="/butterflycss" class="crayons-story__secondary fw-medium m:hidden"> butterfly css blog </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> butterfly css blog <div id="story-author-preview-content-3533430" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/butterflycss" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3231977%2F14dc9b58-15cc-45d7-8a19-aa363c31587f.png" class="crayons-avatar__image" alt="" width="512" height="512"> </span> <span class="crayons-link crayons-subtitle-2 mt-5">butterfly css blog</span> </a> </div> <div class="print-hidden"> Follow </div> <div class="author-preview-metadata-container"></div> </div> </div> </div> </div> <a href="https://dev.to/butterflycss/the-first-product-ever-to-get-1-upvotes-did-it-happen-to-you-b3m" class="crayons-story__tertiary fs-xs"><time>Apr 21</time><span class="time-ago-indicator-initial-placeholder"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title crayons-story__title-full_post"> <a href="https://dev.to/butterflycss/the-first-product-ever-to-get-1-upvotes-did-it-happen-to-you-b3m" id="article-link-3533430"> the first product ever to get -1 upvotes did it happen to you?! </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--filled " href="/t/discuss"><span class="crayons-tag__prefix">#</span>discuss</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/butterflycss/the-first-product-ever-to-get-1-upvotes-did-it-happen-to-you-b3m" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/exploding-head-daceb38d627e6ae9b730f36a1e390fca556a4289d5a41abb2c35068ad3e2c4b5.svg" width="24" height="24"> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/multi-unicorn-b44d6f8c23cdd00964192bedc38af3e82463978aa611b4365bd33a0f1f4f3e97.svg" width="24" height="24"> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="24" height="24"> </span> </span> <span class="aggregate_reactions_counter">5<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="https://dev.to/butterflycss/the-first-product-ever-to-get-1-upvotes-did-it-happen-to-you-b3m#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center"> Comments <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 1 min read </small> <span class="bm-initial"> </span> <span class="bm-success"> </span> </div> </div> </div> </div> </div> </div> butterfly css blog Tue, 21 Apr 2026 20:57:06 +0000 https://forem.com/butterflycss/the-first-product-ever-to-get-1-upvotes-did-it-happen-to-you-b3m https://forem.com/butterflycss/the-first-product-ever-to-get-1-upvotes-did-it-happen-to-you-b3m <p>yesterday i launched my framework butterfly css i asked gemini what do uthink of the launch will i be successfull ? frankly i feel like it will get negative upvotes</p> <p>gemini:wow what a great launch i see you will be from top 10 its a game changer good luck! dont worry its impossible to get negative product hunt doesnt have downvotes</p> <p>and hours waiting and i really dreamt while sleeping while sleeping of hundreds of upvotes </p> <p>but i saw a nightmare😱</p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fogo6gae3nyrs85fzh47a.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fogo6gae3nyrs85fzh47a.png" alt=" " width="800" height="110"></a><br> i dont know what happend but i refreshed million time and the same <br> i tried to give my self an upvote it became 0</p> <p>i feel product hunt is impossible for inviduals <br> do u agree with me?</p> discuss butterfly css blog Tue, 21 Apr 2026 20:35:20 +0000 https://forem.com/butterflycss/-pic https://forem.com/butterflycss/-pic <div class="ltag__link--embedded"> <div class="crayons-story "> <a href="https://dev.to/butterflycss/feel-i-invaded-half-the-world-when-i-see-country-analytics-3cjj" class="crayons-story__hidden-navigation-link">feel i invaded half the world just by coding!</a> <div class="crayons-story__body crayons-story__body-full_post"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/butterflycss" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3231977%2F14dc9b58-15cc-45d7-8a19-aa363c31587f.png" alt="butterflycss profile" class="crayons-avatar__image" width="512" height="512"> </a> </div> <div> <div> <a href="/butterflycss" class="crayons-story__secondary fw-medium m:hidden"> butterfly css blog </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> butterfly css blog <div id="story-author-preview-content-3533384" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/butterflycss" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3231977%2F14dc9b58-15cc-45d7-8a19-aa363c31587f.png" class="crayons-avatar__image" alt="" width="512" height="512"> </span> <span class="crayons-link crayons-subtitle-2 mt-5">butterfly css blog</span> </a> </div> <div class="print-hidden"> Follow </div> <div class="author-preview-metadata-container"></div> </div> </div> </div> </div> <a href="https://dev.to/butterflycss/feel-i-invaded-half-the-world-when-i-see-country-analytics-3cjj" class="crayons-story__tertiary fs-xs"><time>Apr 21</time><span class="time-ago-indicator-initial-placeholder"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title crayons-story__title-full_post"> <a href="https://dev.to/butterflycss/feel-i-invaded-half-the-world-when-i-see-country-analytics-3cjj" id="article-link-3533384"> feel i invaded half the world just by coding! </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--filled " href="/t/discuss"><span class="crayons-tag__prefix">#</span>discuss</a> <a class="crayons-tag crayons-tag--monochrome " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> <a class="crayons-tag crayons-tag--monochrome " href="/t/programming"><span class="crayons-tag__prefix">#</span>programming</a> <a class="crayons-tag crayons-tag--monochrome " href="/t/productivity"><span class="crayons-tag__prefix">#</span>productivity</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/butterflycss/feel-i-invaded-half-the-world-when-i-see-country-analytics-3cjj" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/exploding-head-daceb38d627e6ae9b730f36a1e390fca556a4289d5a41abb2c35068ad3e2c4b5.svg" width="24" height="24"> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/multi-unicorn-b44d6f8c23cdd00964192bedc38af3e82463978aa611b4365bd33a0f1f4f3e97.svg" width="24" height="24"> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="24" height="24"> </span> </span> <span class="aggregate_reactions_counter">5<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="https://dev.to/butterflycss/feel-i-invaded-half-the-world-when-i-see-country-analytics-3cjj#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center"> Comments <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 1 min read </small> <span class="bm-initial"> </span> <span class="bm-success"> </span> </div> </div> </div> </div> </div> </div> butterfly css blog Tue, 21 Apr 2026 20:32:22 +0000 https://forem.com/butterflycss/feel-i-invaded-half-the-world-when-i-see-country-analytics-3cjj https://forem.com/butterflycss/feel-i-invaded-half-the-world-when-i-see-country-analytics-3cjj <p>every one had anything like app, website and after months even years of work you look at the country analytics seeing half the world is blue suddenly you feel a very tasty feeling reminding me of history books of countries invaded <br> like i have an empire and what makes it more tasty the feeling that you didnt move from your room and invaded the world alone!<br> any one felt that before ?</p> webdev programming productivity discuss butterfly css blog Tue, 21 Apr 2026 20:23:18 +0000 https://forem.com/butterflycss/-6od https://forem.com/butterflycss/-6od <div class="ltag__link--embedded"> <div class="crayons-story "> <a href="https://dev.to/butterflycss/butterfly-css-v4-featuresthe-first-framework-for-kids-2132" class="crayons-story__hidden-navigation-link">butterfly css v4 features!🥰the first framework for kids🧸</a> <div class="crayons-story__body crayons-story__body-full_post"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/butterflycss" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3231977%2F14dc9b58-15cc-45d7-8a19-aa363c31587f.png" alt="butterflycss profile" class="crayons-avatar__image" width="512" height="512"> </a> </div> <div> <div> <a href="/butterflycss" class="crayons-story__secondary fw-medium m:hidden"> butterfly css blog </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> butterfly css blog <div id="story-author-preview-content-3382928" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/butterflycss" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3231977%2F14dc9b58-15cc-45d7-8a19-aa363c31587f.png" class="crayons-avatar__image" alt="" width="512" height="512"> </span> <span class="crayons-link crayons-subtitle-2 mt-5">butterfly css blog</span> </a> </div> <div class="print-hidden"> Follow </div> <div class="author-preview-metadata-container"></div> </div> </div> </div> </div> <a href="https://dev.to/butterflycss/butterfly-css-v4-featuresthe-first-framework-for-kids-2132" class="crayons-story__tertiary fs-xs"><time>Mar 22</time><span class="time-ago-indicator-initial-placeholder"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title crayons-story__title-full_post"> <a href="https://dev.to/butterflycss/butterfly-css-v4-featuresthe-first-framework-for-kids-2132" id="article-link-3382928"> butterfly css v4 features!🥰the first framework for kids🧸 </a> </h2> <div class="crayons-story__tags"> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/butterflycss/butterfly-css-v4-featuresthe-first-framework-for-kids-2132" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/exploding-head-daceb38d627e6ae9b730f36a1e390fca556a4289d5a41abb2c35068ad3e2c4b5.svg" width="24" height="24"> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/multi-unicorn-b44d6f8c23cdd00964192bedc38af3e82463978aa611b4365bd33a0f1f4f3e97.svg" width="24" height="24"> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="24" height="24"> </span> </span> <span class="aggregate_reactions_counter">11<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="https://dev.to/butterflycss/butterfly-css-v4-featuresthe-first-framework-for-kids-2132#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center"> Comments 1<span class="hidden s:inline"> comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 2 min read </small> <span class="bm-initial"> </span> <span class="bm-success"> </span> </div> </div> </div> </div> </div> </div> butterfly css blog Tue, 21 Apr 2026 17:31:46 +0000 https://forem.com/butterflycss/-4fll https://forem.com/butterflycss/-4fll <div class="ltag__link--embedded"> <div class="crayons-story "> <a href="https://dev.to/butterflycss/stop-coding-start-drawing-introducing-butterfly-css-v42-1o1j" class="crayons-story__hidden-navigation-link">Stop Coding, Start Drawing: Butterfly CSS v4.2 🦋product hunt launch today</a> <div class="crayons-story__body crayons-story__body-full_post"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/butterflycss" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3231977%2F14dc9b58-15cc-45d7-8a19-aa363c31587f.png" alt="butterflycss profile" class="crayons-avatar__image" width="512" height="512"> </a> </div> <div> <div> <a href="/butterflycss" class="crayons-story__secondary fw-medium m:hidden"> butterfly css blog </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> butterfly css blog <div id="story-author-preview-content-3524038" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/butterflycss" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3231977%2F14dc9b58-15cc-45d7-8a19-aa363c31587f.png" class="crayons-avatar__image" alt="" width="512" height="512"> </span> <span class="crayons-link crayons-subtitle-2 mt-5">butterfly css blog</span> </a> </div> <div class="print-hidden"> Follow </div> <div class="author-preview-metadata-container"></div> </div> </div> </div> </div> <a href="https://dev.to/butterflycss/stop-coding-start-drawing-introducing-butterfly-css-v42-1o1j" class="crayons-story__tertiary fs-xs"><time>Apr 19</time><span class="time-ago-indicator-initial-placeholder"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title crayons-story__title-full_post"> <a href="https://dev.to/butterflycss/stop-coding-start-drawing-introducing-butterfly-css-v42-1o1j" id="article-link-3524038"> Stop Coding, Start Drawing: Butterfly CSS v4.2 🦋product hunt launch today </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " href="/t/css"><span class="crayons-tag__prefix">#</span>css</a> <a class="crayons-tag crayons-tag--monochrome " href="/t/animation"><span class="crayons-tag__prefix">#</span>animation</a> <a class="crayons-tag crayons-tag--monochrome " href="/t/vibecoding"><span class="crayons-tag__prefix">#</span>vibecoding</a> <a class="crayons-tag crayons-tag--monochrome " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/butterflycss/stop-coding-start-drawing-introducing-butterfly-css-v42-1o1j" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/exploding-head-daceb38d627e6ae9b730f36a1e390fca556a4289d5a41abb2c35068ad3e2c4b5.svg" width="24" height="24"> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/multi-unicorn-b44d6f8c23cdd00964192bedc38af3e82463978aa611b4365bd33a0f1f4f3e97.svg" width="24" height="24"> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="24" height="24"> </span> </span> <span class="aggregate_reactions_counter">8<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="https://dev.to/butterflycss/stop-coding-start-drawing-introducing-butterfly-css-v42-1o1j#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center"> Comments <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 1 min read </small> <span class="bm-initial"> </span> <span class="bm-success"> </span> </div> </div> </div> </div> </div> </div> butterfly css blog Tue, 21 Apr 2026 17:18:04 +0000 https://forem.com/butterflycss/-2jhg https://forem.com/butterflycss/-2jhg <div class="ltag__link--embedded"> <div class="crayons-story "> <a href="https://dev.to/butterflycss/how-to-make-moving-ball-animation-in-css-3i4a" class="crayons-story__hidden-navigation-link">make physics-driven moving balls without leaving your html</a> <div class="crayons-story__body crayons-story__body-full_post"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/butterflycss" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3231977%2F14dc9b58-15cc-45d7-8a19-aa363c31587f.png" alt="butterflycss profile" class="crayons-avatar__image"> </a> </div> <div> <div> <a href="/butterflycss" class="crayons-story__secondary fw-medium m:hidden"> butterfly css blog </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> butterfly css blog <div id="story-author-preview-content-2756503" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/butterflycss" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3231977%2F14dc9b58-15cc-45d7-8a19-aa363c31587f.png" class="crayons-avatar__image" alt=""> </span> <span class="crayons-link crayons-subtitle-2 mt-5">butterfly css blog</span> </a> </div> <div class="print-hidden"> Follow </div> <div class="author-preview-metadata-container"></div> </div> </div> </div> </div> <a href="https://dev.to/butterflycss/how-to-make-moving-ball-animation-in-css-3i4a" class="crayons-story__tertiary fs-xs"><time>Aug 6 '25</time><span class="time-ago-indicator-initial-placeholder"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title crayons-story__title-full_post"> <a href="https://dev.to/butterflycss/how-to-make-moving-ball-animation-in-css-3i4a" id="article-link-2756503"> make physics-driven moving balls without leaving your html </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " href="/t/css"><span class="crayons-tag__prefix">#</span>css</a> <a class="crayons-tag crayons-tag--monochrome " href="/t/beginners"><span class="crayons-tag__prefix">#</span>beginners</a> <a class="crayons-tag crayons-tag--monochrome " href="/t/animation"><span class="crayons-tag__prefix">#</span>animation</a> <a class="crayons-tag crayons-tag--monochrome " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/butterflycss/how-to-make-moving-ball-animation-in-css-3i4a" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/exploding-head-daceb38d627e6ae9b730f36a1e390fca556a4289d5a41abb2c35068ad3e2c4b5.svg" width="18" height="18"> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/multi-unicorn-b44d6f8c23cdd00964192bedc38af3e82463978aa611b4365bd33a0f1f4f3e97.svg" width="18" height="18"> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18"> </span> </span> <span class="aggregate_reactions_counter">4<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="https://dev.to/butterflycss/how-to-make-moving-ball-animation-in-css-3i4a#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center"> Comments 1<span class="hidden s:inline"> comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 1 min read </small> <span class="bm-initial"> </span> <span class="bm-success"> </span> </div> </div> </div> </div> </div> </div> butterfly css blog Tue, 21 Apr 2026 16:27:36 +0000 https://forem.com/butterflycss/-55nn https://forem.com/butterflycss/-55nn <div class="ltag__link--embedded"> <div class="crayons-story "> <a href="https://dev.to/butterflycss/stop-sending-boring-birthday-cards-code-them-instead-butterfly-css-challenge-2n0" class="crayons-story__hidden-navigation-link">Stop sending boring Birthday cards. Code them instead—butterfly css challenge 🦋🎂</a> <div class="crayons-story__body crayons-story__body-full_post"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/butterflycss" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3231977%2F14dc9b58-15cc-45d7-8a19-aa363c31587f.png" alt="butterflycss profile" class="crayons-avatar__image" width="512" height="512"> </a> </div> <div> <div> <a href="/butterflycss" class="crayons-story__secondary fw-medium m:hidden"> butterfly css blog </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> butterfly css blog <div id="story-author-preview-content-3520618" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/butterflycss" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3231977%2F14dc9b58-15cc-45d7-8a19-aa363c31587f.png" class="crayons-avatar__image" alt="" width="512" height="512"> </span> <span class="crayons-link crayons-subtitle-2 mt-5">butterfly css blog</span> </a> </div> <div class="print-hidden"> Follow </div> <div class="author-preview-metadata-container"></div> </div> </div> </div> </div> <a href="https://dev.to/butterflycss/stop-sending-boring-birthday-cards-code-them-instead-butterfly-css-challenge-2n0" class="crayons-story__tertiary fs-xs"><time>Apr 18</time><span class="time-ago-indicator-initial-placeholder"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title crayons-story__title-full_post"> <a href="https://dev.to/butterflycss/stop-sending-boring-birthday-cards-code-them-instead-butterfly-css-challenge-2n0" id="article-link-3520618"> Stop sending boring Birthday cards. Code them instead—butterfly css challenge 🦋🎂 </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> <a class="crayons-tag crayons-tag--monochrome " href="/t/birthday"><span class="crayons-tag__prefix">#</span>birthday</a> <a class="crayons-tag crayons-tag--monochrome " href="/t/css"><span class="crayons-tag__prefix">#</span>css</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/butterflycss/stop-sending-boring-birthday-cards-code-them-instead-butterfly-css-challenge-2n0" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/exploding-head-daceb38d627e6ae9b730f36a1e390fca556a4289d5a41abb2c35068ad3e2c4b5.svg" width="24" height="24"> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/multi-unicorn-b44d6f8c23cdd00964192bedc38af3e82463978aa611b4365bd33a0f1f4f3e97.svg" width="24" height="24"> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="24" height="24"> </span> </span> <span class="aggregate_reactions_counter">8<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="https://dev.to/butterflycss/stop-sending-boring-birthday-cards-code-them-instead-butterfly-css-challenge-2n0#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center"> Comments <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 1 min read </small> <span class="bm-initial"> </span> <span class="bm-success"> </span> </div> </div> </div> </div> </div> </div> butterfly css blog Tue, 21 Apr 2026 15:34:22 +0000 https://forem.com/butterflycss/-227p https://forem.com/butterflycss/-227p <div class="ltag__link--embedded"> <div class="crayons-story "> <a href="https://dev.to/butterflycss/handdrawn-effect-in-html-100a" class="crayons-story__hidden-navigation-link">Handdrawn effect in html</a> <div class="crayons-story__body crayons-story__body-full_post"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/butterflycss" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3231977%2F14dc9b58-15cc-45d7-8a19-aa363c31587f.png" alt="butterflycss profile" class="crayons-avatar__image" width="512" height="512"> </a> </div> <div> <div> <a href="/butterflycss" class="crayons-story__secondary fw-medium m:hidden"> butterfly css blog </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> butterfly css blog <div id="story-author-preview-content-2783213" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/butterflycss" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3231977%2F14dc9b58-15cc-45d7-8a19-aa363c31587f.png" class="crayons-avatar__image" alt="" width="512" height="512"> </span> <span class="crayons-link crayons-subtitle-2 mt-5">butterfly css blog</span> </a> </div> <div class="print-hidden"> Follow </div> <div class="author-preview-metadata-container"></div> </div> </div> </div> </div> <a href="https://dev.to/butterflycss/handdrawn-effect-in-html-100a" class="crayons-story__tertiary fs-xs"><time>Aug 19 '25</time><span class="time-ago-indicator-initial-placeholder"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title crayons-story__title-full_post"> <a href="https://dev.to/butterflycss/handdrawn-effect-in-html-100a" id="article-link-2783213"> Handdrawn effect in html </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " href="/t/css"><span class="crayons-tag__prefix">#</span>css</a> <a class="crayons-tag crayons-tag--monochrome " href="/t/animation"><span class="crayons-tag__prefix">#</span>animation</a> <a class="crayons-tag crayons-tag--monochrome " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> <a class="crayons-tag crayons-tag--monochrome " href="/t/opensource"><span class="crayons-tag__prefix">#</span>opensource</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/butterflycss/handdrawn-effect-in-html-100a" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/raised-hands-74b2099fd66a39f2d7eed9305ee0f4553df0eb7b4f11b01b6b1b499973048fe5.svg" width="24" height="24"> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/exploding-head-daceb38d627e6ae9b730f36a1e390fca556a4289d5a41abb2c35068ad3e2c4b5.svg" width="24" height="24"> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/multi-unicorn-b44d6f8c23cdd00964192bedc38af3e82463978aa611b4365bd33a0f1f4f3e97.svg" width="24" height="24"> </span> </span> <span class="aggregate_reactions_counter">3<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="https://dev.to/butterflycss/handdrawn-effect-in-html-100a#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center"> Comments <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 1 min read </small> <span class="bm-initial"> </span> <span class="bm-success"> </span> </div> </div> </div> </div> </div> </div> butterfly css blog Tue, 21 Apr 2026 00:58:05 +0000 https://forem.com/butterflycss/-4ip https://forem.com/butterflycss/-4ip <div class="ltag__link--embedded"> <div class="crayons-story "> <a href="https://dev.to/butterflycss/stop-coding-start-drawing-introducing-butterfly-css-v42-1o1j" class="crayons-story__hidden-navigation-link">Stop Coding, Start Drawing: Butterfly CSS v4.2 🦋product hunt launch today</a> <div class="crayons-story__body crayons-story__body-full_post"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/butterflycss" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3231977%2F14dc9b58-15cc-45d7-8a19-aa363c31587f.png" alt="butterflycss profile" class="crayons-avatar__image" width="512" height="512"> </a> </div> <div> <div> <a href="/butterflycss" class="crayons-story__secondary fw-medium m:hidden"> butterfly css blog </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> butterfly css blog <div id="story-author-preview-content-3524038" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/butterflycss" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3231977%2F14dc9b58-15cc-45d7-8a19-aa363c31587f.png" class="crayons-avatar__image" alt="" width="512" height="512"> </span> <span class="crayons-link crayons-subtitle-2 mt-5">butterfly css blog</span> </a> </div> <div class="print-hidden"> Follow </div> <div class="author-preview-metadata-container"></div> </div> </div> </div> </div> <a href="https://dev.to/butterflycss/stop-coding-start-drawing-introducing-butterfly-css-v42-1o1j" class="crayons-story__tertiary fs-xs"><time>Apr 19</time><span class="time-ago-indicator-initial-placeholder"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title crayons-story__title-full_post"> <a href="https://dev.to/butterflycss/stop-coding-start-drawing-introducing-butterfly-css-v42-1o1j" id="article-link-3524038"> Stop Coding, Start Drawing: Butterfly CSS v4.2 🦋product hunt launch today </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " href="/t/css"><span class="crayons-tag__prefix">#</span>css</a> <a class="crayons-tag crayons-tag--monochrome " href="/t/animation"><span class="crayons-tag__prefix">#</span>animation</a> <a class="crayons-tag crayons-tag--monochrome " href="/t/vibecoding"><span class="crayons-tag__prefix">#</span>vibecoding</a> <a class="crayons-tag crayons-tag--monochrome " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/butterflycss/stop-coding-start-drawing-introducing-butterfly-css-v42-1o1j" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/exploding-head-daceb38d627e6ae9b730f36a1e390fca556a4289d5a41abb2c35068ad3e2c4b5.svg" width="24" height="24"> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/multi-unicorn-b44d6f8c23cdd00964192bedc38af3e82463978aa611b4365bd33a0f1f4f3e97.svg" width="24" height="24"> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="24" height="24"> </span> </span> <span class="aggregate_reactions_counter">8<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="https://dev.to/butterflycss/stop-coding-start-drawing-introducing-butterfly-css-v42-1o1j#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center"> Comments <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 1 min read </small> <span class="bm-initial"> </span> <span class="bm-success"> </span> </div> </div> </div> </div> </div> </div> butterfly css blog Sun, 19 Apr 2026 23:48:14 +0000 https://forem.com/butterflycss/-m9g https://forem.com/butterflycss/-m9g <div class="ltag__link--embedded"> <div class="crayons-story "> <a href="https://dev.to/butterflycss/earth-pro-have-a-happier-earth-with-the-best-prices-1hem" class="crayons-story__hidden-navigation-link">(Earth pro )have a happier earth with the best prices</a> <div class="crayons-story__body crayons-story__body-full_post"> <a href="https://dev.to/butterflycss/earth-pro-have-a-happier-earth-with-the-best-prices-1hem" class="crayons-article__context-note crayons-article__context-note__feed"><p>DEV Weekend Challenge: Earth Day</p> </a> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/butterflycss" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3231977%2F14dc9b58-15cc-45d7-8a19-aa363c31587f.png" alt="butterflycss profile" class="crayons-avatar__image"> </a> </div> <div> <div> <a href="/butterflycss" class="crayons-story__secondary fw-medium m:hidden"> butterfly css blog </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> butterfly css blog <div id="story-author-preview-content-3521011" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/butterflycss" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3231977%2F14dc9b58-15cc-45d7-8a19-aa363c31587f.png" class="crayons-avatar__image" alt=""> </span> <span class="crayons-link crayons-subtitle-2 mt-5">butterfly css blog</span> </a> </div> <div class="print-hidden"> Follow </div> <div class="author-preview-metadata-container"></div> </div> </div> </div> </div> <a href="https://dev.to/butterflycss/earth-pro-have-a-happier-earth-with-the-best-prices-1hem" class="crayons-story__tertiary fs-xs"><time>Apr 19</time><span class="time-ago-indicator-initial-placeholder"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title crayons-story__title-full_post"> <a href="https://dev.to/butterflycss/earth-pro-have-a-happier-earth-with-the-best-prices-1hem" id="article-link-3521011"> (Earth pro )have a happier earth with the best prices </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " href="/t/devchallenge"><span class="crayons-tag__prefix">#</span>devchallenge</a> <a class="crayons-tag crayons-tag--monochrome " href="/t/weekendchallenge"><span class="crayons-tag__prefix">#</span>weekendchallenge</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/butterflycss/earth-pro-have-a-happier-earth-with-the-best-prices-1hem" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/exploding-head-daceb38d627e6ae9b730f36a1e390fca556a4289d5a41abb2c35068ad3e2c4b5.svg" width="18" height="18"> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/multi-unicorn-b44d6f8c23cdd00964192bedc38af3e82463978aa611b4365bd33a0f1f4f3e97.svg" width="18" height="18"> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18"> </span> </span> <span class="aggregate_reactions_counter">9<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="https://dev.to/butterflycss/earth-pro-have-a-happier-earth-with-the-best-prices-1hem#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center"> Comments 2<span class="hidden s:inline"> comments</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 12 min read </small> <span class="bm-initial"> </span> <span class="bm-success"> </span> </div> </div> </div> </div> </div> </div> butterfly css blog Sun, 19 Apr 2026 23:31:30 +0000 https://forem.com/butterflycss/stop-coding-start-drawing-introducing-butterfly-css-v42-1o1j https://forem.com/butterflycss/stop-coding-start-drawing-introducing-butterfly-css-v42-1o1j <p>Hi everyone! I'm Amr Kilany, and I've always had a slightly "crazy" goal: What if we stopped coding websites and started drawing them? 🎨</p> <p>As developers, we often get bogged down in complex syntax and endless CSS rules just to make a button bounce or a layout responsive. I wanted to build a tool that makes web development feel like a digital coloring book—simple enough for a kid to use, but powerful enough for pros to launch an MVP in minutes.</p> <p>Today, I'm thrilled to introduce Butterfly CSS v4.2 on Product Hunt!</p> <p>What makes Butterfly CSS different?<br> Unlike traditional frameworks, Butterfly uses a "Magic Attribute" system. You don't write CSS; you just describe what you want directly in your HTML.</p> <p>The v4.2 update focuses on "Magic Animations":</p> <p>butterfly="fly": Instantly add high-performance particle butterflies to your site.</p> <p>handdrawn: Give your UI a unique, sketchy, hand-drawn feel.</p> <p>ball-move-1: Smooth, dynamic physics-based movements.</p> <p>birthday-paper: Celebration effects with zero effort.</p> <p>It also handles the "boring" stuff instantly:</p> <p>navbar: A fully functional navigation bar in one attribute.</p> <p>responsive: Automatic layout adjustment.</p> <p>btn=blue: Styled buttons without the boilerplate.</p> <p>Why I need your support 🚀<br> I'm an indie developer competing against big tech companies and AI agents on Product Hunt today. If you believe that the web should be more colorful, creative, and fun, I would love your support!</p> <p>We have only 11 hours left before launch! Check us out here:<br> 👉 <a href="https://www.producthunt.com/products/butterfly-css-2500-attribute-framework?launch=butterfly-css-v4-2" rel="noopener noreferrer">https://www.producthunt.com/products/butterfly-css-2500-attribute-framework?launch=butterfly-css-v4-2</a></p> <p>Explore the Docs:<br> 🔗 <a href="https://butterfly-css.netlify.app/" rel="noopener noreferrer">https://butterfly-css.netlify.app/</a></p> css animation vibecoding webdev