erp-pro-ui 0.1.3 → 0.1.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/dist/accordion.cjs +1 -1
- package/dist/accordion.mjs +1 -1
- package/dist/alert.cjs +1 -1
- package/dist/alert.mjs +1 -1
- package/dist/animated-content.cjs +1 -1
- package/dist/animated-content.mjs +1 -1
- package/dist/animations.css +40 -0
- package/dist/ascii-text.cjs +1 -1
- package/dist/ascii-text.mjs +1 -1
- package/dist/background-gradient-animation.cjs +1 -1
- package/dist/background-gradient-animation.mjs +1 -1
- package/dist/button-hover-border-gradient.cjs +1 -1
- package/dist/button-hover-border-gradient.mjs +1 -1
- package/dist/button.cjs +1 -1
- package/dist/button.mjs +1 -1
- package/dist/calendar.cjs +1 -1
- package/dist/calendar.mjs +1 -1
- package/dist/card.cjs +1 -1
- package/dist/card.mjs +1 -1
- package/dist/carousel.cjs +1 -1
- package/dist/carousel.mjs +1 -1
- package/dist/catalog.cjs +6 -0
- package/dist/catalog.cjs.map +1 -1
- package/dist/catalog.d.ts +11 -1
- package/dist/catalog.d.ts.map +1 -1
- package/dist/catalog.mjs +6 -0
- package/dist/catalog.mjs.map +1 -1
- package/dist/charts.cjs +1 -1
- package/dist/charts.mjs +1 -1
- package/dist/checkbox.cjs +1 -1
- package/dist/checkbox.mjs +1 -1
- package/dist/chip.cjs +1 -1
- package/dist/chip.mjs +1 -1
- package/dist/chroma-grid.cjs +1 -1
- package/dist/chroma-grid.mjs +1 -1
- package/dist/chunks/{HoverBorderGradient-DVFEIXFQ.mjs → HoverBorderGradient-DYXhtPWs.mjs} +1 -1
- package/dist/chunks/{HoverBorderGradient-DVFEIXFQ.mjs.map → HoverBorderGradient-DYXhtPWs.mjs.map} +1 -1
- package/dist/chunks/{HoverBorderGradient-Df3PKpw6.cjs → HoverBorderGradient-DaduPpj-.cjs} +1 -1
- package/dist/chunks/{HoverBorderGradient-Df3PKpw6.cjs.map → HoverBorderGradient-DaduPpj-.cjs.map} +1 -1
- package/dist/chunks/{accordion-pfJR8YYA.cjs → accordion-CxJYq_6x.cjs} +2 -2
- package/dist/chunks/{accordion-pfJR8YYA.cjs.map → accordion-CxJYq_6x.cjs.map} +1 -1
- package/dist/chunks/{accordion-Cbt-SJhj.mjs → accordion-Dwm6yH0C.mjs} +2 -2
- package/dist/chunks/{accordion-Cbt-SJhj.mjs.map → accordion-Dwm6yH0C.mjs.map} +1 -1
- package/dist/chunks/{alert-CtdLy4Hv.mjs → alert-BJWReBBk.mjs} +2 -2
- package/dist/chunks/{alert-CtdLy4Hv.mjs.map → alert-BJWReBBk.mjs.map} +1 -1
- package/dist/chunks/{alert-Dvz1GoL5.cjs → alert-Cc-jD7qn.cjs} +2 -2
- package/dist/chunks/{alert-Dvz1GoL5.cjs.map → alert-Cc-jD7qn.cjs.map} +1 -1
- package/dist/chunks/{animated-content-CttSmLWV.cjs → animated-content-CLsFnjgr.cjs} +1 -1
- package/dist/chunks/{animated-content-CttSmLWV.cjs.map → animated-content-CLsFnjgr.cjs.map} +1 -1
- package/dist/chunks/{animated-content-C1uNg1xO.mjs → animated-content-bK6xp-vc.mjs} +1 -1
- package/dist/chunks/{animated-content-C1uNg1xO.mjs.map → animated-content-bK6xp-vc.mjs.map} +1 -1
- package/dist/chunks/{ascii-text-DlmArZXh.cjs → ascii-text-Bh4HjIrL.cjs} +1 -1
- package/dist/chunks/{ascii-text-DlmArZXh.cjs.map → ascii-text-Bh4HjIrL.cjs.map} +1 -1
- package/dist/chunks/{ascii-text-C5tyNsR3.mjs → ascii-text-RJxX3wCC.mjs} +1 -1
- package/dist/chunks/{ascii-text-C5tyNsR3.mjs.map → ascii-text-RJxX3wCC.mjs.map} +1 -1
- package/dist/chunks/{background-gradient-animation-BL-lnrJe.mjs → background-gradient-animation-BNztOaAL.mjs} +1 -1
- package/dist/chunks/{background-gradient-animation-BL-lnrJe.mjs.map → background-gradient-animation-BNztOaAL.mjs.map} +1 -1
- package/dist/chunks/{background-gradient-animation-CXV9GDH8.cjs → background-gradient-animation-C0jV3b6l.cjs} +1 -1
- package/dist/chunks/{background-gradient-animation-CXV9GDH8.cjs.map → background-gradient-animation-C0jV3b6l.cjs.map} +1 -1
- package/dist/chunks/{button-B0Lhj0AS.mjs → button-NwWcZaCl.mjs} +5 -4
- package/dist/chunks/button-NwWcZaCl.mjs.map +1 -0
- package/dist/chunks/{button-hover-border-gradient-CSHXM5Cm.cjs → button-hover-border-gradient-B_JuE939.cjs} +2 -2
- package/dist/chunks/{button-hover-border-gradient-CSHXM5Cm.cjs.map → button-hover-border-gradient-B_JuE939.cjs.map} +1 -1
- package/dist/chunks/{button-hover-border-gradient-CvoM60wz.mjs → button-hover-border-gradient-TmQPZyYW.mjs} +2 -2
- package/dist/chunks/{button-hover-border-gradient-CvoM60wz.mjs.map → button-hover-border-gradient-TmQPZyYW.mjs.map} +1 -1
- package/dist/chunks/{button-CZL6kFzT.cjs → button-sVzhc451.cjs} +5 -4
- package/dist/chunks/button-sVzhc451.cjs.map +1 -0
- package/dist/chunks/{calendar-Cpp_Rc7T.cjs → calendar-B8yy-7Se.cjs} +2 -2
- package/dist/chunks/{calendar-Cpp_Rc7T.cjs.map → calendar-B8yy-7Se.cjs.map} +1 -1
- package/dist/chunks/{calendar-DrCgT_pj.mjs → calendar-wZGU7o1B.mjs} +2 -2
- package/dist/chunks/{calendar-DrCgT_pj.mjs.map → calendar-wZGU7o1B.mjs.map} +1 -1
- package/dist/chunks/{card-Dh8wNv8N.mjs → card-BOTJSO1o.mjs} +1 -1
- package/dist/chunks/{card-Dh8wNv8N.mjs.map → card-BOTJSO1o.mjs.map} +1 -1
- package/dist/chunks/{card-C5_tFK6Q.cjs → card-CAzOcjaC.cjs} +1 -1
- package/dist/chunks/{card-C5_tFK6Q.cjs.map → card-CAzOcjaC.cjs.map} +1 -1
- package/dist/chunks/{carousel-BYwqI4cA.mjs → carousel-BCMk0v5p.mjs} +2 -2
- package/dist/chunks/{carousel-BYwqI4cA.mjs.map → carousel-BCMk0v5p.mjs.map} +1 -1
- package/dist/chunks/{carousel-C1338X8h.cjs → carousel-Crpz33XV.cjs} +2 -2
- package/dist/chunks/{carousel-C1338X8h.cjs.map → carousel-Crpz33XV.cjs.map} +1 -1
- package/dist/chunks/{charts-BYvM4TMG.mjs → charts-9OPShAea.mjs} +5 -2
- package/dist/chunks/charts-9OPShAea.mjs.map +1 -0
- package/dist/chunks/{charts-DbxyHtlX.cjs → charts-D1pdxSiu.cjs} +5 -2
- package/dist/chunks/charts-D1pdxSiu.cjs.map +1 -0
- package/dist/chunks/{checkbox-CxOcjoGP.cjs → checkbox-BakVQmue.cjs} +1 -1
- package/dist/chunks/{checkbox-CxOcjoGP.cjs.map → checkbox-BakVQmue.cjs.map} +1 -1
- package/dist/chunks/{checkbox-Pr49U9F1.mjs → checkbox-C9NrpH_Q.mjs} +1 -1
- package/dist/chunks/{checkbox-Pr49U9F1.mjs.map → checkbox-C9NrpH_Q.mjs.map} +1 -1
- package/dist/chunks/{chip-DdnBLdpl.mjs → chip-BN0aOUa-.mjs} +7 -4
- package/dist/chunks/chip-BN0aOUa-.mjs.map +1 -0
- package/dist/chunks/{chip-B4ol1yPk.cjs → chip-Dc2Sm3Ng.cjs} +7 -4
- package/dist/chunks/chip-Dc2Sm3Ng.cjs.map +1 -0
- package/dist/chunks/{chroma-grid-CIk0dsNS.cjs → chroma-grid-8p5tntYr.cjs} +1 -1
- package/dist/chunks/{chroma-grid-CIk0dsNS.cjs.map → chroma-grid-8p5tntYr.cjs.map} +1 -1
- package/dist/chunks/{chroma-grid-BAo6V5A7.mjs → chroma-grid-BF9SlWxA.mjs} +1 -1
- package/dist/chunks/{chroma-grid-BAo6V5A7.mjs.map → chroma-grid-BF9SlWxA.mjs.map} +1 -1
- package/dist/chunks/{color-palette-euKQMWlV.mjs → color-palette-CJEiZCtr.mjs} +1 -1
- package/dist/chunks/{color-palette-euKQMWlV.mjs.map → color-palette-CJEiZCtr.mjs.map} +1 -1
- package/dist/chunks/{color-palette-2TuEMkAn.cjs → color-palette-DWtgsI3u.cjs} +1 -1
- package/dist/chunks/{color-palette-2TuEMkAn.cjs.map → color-palette-DWtgsI3u.cjs.map} +1 -1
- package/dist/chunks/{combobox-CwGubKTt.cjs → combobox-BXFmUNQt.cjs} +17 -9
- package/dist/chunks/combobox-BXFmUNQt.cjs.map +1 -0
- package/dist/chunks/{combobox-DrFmkI0F.mjs → combobox-ietfKkAW.mjs} +17 -9
- package/dist/chunks/combobox-ietfKkAW.mjs.map +1 -0
- package/dist/chunks/{data-table-W1sK5tkL.cjs → data-table-DlqjTYiB.cjs} +31 -25
- package/dist/chunks/data-table-DlqjTYiB.cjs.map +1 -0
- package/dist/chunks/{data-table-Bo80m7qV.mjs → data-table-Dw0QFNh7.mjs} +31 -25
- package/dist/chunks/data-table-Dw0QFNh7.mjs.map +1 -0
- package/dist/chunks/{date-picker-CZo68Fkl.cjs → date-picker-BMZV5HGM.cjs} +2 -2
- package/dist/chunks/{date-picker-CZo68Fkl.cjs.map → date-picker-BMZV5HGM.cjs.map} +1 -1
- package/dist/chunks/{date-picker-CNPORxhv.mjs → date-picker-CvH7zGtP.mjs} +2 -2
- package/dist/chunks/{date-picker-CNPORxhv.mjs.map → date-picker-CvH7zGtP.mjs.map} +1 -1
- package/dist/chunks/{dialog-DUWnV9tN.mjs → dialog-BZst9i2z.mjs} +10 -5
- package/dist/chunks/dialog-BZst9i2z.mjs.map +1 -0
- package/dist/chunks/{dialog-CYFiWN8M.cjs → dialog-DScyxkX9.cjs} +10 -5
- package/dist/chunks/dialog-DScyxkX9.cjs.map +1 -0
- package/dist/chunks/{drawer-D82Jz6KO.mjs → drawer-B0V7RUHx.mjs} +2 -2
- package/dist/chunks/{drawer-D82Jz6KO.mjs.map → drawer-B0V7RUHx.mjs.map} +1 -1
- package/dist/chunks/{drawer-CLjsYdxN.cjs → drawer-B_x2aMuz.cjs} +2 -2
- package/dist/chunks/{drawer-CLjsYdxN.cjs.map → drawer-B_x2aMuz.cjs.map} +1 -1
- package/dist/chunks/{form-CzH9GQc6.cjs → form-CU_CjV-_.cjs} +1 -1
- package/dist/chunks/{form-CzH9GQc6.cjs.map → form-CU_CjV-_.cjs.map} +1 -1
- package/dist/chunks/{form-B2vcaHwh.mjs → form-D-vLjhyP.mjs} +1 -1
- package/dist/chunks/{form-B2vcaHwh.mjs.map → form-D-vLjhyP.mjs.map} +1 -1
- package/dist/chunks/{gradual-blur-Bl3dOMEz.mjs → gradual-blur-BCLuZlHC.mjs} +1 -1
- package/dist/chunks/{gradual-blur-Bl3dOMEz.mjs.map → gradual-blur-BCLuZlHC.mjs.map} +1 -1
- package/dist/chunks/{gradual-blur-B9GoY8o1.cjs → gradual-blur-amCnDPlg.cjs} +1 -1
- package/dist/chunks/{gradual-blur-B9GoY8o1.cjs.map → gradual-blur-amCnDPlg.cjs.map} +1 -1
- package/dist/chunks/{hover-card-v0QwmVBU.cjs → hover-card-CjL7A_V7.cjs} +1 -1
- package/dist/chunks/{hover-card-v0QwmVBU.cjs.map → hover-card-CjL7A_V7.cjs.map} +1 -1
- package/dist/chunks/{hover-card-xqwpmZNm.mjs → hover-card-D5Plwh1g.mjs} +1 -1
- package/dist/chunks/{hover-card-xqwpmZNm.mjs.map → hover-card-D5Plwh1g.mjs.map} +1 -1
- package/dist/chunks/{icons-DuumN7z-.mjs → icons-BquccnYa.mjs} +1 -1
- package/dist/chunks/{icons-DuumN7z-.mjs.map → icons-BquccnYa.mjs.map} +1 -1
- package/dist/chunks/{icons-BxIzP2jd.cjs → icons-CaNIzMf3.cjs} +1 -1
- package/dist/chunks/{icons-BxIzP2jd.cjs.map → icons-CaNIzMf3.cjs.map} +1 -1
- package/dist/chunks/{input-Bt_r_B_c.mjs → input-CS0g1cov.mjs} +1 -1
- package/dist/chunks/{input-Bt_r_B_c.mjs.map → input-CS0g1cov.mjs.map} +1 -1
- package/dist/chunks/{input-BWM6G7jq.cjs → input-DuoEJayD.cjs} +1 -1
- package/dist/chunks/{input-BWM6G7jq.cjs.map → input-DuoEJayD.cjs.map} +1 -1
- package/dist/chunks/{label-KPA-yYOF.mjs → label-B03C78Le.mjs} +1 -1
- package/dist/chunks/{label-KPA-yYOF.mjs.map → label-B03C78Le.mjs.map} +1 -1
- package/dist/chunks/{label-BWPEGVam.cjs → label-Bw5HtTED.cjs} +1 -1
- package/dist/chunks/{label-BWPEGVam.cjs.map → label-Bw5HtTED.cjs.map} +1 -1
- package/dist/chunks/{loading-S1TdIrbB.mjs → loading-BSfQsGC5.mjs} +2 -2
- package/dist/chunks/{loading-S1TdIrbB.mjs.map → loading-BSfQsGC5.mjs.map} +1 -1
- package/dist/chunks/{loading-q7IEg56I.cjs → loading-DrYIq0x8.cjs} +2 -2
- package/dist/chunks/{loading-q7IEg56I.cjs.map → loading-DrYIq0x8.cjs.map} +1 -1
- package/dist/chunks/{multi-select-combobox-D46M-AN9.mjs → multi-select-combobox-K05MPFbH.mjs} +2 -2
- package/dist/chunks/{multi-select-combobox-D46M-AN9.mjs.map → multi-select-combobox-K05MPFbH.mjs.map} +1 -1
- package/dist/chunks/{multi-select-combobox-dS6bJE_e.cjs → multi-select-combobox-k4_oScfn.cjs} +2 -2
- package/dist/chunks/{multi-select-combobox-dS6bJE_e.cjs.map → multi-select-combobox-k4_oScfn.cjs.map} +1 -1
- package/dist/chunks/{otp-input-DSW9Ca_D.cjs → otp-input-B8eJz1Lq.cjs} +1 -1
- package/dist/chunks/{otp-input-DSW9Ca_D.cjs.map → otp-input-B8eJz1Lq.cjs.map} +1 -1
- package/dist/chunks/{otp-input-DeAi4nJ_.mjs → otp-input-rtXD2QuM.mjs} +1 -1
- package/dist/chunks/{otp-input-DeAi4nJ_.mjs.map → otp-input-rtXD2QuM.mjs.map} +1 -1
- package/dist/chunks/{overlay-TycCIFOu.mjs → overlay-BCTPOEe8.mjs} +1 -1
- package/dist/chunks/{overlay-TycCIFOu.mjs.map → overlay-BCTPOEe8.mjs.map} +1 -1
- package/dist/chunks/{overlay-DWNTyQzK.cjs → overlay-De79_3r2.cjs} +1 -1
- package/dist/chunks/{overlay-DWNTyQzK.cjs.map → overlay-De79_3r2.cjs.map} +1 -1
- package/dist/chunks/{password-strength-meter-CbNSBuh_.mjs → password-strength-meter-DOsRacP5.mjs} +2 -2
- package/dist/chunks/{password-strength-meter-CbNSBuh_.mjs.map → password-strength-meter-DOsRacP5.mjs.map} +1 -1
- package/dist/chunks/{password-strength-meter-DxMV6GAs.cjs → password-strength-meter-DkVmfmn3.cjs} +2 -2
- package/dist/chunks/{password-strength-meter-DxMV6GAs.cjs.map → password-strength-meter-DkVmfmn3.cjs.map} +1 -1
- package/dist/chunks/{progress-bar-BdvQtpm3.cjs → progress-bar-BXFJbnIc.cjs} +1 -1
- package/dist/chunks/{progress-bar-BdvQtpm3.cjs.map → progress-bar-BXFJbnIc.cjs.map} +1 -1
- package/dist/chunks/{progress-bar-B9sy7WBT.mjs → progress-bar-RwwgUpK7.mjs} +1 -1
- package/dist/chunks/{progress-bar-B9sy7WBT.mjs.map → progress-bar-RwwgUpK7.mjs.map} +1 -1
- package/dist/chunks/{radio-jMHDvaMY.cjs → radio-fIdlXx0f.cjs} +1 -1
- package/dist/chunks/{radio-jMHDvaMY.cjs.map → radio-fIdlXx0f.cjs.map} +1 -1
- package/dist/chunks/{radio-C9w_CoiY.mjs → radio-xi4BJVgm.mjs} +1 -1
- package/dist/chunks/{radio-C9w_CoiY.mjs.map → radio-xi4BJVgm.mjs.map} +1 -1
- package/dist/chunks/{select-CCUSMvfS.cjs → select-BOer92kh.cjs} +14 -8
- package/dist/chunks/select-BOer92kh.cjs.map +1 -0
- package/dist/chunks/{select-B8UQ6Uq5.mjs → select-RierVpX6.mjs} +14 -8
- package/dist/chunks/select-RierVpX6.mjs.map +1 -0
- package/dist/chunks/skeleton-9q1lJV-B.cjs +422 -0
- package/dist/chunks/skeleton-9q1lJV-B.cjs.map +1 -0
- package/dist/chunks/skeleton-DGzckoX9.mjs +368 -0
- package/dist/chunks/skeleton-DGzckoX9.mjs.map +1 -0
- package/dist/chunks/{spinners-BBCWD2gw.mjs → spinners-ZtY-P7u5.mjs} +2 -2
- package/dist/chunks/{spinners-BBCWD2gw.mjs.map → spinners-ZtY-P7u5.mjs.map} +1 -1
- package/dist/chunks/{spinners-BL4ERCCw.cjs → spinners-q0aJJ90t.cjs} +2 -2
- package/dist/chunks/{spinners-BL4ERCCw.cjs.map → spinners-q0aJJ90t.cjs.map} +1 -1
- package/dist/chunks/{splash-cursor-rSrTnawZ.mjs → splash-cursor-BKSeGbZk.mjs} +1 -1
- package/dist/chunks/{splash-cursor-rSrTnawZ.mjs.map → splash-cursor-BKSeGbZk.mjs.map} +1 -1
- package/dist/chunks/{splash-cursor-BVSmbcIX.cjs → splash-cursor-Dw2zyPTf.cjs} +1 -1
- package/dist/chunks/{splash-cursor-BVSmbcIX.cjs.map → splash-cursor-Dw2zyPTf.cjs.map} +1 -1
- package/dist/chunks/{spotlight-card-DS1dy1W3.cjs → spotlight-card-BYF6TQ-U.cjs} +1 -1
- package/dist/chunks/{spotlight-card-DS1dy1W3.cjs.map → spotlight-card-BYF6TQ-U.cjs.map} +1 -1
- package/dist/chunks/{spotlight-card-BpZLMOp6.mjs → spotlight-card-kU-Y9bok.mjs} +1 -1
- package/dist/chunks/{spotlight-card-BpZLMOp6.mjs.map → spotlight-card-kU-Y9bok.mjs.map} +1 -1
- package/dist/chunks/{stepper-D6qQbZdg.cjs → stepper-6vnY3bgc.cjs} +178 -95
- package/dist/chunks/stepper-6vnY3bgc.cjs.map +1 -0
- package/dist/chunks/{stepper-DUknuW2E.mjs → stepper-sjBOMByt.mjs} +179 -96
- package/dist/chunks/stepper-sjBOMByt.mjs.map +1 -0
- package/dist/chunks/{sun-to-moon-button-BmFwRBye.cjs → sun-to-moon-button-CB_Tkz5X.cjs} +1 -1
- package/dist/chunks/{sun-to-moon-button-BmFwRBye.cjs.map → sun-to-moon-button-CB_Tkz5X.cjs.map} +1 -1
- package/dist/chunks/{sun-to-moon-button-B2Aje05o.mjs → sun-to-moon-button-DvlHYqmk.mjs} +1 -1
- package/dist/chunks/{sun-to-moon-button-B2Aje05o.mjs.map → sun-to-moon-button-DvlHYqmk.mjs.map} +1 -1
- package/dist/chunks/{switch-DOVl_i_s.mjs → switch-BBg9E9Wa.mjs} +1 -1
- package/dist/chunks/{switch-DOVl_i_s.mjs.map → switch-BBg9E9Wa.mjs.map} +1 -1
- package/dist/chunks/{switch-C5otDb4c.cjs → switch-CJurCzZO.cjs} +1 -1
- package/dist/chunks/{switch-C5otDb4c.cjs.map → switch-CJurCzZO.cjs.map} +1 -1
- package/dist/chunks/{textarea-Blky_fLK.mjs → textarea-BEIHilZr.mjs} +1 -1
- package/dist/chunks/{textarea-Blky_fLK.mjs.map → textarea-BEIHilZr.mjs.map} +1 -1
- package/dist/chunks/{textarea-ok_NlE2p.cjs → textarea-C2T9xqFe.cjs} +1 -1
- package/dist/chunks/{textarea-ok_NlE2p.cjs.map → textarea-C2T9xqFe.cjs.map} +1 -1
- package/dist/chunks/{toast-CvfP7PUP.mjs → toast-7HcN4-uL.mjs} +2 -2
- package/dist/chunks/{toast-CvfP7PUP.mjs.map → toast-7HcN4-uL.mjs.map} +1 -1
- package/dist/chunks/{toast-Ds7_19Ap.cjs → toast-B-mjpllA.cjs} +2 -2
- package/dist/chunks/{toast-Ds7_19Ap.cjs.map → toast-B-mjpllA.cjs.map} +1 -1
- package/dist/chunks/{tooltip-nkIqViGk.cjs → tooltip-CHQwSgOT.cjs} +1 -1
- package/dist/chunks/{tooltip-nkIqViGk.cjs.map → tooltip-CHQwSgOT.cjs.map} +1 -1
- package/dist/chunks/{tooltip-efHETBo1.mjs → tooltip-DMcXN6Ff.mjs} +1 -1
- package/dist/chunks/{tooltip-efHETBo1.mjs.map → tooltip-DMcXN6Ff.mjs.map} +1 -1
- package/dist/chunks/truncated-text-Bt0IAgjp.cjs +52 -0
- package/dist/chunks/truncated-text-Bt0IAgjp.cjs.map +1 -0
- package/dist/chunks/truncated-text-DTgks5yS.mjs +45 -0
- package/dist/chunks/truncated-text-DTgks5yS.mjs.map +1 -0
- package/dist/chunks/{typography-CLu6Hx9j.mjs → typography-BddjVdZH.mjs} +1 -1
- package/dist/chunks/{typography-CLu6Hx9j.mjs.map → typography-BddjVdZH.mjs.map} +1 -1
- package/dist/chunks/{typography-DaLu9tty.cjs → typography-DLGuS_eJ.cjs} +1 -1
- package/dist/chunks/{typography-DaLu9tty.cjs.map → typography-DLGuS_eJ.cjs.map} +1 -1
- package/dist/color-palette.cjs +1 -1
- package/dist/color-palette.mjs +1 -1
- package/dist/combobox.cjs +1 -1
- package/dist/combobox.mjs +1 -1
- package/dist/components/data-display/charts/ThinBreakdownBar.d.ts.map +1 -1
- package/dist/components/data-display/chip/Chip.d.ts.map +1 -1
- package/dist/components/data-display/data-table/DataTable.d.ts.map +1 -1
- package/dist/components/data-display/skeleton/Skeleton.d.ts +32 -5
- package/dist/components/data-display/skeleton/Skeleton.d.ts.map +1 -1
- package/dist/components/data-display/skeleton/index.d.ts +2 -2
- package/dist/components/data-display/skeleton/index.d.ts.map +1 -1
- package/dist/components/forms/button/Button.d.ts +1 -1
- package/dist/components/forms/button/Button.d.ts.map +1 -1
- package/dist/components/forms/button/index.d.ts +1 -1
- package/dist/components/forms/button/index.d.ts.map +1 -1
- package/dist/components/forms/button/types.d.ts +4 -1
- package/dist/components/forms/button/types.d.ts.map +1 -1
- package/dist/components/forms/combobox/Combobox.d.ts.map +1 -1
- package/dist/components/forms/select/Select.d.ts.map +1 -1
- package/dist/components/navigation/stepper/Stepper.d.ts +1 -1
- package/dist/components/navigation/stepper/Stepper.d.ts.map +1 -1
- package/dist/components/navigation/stepper/Stepper1.d.ts.map +1 -1
- package/dist/components/navigation/stepper/index.d.ts +1 -1
- package/dist/components/navigation/stepper/index.d.ts.map +1 -1
- package/dist/components/navigation/stepper/types.d.ts +3 -0
- package/dist/components/navigation/stepper/types.d.ts.map +1 -1
- package/dist/components/overlays/dialog/Dialog.d.ts.map +1 -1
- package/dist/components/overlays/dialog/types.d.ts +1 -0
- package/dist/components/overlays/dialog/types.d.ts.map +1 -1
- package/dist/components/shared/overlay.d.ts +1 -1
- package/dist/components/typography/truncated-text/TruncatedText.d.ts +11 -0
- package/dist/components/typography/truncated-text/TruncatedText.d.ts.map +1 -0
- package/dist/components/typography/truncated-text/index.d.ts +3 -0
- package/dist/components/typography/truncated-text/index.d.ts.map +1 -0
- package/dist/data-table.cjs +1 -1
- package/dist/data-table.mjs +1 -1
- package/dist/date-picker.cjs +1 -1
- package/dist/date-picker.mjs +1 -1
- package/dist/dialog.cjs +1 -1
- package/dist/dialog.mjs +1 -1
- package/dist/docs.cjs +69 -21
- package/dist/docs.cjs.map +1 -1
- package/dist/docs.d.ts.map +1 -1
- package/dist/docs.mjs +69 -21
- package/dist/docs.mjs.map +1 -1
- package/dist/drawer.cjs +1 -1
- package/dist/drawer.mjs +1 -1
- package/dist/form.cjs +1 -1
- package/dist/form.mjs +1 -1
- package/dist/foundation.css +51 -0
- package/dist/gradual-blur.cjs +1 -1
- package/dist/gradual-blur.mjs +1 -1
- package/dist/hover-border-gradient.cjs +1 -1
- package/dist/hover-border-gradient.mjs +1 -1
- package/dist/hover-card.cjs +1 -1
- package/dist/hover-card.mjs +1 -1
- package/dist/icons.cjs +1 -1
- package/dist/icons.mjs +1 -1
- package/dist/index.cjs +59 -45
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +6 -2
- package/dist/index.d.ts.map +1 -1
- package/dist/index.mjs +47 -46
- package/dist/index.mjs.map +1 -1
- package/dist/input.cjs +1 -1
- package/dist/input.mjs +1 -1
- package/dist/label.cjs +1 -1
- package/dist/label.mjs +1 -1
- package/dist/loading.cjs +1 -1
- package/dist/loading.mjs +1 -1
- package/dist/multi-select-combobox.cjs +1 -1
- package/dist/multi-select-combobox.mjs +1 -1
- package/dist/otp-input.cjs +1 -1
- package/dist/otp-input.mjs +1 -1
- package/dist/password-strength-meter.cjs +1 -1
- package/dist/password-strength-meter.mjs +1 -1
- package/dist/progress-bar.cjs +1 -1
- package/dist/progress-bar.mjs +1 -1
- package/dist/radio.cjs +1 -1
- package/dist/radio.mjs +1 -1
- package/dist/select.cjs +1 -1
- package/dist/select.mjs +1 -1
- package/dist/skeleton.cjs +9 -1
- package/dist/skeleton.mjs +2 -2
- package/dist/spinners.cjs +1 -1
- package/dist/spinners.mjs +1 -1
- package/dist/splash-cursor.cjs +1 -1
- package/dist/splash-cursor.mjs +1 -1
- package/dist/spotlight-card.cjs +1 -1
- package/dist/spotlight-card.mjs +1 -1
- package/dist/stepper.cjs +1 -1
- package/dist/stepper.mjs +1 -1
- package/dist/sun-to-moon-button.cjs +1 -1
- package/dist/sun-to-moon-button.mjs +1 -1
- package/dist/switch.cjs +1 -1
- package/dist/switch.mjs +1 -1
- package/dist/textarea.cjs +1 -1
- package/dist/textarea.mjs +1 -1
- package/dist/toast.cjs +1 -1
- package/dist/toast.mjs +1 -1
- package/dist/tooltip.cjs +1 -1
- package/dist/tooltip.mjs +1 -1
- package/dist/truncated-text.cjs +3 -0
- package/dist/truncated-text.d.ts +2 -0
- package/dist/truncated-text.mjs +2 -0
- package/dist/typography.cjs +1 -1
- package/dist/typography.mjs +1 -1
- package/package.json +13 -7
- package/dist/chunks/button-B0Lhj0AS.mjs.map +0 -1
- package/dist/chunks/button-CZL6kFzT.cjs.map +0 -1
- package/dist/chunks/charts-BYvM4TMG.mjs.map +0 -1
- package/dist/chunks/charts-DbxyHtlX.cjs.map +0 -1
- package/dist/chunks/chip-B4ol1yPk.cjs.map +0 -1
- package/dist/chunks/chip-DdnBLdpl.mjs.map +0 -1
- package/dist/chunks/combobox-CwGubKTt.cjs.map +0 -1
- package/dist/chunks/combobox-DrFmkI0F.mjs.map +0 -1
- package/dist/chunks/data-table-Bo80m7qV.mjs.map +0 -1
- package/dist/chunks/data-table-W1sK5tkL.cjs.map +0 -1
- package/dist/chunks/dialog-CYFiWN8M.cjs.map +0 -1
- package/dist/chunks/dialog-DUWnV9tN.mjs.map +0 -1
- package/dist/chunks/select-B8UQ6Uq5.mjs.map +0 -1
- package/dist/chunks/select-CCUSMvfS.cjs.map +0 -1
- package/dist/chunks/skeleton-BhYWOp0Q.mjs +0 -215
- package/dist/chunks/skeleton-BhYWOp0Q.mjs.map +0 -1
- package/dist/chunks/skeleton-DTXpHYYB.cjs +0 -221
- package/dist/chunks/skeleton-DTXpHYYB.cjs.map +0 -1
- package/dist/chunks/stepper-D6qQbZdg.cjs.map +0 -1
- package/dist/chunks/stepper-DUknuW2E.mjs.map +0 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { u as InfoCircleIcon } from "./icons-
|
|
1
|
+
import { u as InfoCircleIcon } from "./icons-BquccnYa.mjs";
|
|
2
2
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
3
|
//#region src/components/feedback/alert/Alert.tsx
|
|
4
4
|
var variantClasses = {
|
|
@@ -37,4 +37,4 @@ var Alert = ({ title, description, icon = defaultIcon, variant = "info", classNa
|
|
|
37
37
|
//#endregion
|
|
38
38
|
export { Alert as t };
|
|
39
39
|
|
|
40
|
-
//# sourceMappingURL=alert-
|
|
40
|
+
//# sourceMappingURL=alert-BJWReBBk.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"alert-
|
|
1
|
+
{"version":3,"file":"alert-BJWReBBk.mjs","names":[],"sources":["../../src/components/feedback/alert/Alert.tsx"],"sourcesContent":["import { InfoCircleIcon } from \"../../icons\";\nimport type { AlertProps } from \"./types\";\n\nconst variantClasses: Record<NonNullable<AlertProps[\"variant\"]>, string> = {\n info: \"border-info-border bg-info-subtle\",\n success: \"border-success-border bg-success-subtle\",\n warning: \"border-warning-border bg-warning-subtle\",\n destructive: \"border-danger-border bg-danger-subtle\",\n};\n\nconst defaultIcon = <InfoCircleIcon className=\"h-5 w-5\" aria-hidden=\"true\" />;\n\nexport const Alert = ({\n title,\n description,\n icon = defaultIcon,\n variant = \"info\",\n className = \"\",\n children,\n}: AlertProps) => {\n const classes =\n `flex gap-3 rounded-lg border p-4 text-sm text-foreground ${variantClasses[variant]}`\n .concat(\" \", className)\n .trim();\n\n return (\n <div\n className={classes}\n role={variant === \"destructive\" ? \"alert\" : \"status\"}\n >\n <span className=\"text-heading\">{icon}</span>\n <div className=\"space-y-1\">\n {title && <p className=\"text-base font-medium text-heading\">{title}</p>}\n {description && <p className=\"text-muted-foreground\">{description}</p>}\n {children}\n </div>\n </div>\n );\n};\n"],"mappings":";;;AAGA,IAAM,iBAAqE;CACzE,MAAM;CACN,SAAS;CACT,SAAS;CACT,aAAa;CACd;AAED,IAAM,cAAc,oBAAC,gBAAD;CAAgB,WAAU;CAAU,eAAY;CAAS,CAAA;AAE7E,IAAa,SAAS,EACpB,OACA,aACA,OAAO,aACP,UAAU,QACV,YAAY,IACZ,eACgB;AAMhB,QACE,qBAAC,OAAD;EACE,WANF,4DAA4D,eAAe,WACxE,OAAO,KAAK,UAAU,CACtB,MAAM;EAKP,MAAM,YAAY,gBAAgB,UAAU;YAF9C,CAIE,oBAAC,QAAD;GAAM,WAAU;aAAgB;GAAY,CAAA,EAC5C,qBAAC,OAAD;GAAK,WAAU;aAAf;IACG,SAAS,oBAAC,KAAD;KAAG,WAAU;eAAsC;KAAU,CAAA;IACtE,eAAe,oBAAC,KAAD;KAAG,WAAU;eAAyB;KAAgB,CAAA;IACrE;IACG;KACF"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
require("./chunk-B_GkZjkl.cjs");
|
|
2
|
-
const require_icons = require("./icons-
|
|
2
|
+
const require_icons = require("./icons-CaNIzMf3.cjs");
|
|
3
3
|
let react_jsx_runtime = require("react/jsx-runtime");
|
|
4
4
|
//#region src/components/feedback/alert/Alert.tsx
|
|
5
5
|
var variantClasses = {
|
|
@@ -43,4 +43,4 @@ Object.defineProperty(exports, "Alert", {
|
|
|
43
43
|
}
|
|
44
44
|
});
|
|
45
45
|
|
|
46
|
-
//# sourceMappingURL=alert-
|
|
46
|
+
//# sourceMappingURL=alert-Cc-jD7qn.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"alert-
|
|
1
|
+
{"version":3,"file":"alert-Cc-jD7qn.cjs","names":[],"sources":["../../src/components/feedback/alert/Alert.tsx"],"sourcesContent":["import { InfoCircleIcon } from \"../../icons\";\nimport type { AlertProps } from \"./types\";\n\nconst variantClasses: Record<NonNullable<AlertProps[\"variant\"]>, string> = {\n info: \"border-info-border bg-info-subtle\",\n success: \"border-success-border bg-success-subtle\",\n warning: \"border-warning-border bg-warning-subtle\",\n destructive: \"border-danger-border bg-danger-subtle\",\n};\n\nconst defaultIcon = <InfoCircleIcon className=\"h-5 w-5\" aria-hidden=\"true\" />;\n\nexport const Alert = ({\n title,\n description,\n icon = defaultIcon,\n variant = \"info\",\n className = \"\",\n children,\n}: AlertProps) => {\n const classes =\n `flex gap-3 rounded-lg border p-4 text-sm text-foreground ${variantClasses[variant]}`\n .concat(\" \", className)\n .trim();\n\n return (\n <div\n className={classes}\n role={variant === \"destructive\" ? \"alert\" : \"status\"}\n >\n <span className=\"text-heading\">{icon}</span>\n <div className=\"space-y-1\">\n {title && <p className=\"text-base font-medium text-heading\">{title}</p>}\n {description && <p className=\"text-muted-foreground\">{description}</p>}\n {children}\n </div>\n </div>\n );\n};\n"],"mappings":";;;;AAGA,IAAM,iBAAqE;CACzE,MAAM;CACN,SAAS;CACT,SAAS;CACT,aAAa;CACd;AAED,IAAM,cAAc,iBAAA,GAAA,kBAAA,KAAC,cAAA,gBAAD;CAAgB,WAAU;CAAU,eAAY;CAAS,CAAA;AAE7E,IAAa,SAAS,EACpB,OACA,aACA,OAAO,aACP,UAAU,QACV,YAAY,IACZ,eACgB;AAMhB,QACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EACE,WANF,4DAA4D,eAAe,WACxE,OAAO,KAAK,UAAU,CACtB,MAAM;EAKP,MAAM,YAAY,gBAAgB,UAAU;YAF9C,CAIE,iBAAA,GAAA,kBAAA,KAAC,QAAD;GAAM,WAAU;aAAgB;GAAY,CAAA,EAC5C,iBAAA,GAAA,kBAAA,MAAC,OAAD;GAAK,WAAU;aAAf;IACG,SAAS,iBAAA,GAAA,kBAAA,KAAC,KAAD;KAAG,WAAU;eAAsC;KAAU,CAAA;IACtE,eAAe,iBAAA,GAAA,kBAAA,KAAC,KAAD;KAAG,WAAU;eAAyB;KAAgB,CAAA;IACrE;IACG;KACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"animated-content-CttSmLWV.cjs","names":[],"sources":["../../src/components/effects/animated-content/AnimatedContent.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport { motion, useInView, type TargetAndTransition } from \"framer-motion\";\nimport type {\n AnimatedContentProps,\n AnimationPreset,\n AnimationEase,\n} from \"./types\";\n\n// Easing function mappings\nconst easingMap: Record<AnimationEase, number[] | string> = {\n linear: [0, 0, 1, 1],\n easeIn: [0.4, 0, 1, 1],\n easeOut: [0, 0, 0.2, 1],\n easeInOut: [0.4, 0, 0.2, 1],\n circIn: [0.55, 0, 1, 0.45],\n circOut: [0, 0.55, 0.45, 1],\n circInOut: [0.85, 0, 0.15, 1],\n backIn: [0.36, 0, 0.66, -0.56],\n backOut: [0.34, 1.56, 0.64, 1],\n backInOut: [0.68, -0.6, 0.32, 1.6],\n anticipate: \"anticipate\",\n bounce: \"easeOut\",\n elastic: \"easeOut\",\n};\n\n// Get spring config for bouncy/elastic animations\nconst getSpringConfig = (ease: AnimationEase) => {\n switch (ease) {\n case \"bounce\":\n return {\n type: \"spring\" as const,\n damping: 8,\n stiffness: 200,\n bounce: 0.5,\n };\n case \"elastic\":\n return { type: \"spring\" as const, damping: 10, stiffness: 100 };\n default:\n return null;\n }\n};\n\n// Preset animation configurations\nconst getPresetAnimation = (\n preset: AnimationPreset,\n distance: number,\n initialOpacity: number,\n initialScale: number,\n reverse: boolean,\n): {\n initial: TargetAndTransition;\n animate: TargetAndTransition;\n exit: TargetAndTransition;\n} => {\n const dir = reverse ? -1 : 1;\n\n const presets: Record<\n AnimationPreset,\n {\n initial: TargetAndTransition;\n animate: TargetAndTransition;\n exit: TargetAndTransition;\n }\n > = {\n fade: {\n initial: { opacity: initialOpacity },\n animate: { opacity: 1 },\n exit: { opacity: 0 },\n },\n scale: {\n initial: { opacity: initialOpacity, scale: initialScale },\n animate: { opacity: 1, scale: 1 },\n exit: { opacity: 0, scale: initialScale },\n },\n slideUp: {\n initial: { opacity: initialOpacity, y: distance * dir },\n animate: { opacity: 1, y: 0 },\n exit: { opacity: 0, y: (distance / 2) * dir },\n },\n slideDown: {\n initial: { opacity: initialOpacity, y: -distance * dir },\n animate: { opacity: 1, y: 0 },\n exit: { opacity: 0, y: (-distance / 2) * dir },\n },\n slideLeft: {\n initial: { opacity: initialOpacity, x: distance * dir },\n animate: { opacity: 1, x: 0 },\n exit: { opacity: 0, x: (distance / 2) * dir },\n },\n slideRight: {\n initial: { opacity: initialOpacity, x: -distance * dir },\n animate: { opacity: 1, x: 0 },\n exit: { opacity: 0, x: (-distance / 2) * dir },\n },\n elastic: {\n initial: {\n opacity: initialOpacity,\n scale: initialScale,\n y: distance / 2,\n },\n animate: { opacity: 1, scale: 1, y: 0 },\n exit: { opacity: 0, scale: 0.8, y: distance / 4 },\n },\n bounce: {\n initial: { opacity: initialOpacity, scale: initialScale, y: -distance },\n animate: { opacity: 1, scale: 1, y: 0 },\n exit: { opacity: 0, scale: 0.5, y: -distance / 2 },\n },\n flip: {\n initial: { opacity: initialOpacity, rotateX: -90 * dir, scale: 0.9 },\n animate: { opacity: 1, rotateX: 0, scale: 1 },\n exit: { opacity: 0, rotateX: 90 * dir, scale: 0.9 },\n },\n zoom: {\n initial: { opacity: initialOpacity, scale: 0, rotate: -10 * dir },\n animate: { opacity: 1, scale: 1, rotate: 0 },\n exit: { opacity: 0, scale: 0.5, rotate: 5 * dir },\n },\n custom: {\n initial: { opacity: initialOpacity },\n animate: { opacity: 1 },\n exit: { opacity: 0 },\n },\n };\n\n return presets[preset];\n};\n\nexport const AnimatedContent = ({\n children,\n preset = \"fade\",\n direction = \"vertical\",\n ease = \"easeOut\",\n exitEase,\n reverse = false,\n animateOpacity = true,\n distance = 50,\n duration = 0.5,\n delay = 0,\n initialOpacity = 0,\n initialScale = 0.9,\n threshold = 0.1,\n disappearAfter = 0,\n disappearDuration = 0.3,\n triggerOnView = false,\n triggerOnce = true,\n className = \"\",\n as = \"div\",\n}: AnimatedContentProps) => {\n const ref = useRef<HTMLDivElement>(null);\n const isInView = useInView(ref, {\n once: triggerOnce,\n amount: threshold,\n });\n const [isVisible, setIsVisible] = useState(!triggerOnView);\n const [hasDisappeared, setHasDisappeared] = useState(false);\n\n // Handle view-triggered animation\n useEffect(() => {\n if (triggerOnView && isInView && !isVisible) {\n setIsVisible(true);\n }\n }, [isInView, triggerOnView, isVisible]);\n\n // Handle disappear after timeout\n useEffect(() => {\n if (disappearAfter > 0 && isVisible && !hasDisappeared) {\n const timer = setTimeout(() => {\n setHasDisappeared(true);\n }, disappearAfter * 1000);\n return () => clearTimeout(timer);\n }\n }, [disappearAfter, isVisible, hasDisappeared]);\n\n // Get animation config\n const opacity = animateOpacity ? initialOpacity : 1;\n const animation = getPresetAnimation(\n preset,\n distance,\n opacity,\n initialScale,\n reverse,\n );\n\n // Get transition config\n const springConfig = getSpringConfig(ease);\n const easingValue = easingMap[ease];\n\n const transition = springConfig || {\n duration,\n delay,\n ease: (typeof easingValue === \"string\" ? easingValue : easingValue) as any,\n };\n\n const exitTransition = exitEase\n ? { duration: disappearDuration, ease: easingMap[exitEase] }\n : { duration: disappearDuration };\n\n // Determine current animation state\n const shouldAnimate = triggerOnView ? isVisible : true;\n const currentState = hasDisappeared\n ? \"exit\"\n : shouldAnimate\n ? \"animate\"\n : \"initial\";\n\n const MotionComponent = (motion as any)[as] || motion.div;\n\n return (\n <MotionComponent\n ref={ref as any}\n className={className}\n initial={animation.initial}\n animate={\n currentState === \"animate\"\n ? animation.animate\n : currentState === \"exit\"\n ? animation.exit\n : animation.initial\n }\n transition={\n (currentState === \"exit\" ? exitTransition : transition) as any\n }\n style={{ perspective: preset === \"flip\" ? 1000 : undefined }}\n >\n {children}\n </MotionComponent>\n );\n};\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"animated-content-CLsFnjgr.cjs","names":[],"sources":["../../src/components/effects/animated-content/AnimatedContent.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport { motion, useInView, type TargetAndTransition } from \"framer-motion\";\nimport type {\n AnimatedContentProps,\n AnimationPreset,\n AnimationEase,\n} from \"./types\";\n\n// Easing function mappings\nconst easingMap: Record<AnimationEase, number[] | string> = {\n linear: [0, 0, 1, 1],\n easeIn: [0.4, 0, 1, 1],\n easeOut: [0, 0, 0.2, 1],\n easeInOut: [0.4, 0, 0.2, 1],\n circIn: [0.55, 0, 1, 0.45],\n circOut: [0, 0.55, 0.45, 1],\n circInOut: [0.85, 0, 0.15, 1],\n backIn: [0.36, 0, 0.66, -0.56],\n backOut: [0.34, 1.56, 0.64, 1],\n backInOut: [0.68, -0.6, 0.32, 1.6],\n anticipate: \"anticipate\",\n bounce: \"easeOut\",\n elastic: \"easeOut\",\n};\n\n// Get spring config for bouncy/elastic animations\nconst getSpringConfig = (ease: AnimationEase) => {\n switch (ease) {\n case \"bounce\":\n return {\n type: \"spring\" as const,\n damping: 8,\n stiffness: 200,\n bounce: 0.5,\n };\n case \"elastic\":\n return { type: \"spring\" as const, damping: 10, stiffness: 100 };\n default:\n return null;\n }\n};\n\n// Preset animation configurations\nconst getPresetAnimation = (\n preset: AnimationPreset,\n distance: number,\n initialOpacity: number,\n initialScale: number,\n reverse: boolean,\n): {\n initial: TargetAndTransition;\n animate: TargetAndTransition;\n exit: TargetAndTransition;\n} => {\n const dir = reverse ? -1 : 1;\n\n const presets: Record<\n AnimationPreset,\n {\n initial: TargetAndTransition;\n animate: TargetAndTransition;\n exit: TargetAndTransition;\n }\n > = {\n fade: {\n initial: { opacity: initialOpacity },\n animate: { opacity: 1 },\n exit: { opacity: 0 },\n },\n scale: {\n initial: { opacity: initialOpacity, scale: initialScale },\n animate: { opacity: 1, scale: 1 },\n exit: { opacity: 0, scale: initialScale },\n },\n slideUp: {\n initial: { opacity: initialOpacity, y: distance * dir },\n animate: { opacity: 1, y: 0 },\n exit: { opacity: 0, y: (distance / 2) * dir },\n },\n slideDown: {\n initial: { opacity: initialOpacity, y: -distance * dir },\n animate: { opacity: 1, y: 0 },\n exit: { opacity: 0, y: (-distance / 2) * dir },\n },\n slideLeft: {\n initial: { opacity: initialOpacity, x: distance * dir },\n animate: { opacity: 1, x: 0 },\n exit: { opacity: 0, x: (distance / 2) * dir },\n },\n slideRight: {\n initial: { opacity: initialOpacity, x: -distance * dir },\n animate: { opacity: 1, x: 0 },\n exit: { opacity: 0, x: (-distance / 2) * dir },\n },\n elastic: {\n initial: {\n opacity: initialOpacity,\n scale: initialScale,\n y: distance / 2,\n },\n animate: { opacity: 1, scale: 1, y: 0 },\n exit: { opacity: 0, scale: 0.8, y: distance / 4 },\n },\n bounce: {\n initial: { opacity: initialOpacity, scale: initialScale, y: -distance },\n animate: { opacity: 1, scale: 1, y: 0 },\n exit: { opacity: 0, scale: 0.5, y: -distance / 2 },\n },\n flip: {\n initial: { opacity: initialOpacity, rotateX: -90 * dir, scale: 0.9 },\n animate: { opacity: 1, rotateX: 0, scale: 1 },\n exit: { opacity: 0, rotateX: 90 * dir, scale: 0.9 },\n },\n zoom: {\n initial: { opacity: initialOpacity, scale: 0, rotate: -10 * dir },\n animate: { opacity: 1, scale: 1, rotate: 0 },\n exit: { opacity: 0, scale: 0.5, rotate: 5 * dir },\n },\n custom: {\n initial: { opacity: initialOpacity },\n animate: { opacity: 1 },\n exit: { opacity: 0 },\n },\n };\n\n return presets[preset];\n};\n\nexport const AnimatedContent = ({\n children,\n preset = \"fade\",\n direction = \"vertical\",\n ease = \"easeOut\",\n exitEase,\n reverse = false,\n animateOpacity = true,\n distance = 50,\n duration = 0.5,\n delay = 0,\n initialOpacity = 0,\n initialScale = 0.9,\n threshold = 0.1,\n disappearAfter = 0,\n disappearDuration = 0.3,\n triggerOnView = false,\n triggerOnce = true,\n className = \"\",\n as = \"div\",\n}: AnimatedContentProps) => {\n const ref = useRef<HTMLDivElement>(null);\n const isInView = useInView(ref, {\n once: triggerOnce,\n amount: threshold,\n });\n const [isVisible, setIsVisible] = useState(!triggerOnView);\n const [hasDisappeared, setHasDisappeared] = useState(false);\n\n // Handle view-triggered animation\n useEffect(() => {\n if (triggerOnView && isInView && !isVisible) {\n setIsVisible(true);\n }\n }, [isInView, triggerOnView, isVisible]);\n\n // Handle disappear after timeout\n useEffect(() => {\n if (disappearAfter > 0 && isVisible && !hasDisappeared) {\n const timer = setTimeout(() => {\n setHasDisappeared(true);\n }, disappearAfter * 1000);\n return () => clearTimeout(timer);\n }\n }, [disappearAfter, isVisible, hasDisappeared]);\n\n // Get animation config\n const opacity = animateOpacity ? initialOpacity : 1;\n const animation = getPresetAnimation(\n preset,\n distance,\n opacity,\n initialScale,\n reverse,\n );\n\n // Get transition config\n const springConfig = getSpringConfig(ease);\n const easingValue = easingMap[ease];\n\n const transition = springConfig || {\n duration,\n delay,\n ease: (typeof easingValue === \"string\" ? easingValue : easingValue) as any,\n };\n\n const exitTransition = exitEase\n ? { duration: disappearDuration, ease: easingMap[exitEase] }\n : { duration: disappearDuration };\n\n // Determine current animation state\n const shouldAnimate = triggerOnView ? isVisible : true;\n const currentState = hasDisappeared\n ? \"exit\"\n : shouldAnimate\n ? \"animate\"\n : \"initial\";\n\n const MotionComponent = (motion as any)[as] || motion.div;\n\n return (\n <MotionComponent\n ref={ref as any}\n className={className}\n initial={animation.initial}\n animate={\n currentState === \"animate\"\n ? animation.animate\n : currentState === \"exit\"\n ? animation.exit\n : animation.initial\n }\n transition={\n (currentState === \"exit\" ? exitTransition : transition) as any\n }\n style={{ perspective: preset === \"flip\" ? 1000 : undefined }}\n >\n {children}\n </MotionComponent>\n );\n};\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"animated-content-C1uNg1xO.mjs","names":[],"sources":["../../src/components/effects/animated-content/AnimatedContent.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport { motion, useInView, type TargetAndTransition } from \"framer-motion\";\nimport type {\n AnimatedContentProps,\n AnimationPreset,\n AnimationEase,\n} from \"./types\";\n\n// Easing function mappings\nconst easingMap: Record<AnimationEase, number[] | string> = {\n linear: [0, 0, 1, 1],\n easeIn: [0.4, 0, 1, 1],\n easeOut: [0, 0, 0.2, 1],\n easeInOut: [0.4, 0, 0.2, 1],\n circIn: [0.55, 0, 1, 0.45],\n circOut: [0, 0.55, 0.45, 1],\n circInOut: [0.85, 0, 0.15, 1],\n backIn: [0.36, 0, 0.66, -0.56],\n backOut: [0.34, 1.56, 0.64, 1],\n backInOut: [0.68, -0.6, 0.32, 1.6],\n anticipate: \"anticipate\",\n bounce: \"easeOut\",\n elastic: \"easeOut\",\n};\n\n// Get spring config for bouncy/elastic animations\nconst getSpringConfig = (ease: AnimationEase) => {\n switch (ease) {\n case \"bounce\":\n return {\n type: \"spring\" as const,\n damping: 8,\n stiffness: 200,\n bounce: 0.5,\n };\n case \"elastic\":\n return { type: \"spring\" as const, damping: 10, stiffness: 100 };\n default:\n return null;\n }\n};\n\n// Preset animation configurations\nconst getPresetAnimation = (\n preset: AnimationPreset,\n distance: number,\n initialOpacity: number,\n initialScale: number,\n reverse: boolean,\n): {\n initial: TargetAndTransition;\n animate: TargetAndTransition;\n exit: TargetAndTransition;\n} => {\n const dir = reverse ? -1 : 1;\n\n const presets: Record<\n AnimationPreset,\n {\n initial: TargetAndTransition;\n animate: TargetAndTransition;\n exit: TargetAndTransition;\n }\n > = {\n fade: {\n initial: { opacity: initialOpacity },\n animate: { opacity: 1 },\n exit: { opacity: 0 },\n },\n scale: {\n initial: { opacity: initialOpacity, scale: initialScale },\n animate: { opacity: 1, scale: 1 },\n exit: { opacity: 0, scale: initialScale },\n },\n slideUp: {\n initial: { opacity: initialOpacity, y: distance * dir },\n animate: { opacity: 1, y: 0 },\n exit: { opacity: 0, y: (distance / 2) * dir },\n },\n slideDown: {\n initial: { opacity: initialOpacity, y: -distance * dir },\n animate: { opacity: 1, y: 0 },\n exit: { opacity: 0, y: (-distance / 2) * dir },\n },\n slideLeft: {\n initial: { opacity: initialOpacity, x: distance * dir },\n animate: { opacity: 1, x: 0 },\n exit: { opacity: 0, x: (distance / 2) * dir },\n },\n slideRight: {\n initial: { opacity: initialOpacity, x: -distance * dir },\n animate: { opacity: 1, x: 0 },\n exit: { opacity: 0, x: (-distance / 2) * dir },\n },\n elastic: {\n initial: {\n opacity: initialOpacity,\n scale: initialScale,\n y: distance / 2,\n },\n animate: { opacity: 1, scale: 1, y: 0 },\n exit: { opacity: 0, scale: 0.8, y: distance / 4 },\n },\n bounce: {\n initial: { opacity: initialOpacity, scale: initialScale, y: -distance },\n animate: { opacity: 1, scale: 1, y: 0 },\n exit: { opacity: 0, scale: 0.5, y: -distance / 2 },\n },\n flip: {\n initial: { opacity: initialOpacity, rotateX: -90 * dir, scale: 0.9 },\n animate: { opacity: 1, rotateX: 0, scale: 1 },\n exit: { opacity: 0, rotateX: 90 * dir, scale: 0.9 },\n },\n zoom: {\n initial: { opacity: initialOpacity, scale: 0, rotate: -10 * dir },\n animate: { opacity: 1, scale: 1, rotate: 0 },\n exit: { opacity: 0, scale: 0.5, rotate: 5 * dir },\n },\n custom: {\n initial: { opacity: initialOpacity },\n animate: { opacity: 1 },\n exit: { opacity: 0 },\n },\n };\n\n return presets[preset];\n};\n\nexport const AnimatedContent = ({\n children,\n preset = \"fade\",\n direction = \"vertical\",\n ease = \"easeOut\",\n exitEase,\n reverse = false,\n animateOpacity = true,\n distance = 50,\n duration = 0.5,\n delay = 0,\n initialOpacity = 0,\n initialScale = 0.9,\n threshold = 0.1,\n disappearAfter = 0,\n disappearDuration = 0.3,\n triggerOnView = false,\n triggerOnce = true,\n className = \"\",\n as = \"div\",\n}: AnimatedContentProps) => {\n const ref = useRef<HTMLDivElement>(null);\n const isInView = useInView(ref, {\n once: triggerOnce,\n amount: threshold,\n });\n const [isVisible, setIsVisible] = useState(!triggerOnView);\n const [hasDisappeared, setHasDisappeared] = useState(false);\n\n // Handle view-triggered animation\n useEffect(() => {\n if (triggerOnView && isInView && !isVisible) {\n setIsVisible(true);\n }\n }, [isInView, triggerOnView, isVisible]);\n\n // Handle disappear after timeout\n useEffect(() => {\n if (disappearAfter > 0 && isVisible && !hasDisappeared) {\n const timer = setTimeout(() => {\n setHasDisappeared(true);\n }, disappearAfter * 1000);\n return () => clearTimeout(timer);\n }\n }, [disappearAfter, isVisible, hasDisappeared]);\n\n // Get animation config\n const opacity = animateOpacity ? initialOpacity : 1;\n const animation = getPresetAnimation(\n preset,\n distance,\n opacity,\n initialScale,\n reverse,\n );\n\n // Get transition config\n const springConfig = getSpringConfig(ease);\n const easingValue = easingMap[ease];\n\n const transition = springConfig || {\n duration,\n delay,\n ease: (typeof easingValue === \"string\" ? easingValue : easingValue) as any,\n };\n\n const exitTransition = exitEase\n ? { duration: disappearDuration, ease: easingMap[exitEase] }\n : { duration: disappearDuration };\n\n // Determine current animation state\n const shouldAnimate = triggerOnView ? isVisible : true;\n const currentState = hasDisappeared\n ? \"exit\"\n : shouldAnimate\n ? \"animate\"\n : \"initial\";\n\n const MotionComponent = (motion as any)[as] || motion.div;\n\n return (\n <MotionComponent\n ref={ref as any}\n className={className}\n initial={animation.initial}\n animate={\n currentState === \"animate\"\n ? animation.animate\n : currentState === \"exit\"\n ? animation.exit\n : animation.initial\n }\n transition={\n (currentState === \"exit\" ? exitTransition : transition) as any\n }\n style={{ perspective: preset === \"flip\" ? 1000 : undefined }}\n >\n {children}\n </MotionComponent>\n );\n};\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"animated-content-bK6xp-vc.mjs","names":[],"sources":["../../src/components/effects/animated-content/AnimatedContent.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport { motion, useInView, type TargetAndTransition } from \"framer-motion\";\nimport type {\n AnimatedContentProps,\n AnimationPreset,\n AnimationEase,\n} from \"./types\";\n\n// Easing function mappings\nconst easingMap: Record<AnimationEase, number[] | string> = {\n linear: [0, 0, 1, 1],\n easeIn: [0.4, 0, 1, 1],\n easeOut: [0, 0, 0.2, 1],\n easeInOut: [0.4, 0, 0.2, 1],\n circIn: [0.55, 0, 1, 0.45],\n circOut: [0, 0.55, 0.45, 1],\n circInOut: [0.85, 0, 0.15, 1],\n backIn: [0.36, 0, 0.66, -0.56],\n backOut: [0.34, 1.56, 0.64, 1],\n backInOut: [0.68, -0.6, 0.32, 1.6],\n anticipate: \"anticipate\",\n bounce: \"easeOut\",\n elastic: \"easeOut\",\n};\n\n// Get spring config for bouncy/elastic animations\nconst getSpringConfig = (ease: AnimationEase) => {\n switch (ease) {\n case \"bounce\":\n return {\n type: \"spring\" as const,\n damping: 8,\n stiffness: 200,\n bounce: 0.5,\n };\n case \"elastic\":\n return { type: \"spring\" as const, damping: 10, stiffness: 100 };\n default:\n return null;\n }\n};\n\n// Preset animation configurations\nconst getPresetAnimation = (\n preset: AnimationPreset,\n distance: number,\n initialOpacity: number,\n initialScale: number,\n reverse: boolean,\n): {\n initial: TargetAndTransition;\n animate: TargetAndTransition;\n exit: TargetAndTransition;\n} => {\n const dir = reverse ? -1 : 1;\n\n const presets: Record<\n AnimationPreset,\n {\n initial: TargetAndTransition;\n animate: TargetAndTransition;\n exit: TargetAndTransition;\n }\n > = {\n fade: {\n initial: { opacity: initialOpacity },\n animate: { opacity: 1 },\n exit: { opacity: 0 },\n },\n scale: {\n initial: { opacity: initialOpacity, scale: initialScale },\n animate: { opacity: 1, scale: 1 },\n exit: { opacity: 0, scale: initialScale },\n },\n slideUp: {\n initial: { opacity: initialOpacity, y: distance * dir },\n animate: { opacity: 1, y: 0 },\n exit: { opacity: 0, y: (distance / 2) * dir },\n },\n slideDown: {\n initial: { opacity: initialOpacity, y: -distance * dir },\n animate: { opacity: 1, y: 0 },\n exit: { opacity: 0, y: (-distance / 2) * dir },\n },\n slideLeft: {\n initial: { opacity: initialOpacity, x: distance * dir },\n animate: { opacity: 1, x: 0 },\n exit: { opacity: 0, x: (distance / 2) * dir },\n },\n slideRight: {\n initial: { opacity: initialOpacity, x: -distance * dir },\n animate: { opacity: 1, x: 0 },\n exit: { opacity: 0, x: (-distance / 2) * dir },\n },\n elastic: {\n initial: {\n opacity: initialOpacity,\n scale: initialScale,\n y: distance / 2,\n },\n animate: { opacity: 1, scale: 1, y: 0 },\n exit: { opacity: 0, scale: 0.8, y: distance / 4 },\n },\n bounce: {\n initial: { opacity: initialOpacity, scale: initialScale, y: -distance },\n animate: { opacity: 1, scale: 1, y: 0 },\n exit: { opacity: 0, scale: 0.5, y: -distance / 2 },\n },\n flip: {\n initial: { opacity: initialOpacity, rotateX: -90 * dir, scale: 0.9 },\n animate: { opacity: 1, rotateX: 0, scale: 1 },\n exit: { opacity: 0, rotateX: 90 * dir, scale: 0.9 },\n },\n zoom: {\n initial: { opacity: initialOpacity, scale: 0, rotate: -10 * dir },\n animate: { opacity: 1, scale: 1, rotate: 0 },\n exit: { opacity: 0, scale: 0.5, rotate: 5 * dir },\n },\n custom: {\n initial: { opacity: initialOpacity },\n animate: { opacity: 1 },\n exit: { opacity: 0 },\n },\n };\n\n return presets[preset];\n};\n\nexport const AnimatedContent = ({\n children,\n preset = \"fade\",\n direction = \"vertical\",\n ease = \"easeOut\",\n exitEase,\n reverse = false,\n animateOpacity = true,\n distance = 50,\n duration = 0.5,\n delay = 0,\n initialOpacity = 0,\n initialScale = 0.9,\n threshold = 0.1,\n disappearAfter = 0,\n disappearDuration = 0.3,\n triggerOnView = false,\n triggerOnce = true,\n className = \"\",\n as = \"div\",\n}: AnimatedContentProps) => {\n const ref = useRef<HTMLDivElement>(null);\n const isInView = useInView(ref, {\n once: triggerOnce,\n amount: threshold,\n });\n const [isVisible, setIsVisible] = useState(!triggerOnView);\n const [hasDisappeared, setHasDisappeared] = useState(false);\n\n // Handle view-triggered animation\n useEffect(() => {\n if (triggerOnView && isInView && !isVisible) {\n setIsVisible(true);\n }\n }, [isInView, triggerOnView, isVisible]);\n\n // Handle disappear after timeout\n useEffect(() => {\n if (disappearAfter > 0 && isVisible && !hasDisappeared) {\n const timer = setTimeout(() => {\n setHasDisappeared(true);\n }, disappearAfter * 1000);\n return () => clearTimeout(timer);\n }\n }, [disappearAfter, isVisible, hasDisappeared]);\n\n // Get animation config\n const opacity = animateOpacity ? initialOpacity : 1;\n const animation = getPresetAnimation(\n preset,\n distance,\n opacity,\n initialScale,\n reverse,\n );\n\n // Get transition config\n const springConfig = getSpringConfig(ease);\n const easingValue = easingMap[ease];\n\n const transition = springConfig || {\n duration,\n delay,\n ease: (typeof easingValue === \"string\" ? easingValue : easingValue) as any,\n };\n\n const exitTransition = exitEase\n ? { duration: disappearDuration, ease: easingMap[exitEase] }\n : { duration: disappearDuration };\n\n // Determine current animation state\n const shouldAnimate = triggerOnView ? isVisible : true;\n const currentState = hasDisappeared\n ? \"exit\"\n : shouldAnimate\n ? \"animate\"\n : \"initial\";\n\n const MotionComponent = (motion as any)[as] || motion.div;\n\n return (\n <MotionComponent\n ref={ref as any}\n className={className}\n initial={animation.initial}\n animate={\n currentState === \"animate\"\n ? animation.animate\n : currentState === \"exit\"\n ? animation.exit\n : animation.initial\n }\n transition={\n (currentState === \"exit\" ? exitTransition : transition) as any\n }\n style={{ perspective: preset === \"flip\" ? 1000 : undefined }}\n >\n {children}\n </MotionComponent>\n );\n};\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ascii-text-DlmArZXh.cjs","names":[],"sources":["../../src/components/effects/ascii-text/ASCIIText.tsx"],"sourcesContent":["import React, { useRef, useEffect } from \"react\";\nimport * as THREE from \"three\";\n\nconst vertexShader = `\nvarying vec2 vUv;\nuniform float uTime;\nuniform float mouse;\nuniform float uEnableWaves;\n\nvoid main() {\n vUv = uv;\n float time = uTime * 5.;\n\n float waveFactor = uEnableWaves;\n\n vec3 transformed = position;\n\n transformed.x += sin(time + position.y) * 0.5 * waveFactor;\n transformed.y += cos(time + position.z) * 0.15 * waveFactor;\n transformed.z += sin(time + position.x) * waveFactor;\n\n gl_Position = projectionMatrix * modelViewMatrix * vec4(transformed, 1.0);\n}\n`;\n\nconst fragmentShader = `\nvarying vec2 vUv;\nuniform float mouse;\nuniform float uTime;\nuniform sampler2D uTexture;\n\nvoid main() {\n float time = uTime;\n vec2 pos = vUv;\n \n float move = sin(time + mouse) * 0.01;\n float r = texture2D(uTexture, pos + cos(time * 2. - time + pos.x) * .01).r;\n float g = texture2D(uTexture, pos + tan(time * .5 + pos.x - time) * .01).g;\n float b = texture2D(uTexture, pos - cos(time * 2. + time + pos.y) * .01).b;\n float a = texture2D(uTexture, pos).a;\n gl_FragColor = vec4(r, g, b, a);\n}\n`;\n\nconst PX_RATIO = typeof window !== \"undefined\" ? window.devicePixelRatio : 1;\n\nconst resolvedCanvasColorCache = new Map<string, string>();\n\nconst getThemeSignature = () => {\n if (typeof document === \"undefined\") return \"\";\n\n const root = document.documentElement;\n return [\n root.getAttribute(\"data-brand\") ?? \"\",\n root.getAttribute(\"data-mode\") ?? \"\",\n root.getAttribute(\"data-theme\") ?? \"\",\n ].join(\"|\");\n};\n\nconst resolveCanvasColor = (value: string): string => {\n if (typeof document === \"undefined\") return value;\n if (!value.includes(\"var(\") && !value.includes(\"color-mix(\")) return value;\n\n const cacheKey = `${getThemeSignature()}::${value}`;\n const cachedValue = resolvedCanvasColorCache.get(cacheKey);\n if (cachedValue) {\n return cachedValue;\n }\n\n const probe = document.createElement(\"span\");\n probe.style.color = value;\n probe.style.position = \"fixed\";\n probe.style.pointerEvents = \"none\";\n probe.style.opacity = \"0\";\n document.body.appendChild(probe);\n const resolvedValue = getComputedStyle(probe).color || value;\n document.body.removeChild(probe);\n resolvedCanvasColorCache.set(cacheKey, resolvedValue);\n return resolvedValue;\n};\n\ninterface AsciiFilterOptions {\n fontSize?: number;\n fontFamily?: string;\n charset?: string;\n invert?: boolean;\n}\n\nclass AsciiFilter {\n renderer: THREE.WebGLRenderer;\n domElement: HTMLDivElement;\n pre: HTMLPreElement;\n canvas: HTMLCanvasElement;\n context: CanvasRenderingContext2D;\n deg: number;\n invert: boolean;\n fontSize: number;\n fontFamily: string;\n charset: string;\n width: number = 0;\n height: number = 0;\n cols: number = 0;\n rows: number = 0;\n center: { x: number; y: number } = { x: 0, y: 0 };\n mouse: { x: number; y: number } = { x: 0, y: 0 };\n\n constructor(\n renderer: THREE.WebGLRenderer,\n { fontSize, fontFamily, charset, invert }: AsciiFilterOptions = {},\n ) {\n this.renderer = renderer;\n this.domElement = document.createElement(\"div\");\n this.domElement.style.position = \"absolute\";\n this.domElement.style.top = \"0\";\n this.domElement.style.left = \"0\";\n this.domElement.style.width = \"100%\";\n this.domElement.style.height = \"100%\";\n\n this.pre = document.createElement(\"pre\");\n this.domElement.appendChild(this.pre);\n\n this.canvas = document.createElement(\"canvas\");\n const ctx = this.canvas.getContext(\"2d\");\n if (!ctx) throw new Error(\"Could not get 2d context\");\n this.context = ctx;\n this.domElement.appendChild(this.canvas);\n\n this.deg = 0;\n this.invert = invert ?? true;\n this.fontSize = fontSize ?? 12;\n this.fontFamily = fontFamily ?? \"'Courier New', monospace\";\n this.charset =\n charset ??\n \" .'`^\\\",:;Il!i~+_-?][}{1)(|/tfjrxnuvczXYUJCLQ0OZmwqpdbkhao*#MW&8%B@$\";\n\n this.context.imageSmoothingEnabled = false;\n\n this.onMouseMove = this.onMouseMove.bind(this);\n document.addEventListener(\"mousemove\", this.onMouseMove);\n }\n\n setSize(width: number, height: number) {\n this.width = width;\n this.height = height;\n this.renderer.setSize(width, height);\n this.reset();\n\n this.center = { x: width / 2, y: height / 2 };\n this.mouse = { x: this.center.x, y: this.center.y };\n }\n\n reset() {\n this.context.font = `${this.fontSize}px ${this.fontFamily}`;\n const charWidth = this.context.measureText(\"A\").width;\n\n this.cols = Math.floor(\n this.width / (this.fontSize * (charWidth / this.fontSize)),\n );\n this.rows = Math.floor(this.height / this.fontSize);\n\n this.canvas.width = this.cols;\n this.canvas.height = this.rows;\n this.pre.style.fontFamily = this.fontFamily;\n this.pre.style.fontSize = `${this.fontSize}px`;\n this.pre.style.margin = \"0\";\n this.pre.style.padding = \"0\";\n this.pre.style.lineHeight = \"1em\";\n this.pre.style.position = \"absolute\";\n this.pre.style.left = \"0\";\n this.pre.style.top = \"0\";\n this.pre.style.zIndex = \"9\";\n this.pre.style.backgroundAttachment = \"fixed\";\n this.pre.style.mixBlendMode = \"difference\";\n }\n\n render(scene: THREE.Scene, camera: THREE.Camera) {\n this.renderer.render(scene, camera);\n\n const w = this.canvas.width;\n const h = this.canvas.height;\n this.context.clearRect(0, 0, w, h);\n if (this.context && w && h) {\n this.context.drawImage(this.renderer.domElement, 0, 0, w, h);\n }\n\n this.asciify(this.context, w, h);\n this.hue();\n }\n\n onMouseMove(e: MouseEvent) {\n this.mouse = { x: e.clientX * PX_RATIO, y: e.clientY * PX_RATIO };\n }\n\n get dx() {\n return this.mouse.x - this.center.x;\n }\n\n get dy() {\n return this.mouse.y - this.center.y;\n }\n\n hue() {\n const deg = (Math.atan2(this.dy, this.dx) * 180) / Math.PI;\n this.deg += (deg - this.deg) * 0.075;\n this.domElement.style.filter = `hue-rotate(${this.deg.toFixed(1)}deg)`;\n }\n\n asciify(ctx: CanvasRenderingContext2D, w: number, h: number) {\n if (w && h) {\n const imgData = ctx.getImageData(0, 0, w, h).data;\n let str = \"\";\n for (let y = 0; y < h; y++) {\n for (let x = 0; x < w; x++) {\n const i = x * 4 + y * 4 * w;\n const [r, g, b, a] = [\n imgData[i],\n imgData[i + 1],\n imgData[i + 2],\n imgData[i + 3],\n ];\n\n if (a === 0) {\n str += \" \";\n continue;\n }\n\n const gray = (0.3 * r + 0.6 * g + 0.1 * b) / 255;\n let idx = Math.floor((1 - gray) * (this.charset.length - 1));\n if (this.invert) idx = this.charset.length - idx - 1;\n str += this.charset[idx];\n }\n str += \"\\n\";\n }\n this.pre.innerHTML = str;\n }\n }\n\n dispose() {\n document.removeEventListener(\"mousemove\", this.onMouseMove);\n }\n}\n\ninterface CanvasTxtOptions {\n fontSize?: number;\n fontFamily?: string;\n color?: string;\n}\n\nclass CanvasTxt {\n canvas: HTMLCanvasElement;\n context: CanvasRenderingContext2D;\n txt: string;\n fontSize: number;\n fontFamily: string;\n color: string;\n font: string;\n\n constructor(\n txt: string,\n {\n fontSize = 200,\n fontFamily = \"Arial\",\n color = \"var(--ds-color-fg)\",\n }: CanvasTxtOptions = {},\n ) {\n this.canvas = document.createElement(\"canvas\");\n const ctx = this.canvas.getContext(\"2d\");\n if (!ctx) throw new Error(\"Could not get 2d context\");\n this.context = ctx;\n this.txt = txt;\n this.fontSize = fontSize;\n this.fontFamily = fontFamily;\n this.color = color;\n\n this.font = `600 ${this.fontSize}px ${this.fontFamily}`;\n }\n\n resize() {\n this.context.font = this.font;\n const metrics = this.context.measureText(this.txt);\n\n const textWidth = Math.ceil(metrics.width) + 20;\n const textHeight =\n Math.ceil(\n metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent,\n ) + 20;\n\n this.canvas.width = textWidth;\n this.canvas.height = textHeight;\n }\n\n render() {\n this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);\n this.context.fillStyle = resolveCanvasColor(this.color);\n this.context.font = this.font;\n\n const metrics = this.context.measureText(this.txt);\n const yPos = 10 + metrics.actualBoundingBoxAscent;\n\n this.context.fillText(this.txt, 10, yPos);\n }\n\n get width() {\n return this.canvas.width;\n }\n\n get height() {\n return this.canvas.height;\n }\n\n get texture() {\n return this.canvas;\n }\n}\n\ninterface CanvAsciiOptions {\n text: string;\n asciiFontSize: number;\n textFontSize: number;\n textColor: string;\n planeBaseHeight: number;\n enableWaves: boolean;\n}\n\nclass CanvAscii {\n textString: string;\n asciiFontSize: number;\n textFontSize: number;\n textColor: string;\n planeBaseHeight: number;\n container: HTMLElement;\n width: number;\n height: number;\n enableWaves: boolean;\n camera: THREE.PerspectiveCamera;\n scene: THREE.Scene;\n mouse: { x: number; y: number };\n textCanvas!: CanvasTxt;\n texture!: THREE.CanvasTexture;\n geometry!: THREE.PlaneGeometry;\n material!: THREE.ShaderMaterial;\n mesh!: THREE.Mesh;\n renderer!: THREE.WebGLRenderer;\n filter!: AsciiFilter;\n center: { x: number; y: number } = { x: 0, y: 0 };\n animationFrameId: number = 0;\n\n constructor(\n {\n text,\n asciiFontSize,\n textFontSize,\n textColor,\n planeBaseHeight,\n enableWaves,\n }: CanvAsciiOptions,\n containerElem: HTMLElement,\n width: number,\n height: number,\n ) {\n this.textString = text;\n this.asciiFontSize = asciiFontSize;\n this.textFontSize = textFontSize;\n this.textColor = textColor;\n this.planeBaseHeight = planeBaseHeight;\n this.container = containerElem;\n this.width = width;\n this.height = height;\n this.enableWaves = enableWaves;\n\n this.camera = new THREE.PerspectiveCamera(\n 45,\n this.width / this.height,\n 1,\n 1000,\n );\n this.camera.position.z = 30;\n\n this.scene = new THREE.Scene();\n this.mouse = { x: 0, y: 0 };\n\n this.onMouseMove = this.onMouseMove.bind(this);\n\n this.setMesh();\n this.setRenderer();\n }\n\n setMesh() {\n this.textCanvas = new CanvasTxt(this.textString, {\n fontSize: this.textFontSize,\n fontFamily: \"IBM Plex Mono\",\n color: this.textColor,\n });\n this.textCanvas.resize();\n this.textCanvas.render();\n\n this.texture = new THREE.CanvasTexture(this.textCanvas.texture);\n this.texture.minFilter = THREE.NearestFilter;\n\n const textAspect = this.textCanvas.width / this.textCanvas.height;\n const baseH = this.planeBaseHeight;\n const planeW = baseH * textAspect;\n const planeH = baseH;\n\n this.geometry = new THREE.PlaneGeometry(planeW, planeH, 36, 36);\n this.material = new THREE.ShaderMaterial({\n vertexShader,\n fragmentShader,\n transparent: true,\n uniforms: {\n uTime: { value: 0 },\n mouse: { value: 1.0 },\n uTexture: { value: this.texture },\n uEnableWaves: { value: this.enableWaves ? 1.0 : 0.0 },\n },\n });\n\n this.mesh = new THREE.Mesh(this.geometry, this.material);\n this.scene.add(this.mesh);\n }\n\n setRenderer() {\n this.renderer = new THREE.WebGLRenderer({ antialias: false, alpha: true });\n this.renderer.setPixelRatio(1);\n this.renderer.setClearColor(0x000000, 0);\n\n this.filter = new AsciiFilter(this.renderer, {\n fontFamily: \"IBM Plex Mono\",\n fontSize: this.asciiFontSize,\n invert: true,\n });\n\n this.container.appendChild(this.filter.domElement);\n this.setSize(this.width, this.height);\n\n this.container.addEventListener(\"mousemove\", this.onMouseMove);\n this.container.addEventListener(\"touchmove\", this.onMouseMove);\n }\n\n setSize(w: number, h: number) {\n this.width = w;\n this.height = h;\n\n this.camera.aspect = w / h;\n this.camera.updateProjectionMatrix();\n\n this.filter.setSize(w, h);\n\n this.center = { x: w / 2, y: h / 2 };\n }\n\n load() {\n this.animate();\n }\n\n onMouseMove(evt: any) {\n const e = evt.touches ? evt.touches[0] : evt;\n const bounds = this.container.getBoundingClientRect();\n const x = e.clientX - bounds.left;\n const y = e.clientY - bounds.top;\n this.mouse = { x, y };\n }\n\n animate() {\n const animateFrame = () => {\n this.animationFrameId = requestAnimationFrame(animateFrame);\n this.render();\n };\n animateFrame();\n }\n\n render() {\n const time = new Date().getTime() * 0.001;\n\n this.textCanvas.render();\n this.texture.needsUpdate = true;\n\n (this.mesh.material as any).uniforms.uTime.value = Math.sin(time);\n\n this.updateRotation();\n this.filter.render(this.scene, this.camera);\n }\n\n updateRotation() {\n const map = (\n n: number,\n start: number,\n stop: number,\n start2: number,\n stop2: number,\n ) => {\n return ((n - start) / (stop - start)) * (stop2 - start2) + start2;\n };\n\n const x = map(this.mouse.y, 0, this.height, 0.5, -0.5);\n const y = map(this.mouse.x, 0, this.width, -0.5, 0.5);\n\n this.mesh.rotation.x += (x - this.mesh.rotation.x) * 0.05;\n this.mesh.rotation.y += (y - this.mesh.rotation.y) * 0.05;\n }\n\n clear() {\n this.scene.traverse((obj: THREE.Object3D) => {\n if (obj instanceof THREE.Mesh) {\n if (Array.isArray(obj.material)) {\n obj.material.forEach((m: THREE.Material) => m.dispose());\n } else if (obj.material instanceof THREE.Material) {\n obj.material.dispose();\n }\n obj.geometry.dispose();\n }\n });\n this.scene.clear();\n }\n\n dispose() {\n cancelAnimationFrame(this.animationFrameId);\n this.filter.dispose();\n if (this.filter.domElement.parentNode === this.container) {\n this.container.removeChild(this.filter.domElement);\n }\n this.container.removeEventListener(\"mousemove\", this.onMouseMove);\n this.container.removeEventListener(\"touchmove\", this.onMouseMove);\n this.clear();\n this.renderer.dispose();\n }\n}\n\nexport interface ASCIITextProps {\n text?: string;\n asciiFontSize?: number;\n textFontSize?: number;\n textColor?: string;\n planeBaseHeight?: number;\n enableWaves?: boolean;\n className?: string;\n style?: React.CSSProperties;\n}\n\nexport const ASCIIText: React.FC<ASCIITextProps> = ({\n text = \"David!\",\n asciiFontSize = 8,\n textFontSize = 200,\n textColor = \"var(--ds-color-fg)\",\n planeBaseHeight = 8,\n enableWaves = true,\n className = \"\",\n style = {},\n}) => {\n const containerRef = useRef<HTMLDivElement>(null);\n const asciiRef = useRef<CanvAscii | null>(null);\n\n useEffect(() => {\n if (!containerRef.current) return;\n\n const { width, height } = containerRef.current.getBoundingClientRect();\n\n const initAscii = (w: number, h: number) => {\n if (asciiRef.current) asciiRef.current.dispose();\n asciiRef.current = new CanvAscii(\n {\n text,\n asciiFontSize,\n textFontSize,\n textColor,\n planeBaseHeight,\n enableWaves,\n },\n containerRef.current!,\n w,\n h,\n );\n asciiRef.current.load();\n };\n\n if (width === 0 || height === 0) {\n const observer = new IntersectionObserver(\n ([entry]) => {\n if (\n entry.isIntersecting &&\n entry.boundingClientRect.width > 0 &&\n entry.boundingClientRect.height > 0\n ) {\n initAscii(\n entry.boundingClientRect.width,\n entry.boundingClientRect.height,\n );\n observer.disconnect();\n }\n },\n { threshold: 0.1 },\n );\n\n observer.observe(containerRef.current);\n\n return () => {\n observer.disconnect();\n if (asciiRef.current) {\n asciiRef.current.dispose();\n }\n };\n }\n\n initAscii(width, height);\n\n const ro = new ResizeObserver((entries) => {\n if (!entries[0] || !asciiRef.current) return;\n const { width: w, height: h } = entries[0].contentRect;\n if (w > 0 && h > 0) {\n asciiRef.current.setSize(w, h);\n }\n });\n ro.observe(containerRef.current);\n\n return () => {\n ro.disconnect();\n if (asciiRef.current) {\n asciiRef.current.dispose();\n }\n };\n }, [\n text,\n asciiFontSize,\n textFontSize,\n textColor,\n planeBaseHeight,\n enableWaves,\n ]);\n\n return (\n <div\n ref={containerRef}\n className={`ascii-text-container ${className}`}\n style={{\n position: \"absolute\",\n width: \"100%\",\n height: \"100%\",\n ...style,\n }}\n >\n <style>{`\n @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500&display=swap');\n\n .ascii-text-container canvas {\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n image-rendering: optimizeSpeed;\n image-rendering: -moz-crisp-edges;\n image-rendering: -o-crisp-edges;\n image-rendering: -webkit-optimize-contrast;\n image-rendering: optimize-contrast;\n image-rendering: crisp-edges;\n image-rendering: pixelated;\n }\n\n .ascii-text-container pre {\n margin: 0;\n user-select: none;\n padding: 0;\n line-height: 1em;\n text-align: left;\n position: absolute;\n left: 0;\n top: 0;\n background-image: radial-gradient(circle, var(--ds-color-accent) 0%, var(--ds-color-accent-hover) 50%, var(--ds-color-warning) 100%);\n background-attachment: fixed;\n -webkit-text-fill-color: transparent;\n -webkit-background-clip: text;\n background-clip: text;\n z-index: 9;\n mix-blend-mode: difference;\n }\n `}</style>\n </div>\n );\n};\n\nexport default ASCIIText;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ascii-text-Bh4HjIrL.cjs","names":[],"sources":["../../src/components/effects/ascii-text/ASCIIText.tsx"],"sourcesContent":["import React, { useRef, useEffect } from \"react\";\nimport * as THREE from \"three\";\n\nconst vertexShader = `\nvarying vec2 vUv;\nuniform float uTime;\nuniform float mouse;\nuniform float uEnableWaves;\n\nvoid main() {\n vUv = uv;\n float time = uTime * 5.;\n\n float waveFactor = uEnableWaves;\n\n vec3 transformed = position;\n\n transformed.x += sin(time + position.y) * 0.5 * waveFactor;\n transformed.y += cos(time + position.z) * 0.15 * waveFactor;\n transformed.z += sin(time + position.x) * waveFactor;\n\n gl_Position = projectionMatrix * modelViewMatrix * vec4(transformed, 1.0);\n}\n`;\n\nconst fragmentShader = `\nvarying vec2 vUv;\nuniform float mouse;\nuniform float uTime;\nuniform sampler2D uTexture;\n\nvoid main() {\n float time = uTime;\n vec2 pos = vUv;\n \n float move = sin(time + mouse) * 0.01;\n float r = texture2D(uTexture, pos + cos(time * 2. - time + pos.x) * .01).r;\n float g = texture2D(uTexture, pos + tan(time * .5 + pos.x - time) * .01).g;\n float b = texture2D(uTexture, pos - cos(time * 2. + time + pos.y) * .01).b;\n float a = texture2D(uTexture, pos).a;\n gl_FragColor = vec4(r, g, b, a);\n}\n`;\n\nconst PX_RATIO = typeof window !== \"undefined\" ? window.devicePixelRatio : 1;\n\nconst resolvedCanvasColorCache = new Map<string, string>();\n\nconst getThemeSignature = () => {\n if (typeof document === \"undefined\") return \"\";\n\n const root = document.documentElement;\n return [\n root.getAttribute(\"data-brand\") ?? \"\",\n root.getAttribute(\"data-mode\") ?? \"\",\n root.getAttribute(\"data-theme\") ?? \"\",\n ].join(\"|\");\n};\n\nconst resolveCanvasColor = (value: string): string => {\n if (typeof document === \"undefined\") return value;\n if (!value.includes(\"var(\") && !value.includes(\"color-mix(\")) return value;\n\n const cacheKey = `${getThemeSignature()}::${value}`;\n const cachedValue = resolvedCanvasColorCache.get(cacheKey);\n if (cachedValue) {\n return cachedValue;\n }\n\n const probe = document.createElement(\"span\");\n probe.style.color = value;\n probe.style.position = \"fixed\";\n probe.style.pointerEvents = \"none\";\n probe.style.opacity = \"0\";\n document.body.appendChild(probe);\n const resolvedValue = getComputedStyle(probe).color || value;\n document.body.removeChild(probe);\n resolvedCanvasColorCache.set(cacheKey, resolvedValue);\n return resolvedValue;\n};\n\ninterface AsciiFilterOptions {\n fontSize?: number;\n fontFamily?: string;\n charset?: string;\n invert?: boolean;\n}\n\nclass AsciiFilter {\n renderer: THREE.WebGLRenderer;\n domElement: HTMLDivElement;\n pre: HTMLPreElement;\n canvas: HTMLCanvasElement;\n context: CanvasRenderingContext2D;\n deg: number;\n invert: boolean;\n fontSize: number;\n fontFamily: string;\n charset: string;\n width: number = 0;\n height: number = 0;\n cols: number = 0;\n rows: number = 0;\n center: { x: number; y: number } = { x: 0, y: 0 };\n mouse: { x: number; y: number } = { x: 0, y: 0 };\n\n constructor(\n renderer: THREE.WebGLRenderer,\n { fontSize, fontFamily, charset, invert }: AsciiFilterOptions = {},\n ) {\n this.renderer = renderer;\n this.domElement = document.createElement(\"div\");\n this.domElement.style.position = \"absolute\";\n this.domElement.style.top = \"0\";\n this.domElement.style.left = \"0\";\n this.domElement.style.width = \"100%\";\n this.domElement.style.height = \"100%\";\n\n this.pre = document.createElement(\"pre\");\n this.domElement.appendChild(this.pre);\n\n this.canvas = document.createElement(\"canvas\");\n const ctx = this.canvas.getContext(\"2d\");\n if (!ctx) throw new Error(\"Could not get 2d context\");\n this.context = ctx;\n this.domElement.appendChild(this.canvas);\n\n this.deg = 0;\n this.invert = invert ?? true;\n this.fontSize = fontSize ?? 12;\n this.fontFamily = fontFamily ?? \"'Courier New', monospace\";\n this.charset =\n charset ??\n \" .'`^\\\",:;Il!i~+_-?][}{1)(|/tfjrxnuvczXYUJCLQ0OZmwqpdbkhao*#MW&8%B@$\";\n\n this.context.imageSmoothingEnabled = false;\n\n this.onMouseMove = this.onMouseMove.bind(this);\n document.addEventListener(\"mousemove\", this.onMouseMove);\n }\n\n setSize(width: number, height: number) {\n this.width = width;\n this.height = height;\n this.renderer.setSize(width, height);\n this.reset();\n\n this.center = { x: width / 2, y: height / 2 };\n this.mouse = { x: this.center.x, y: this.center.y };\n }\n\n reset() {\n this.context.font = `${this.fontSize}px ${this.fontFamily}`;\n const charWidth = this.context.measureText(\"A\").width;\n\n this.cols = Math.floor(\n this.width / (this.fontSize * (charWidth / this.fontSize)),\n );\n this.rows = Math.floor(this.height / this.fontSize);\n\n this.canvas.width = this.cols;\n this.canvas.height = this.rows;\n this.pre.style.fontFamily = this.fontFamily;\n this.pre.style.fontSize = `${this.fontSize}px`;\n this.pre.style.margin = \"0\";\n this.pre.style.padding = \"0\";\n this.pre.style.lineHeight = \"1em\";\n this.pre.style.position = \"absolute\";\n this.pre.style.left = \"0\";\n this.pre.style.top = \"0\";\n this.pre.style.zIndex = \"9\";\n this.pre.style.backgroundAttachment = \"fixed\";\n this.pre.style.mixBlendMode = \"difference\";\n }\n\n render(scene: THREE.Scene, camera: THREE.Camera) {\n this.renderer.render(scene, camera);\n\n const w = this.canvas.width;\n const h = this.canvas.height;\n this.context.clearRect(0, 0, w, h);\n if (this.context && w && h) {\n this.context.drawImage(this.renderer.domElement, 0, 0, w, h);\n }\n\n this.asciify(this.context, w, h);\n this.hue();\n }\n\n onMouseMove(e: MouseEvent) {\n this.mouse = { x: e.clientX * PX_RATIO, y: e.clientY * PX_RATIO };\n }\n\n get dx() {\n return this.mouse.x - this.center.x;\n }\n\n get dy() {\n return this.mouse.y - this.center.y;\n }\n\n hue() {\n const deg = (Math.atan2(this.dy, this.dx) * 180) / Math.PI;\n this.deg += (deg - this.deg) * 0.075;\n this.domElement.style.filter = `hue-rotate(${this.deg.toFixed(1)}deg)`;\n }\n\n asciify(ctx: CanvasRenderingContext2D, w: number, h: number) {\n if (w && h) {\n const imgData = ctx.getImageData(0, 0, w, h).data;\n let str = \"\";\n for (let y = 0; y < h; y++) {\n for (let x = 0; x < w; x++) {\n const i = x * 4 + y * 4 * w;\n const [r, g, b, a] = [\n imgData[i],\n imgData[i + 1],\n imgData[i + 2],\n imgData[i + 3],\n ];\n\n if (a === 0) {\n str += \" \";\n continue;\n }\n\n const gray = (0.3 * r + 0.6 * g + 0.1 * b) / 255;\n let idx = Math.floor((1 - gray) * (this.charset.length - 1));\n if (this.invert) idx = this.charset.length - idx - 1;\n str += this.charset[idx];\n }\n str += \"\\n\";\n }\n this.pre.innerHTML = str;\n }\n }\n\n dispose() {\n document.removeEventListener(\"mousemove\", this.onMouseMove);\n }\n}\n\ninterface CanvasTxtOptions {\n fontSize?: number;\n fontFamily?: string;\n color?: string;\n}\n\nclass CanvasTxt {\n canvas: HTMLCanvasElement;\n context: CanvasRenderingContext2D;\n txt: string;\n fontSize: number;\n fontFamily: string;\n color: string;\n font: string;\n\n constructor(\n txt: string,\n {\n fontSize = 200,\n fontFamily = \"Arial\",\n color = \"var(--ds-color-fg)\",\n }: CanvasTxtOptions = {},\n ) {\n this.canvas = document.createElement(\"canvas\");\n const ctx = this.canvas.getContext(\"2d\");\n if (!ctx) throw new Error(\"Could not get 2d context\");\n this.context = ctx;\n this.txt = txt;\n this.fontSize = fontSize;\n this.fontFamily = fontFamily;\n this.color = color;\n\n this.font = `600 ${this.fontSize}px ${this.fontFamily}`;\n }\n\n resize() {\n this.context.font = this.font;\n const metrics = this.context.measureText(this.txt);\n\n const textWidth = Math.ceil(metrics.width) + 20;\n const textHeight =\n Math.ceil(\n metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent,\n ) + 20;\n\n this.canvas.width = textWidth;\n this.canvas.height = textHeight;\n }\n\n render() {\n this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);\n this.context.fillStyle = resolveCanvasColor(this.color);\n this.context.font = this.font;\n\n const metrics = this.context.measureText(this.txt);\n const yPos = 10 + metrics.actualBoundingBoxAscent;\n\n this.context.fillText(this.txt, 10, yPos);\n }\n\n get width() {\n return this.canvas.width;\n }\n\n get height() {\n return this.canvas.height;\n }\n\n get texture() {\n return this.canvas;\n }\n}\n\ninterface CanvAsciiOptions {\n text: string;\n asciiFontSize: number;\n textFontSize: number;\n textColor: string;\n planeBaseHeight: number;\n enableWaves: boolean;\n}\n\nclass CanvAscii {\n textString: string;\n asciiFontSize: number;\n textFontSize: number;\n textColor: string;\n planeBaseHeight: number;\n container: HTMLElement;\n width: number;\n height: number;\n enableWaves: boolean;\n camera: THREE.PerspectiveCamera;\n scene: THREE.Scene;\n mouse: { x: number; y: number };\n textCanvas!: CanvasTxt;\n texture!: THREE.CanvasTexture;\n geometry!: THREE.PlaneGeometry;\n material!: THREE.ShaderMaterial;\n mesh!: THREE.Mesh;\n renderer!: THREE.WebGLRenderer;\n filter!: AsciiFilter;\n center: { x: number; y: number } = { x: 0, y: 0 };\n animationFrameId: number = 0;\n\n constructor(\n {\n text,\n asciiFontSize,\n textFontSize,\n textColor,\n planeBaseHeight,\n enableWaves,\n }: CanvAsciiOptions,\n containerElem: HTMLElement,\n width: number,\n height: number,\n ) {\n this.textString = text;\n this.asciiFontSize = asciiFontSize;\n this.textFontSize = textFontSize;\n this.textColor = textColor;\n this.planeBaseHeight = planeBaseHeight;\n this.container = containerElem;\n this.width = width;\n this.height = height;\n this.enableWaves = enableWaves;\n\n this.camera = new THREE.PerspectiveCamera(\n 45,\n this.width / this.height,\n 1,\n 1000,\n );\n this.camera.position.z = 30;\n\n this.scene = new THREE.Scene();\n this.mouse = { x: 0, y: 0 };\n\n this.onMouseMove = this.onMouseMove.bind(this);\n\n this.setMesh();\n this.setRenderer();\n }\n\n setMesh() {\n this.textCanvas = new CanvasTxt(this.textString, {\n fontSize: this.textFontSize,\n fontFamily: \"IBM Plex Mono\",\n color: this.textColor,\n });\n this.textCanvas.resize();\n this.textCanvas.render();\n\n this.texture = new THREE.CanvasTexture(this.textCanvas.texture);\n this.texture.minFilter = THREE.NearestFilter;\n\n const textAspect = this.textCanvas.width / this.textCanvas.height;\n const baseH = this.planeBaseHeight;\n const planeW = baseH * textAspect;\n const planeH = baseH;\n\n this.geometry = new THREE.PlaneGeometry(planeW, planeH, 36, 36);\n this.material = new THREE.ShaderMaterial({\n vertexShader,\n fragmentShader,\n transparent: true,\n uniforms: {\n uTime: { value: 0 },\n mouse: { value: 1.0 },\n uTexture: { value: this.texture },\n uEnableWaves: { value: this.enableWaves ? 1.0 : 0.0 },\n },\n });\n\n this.mesh = new THREE.Mesh(this.geometry, this.material);\n this.scene.add(this.mesh);\n }\n\n setRenderer() {\n this.renderer = new THREE.WebGLRenderer({ antialias: false, alpha: true });\n this.renderer.setPixelRatio(1);\n this.renderer.setClearColor(0x000000, 0);\n\n this.filter = new AsciiFilter(this.renderer, {\n fontFamily: \"IBM Plex Mono\",\n fontSize: this.asciiFontSize,\n invert: true,\n });\n\n this.container.appendChild(this.filter.domElement);\n this.setSize(this.width, this.height);\n\n this.container.addEventListener(\"mousemove\", this.onMouseMove);\n this.container.addEventListener(\"touchmove\", this.onMouseMove);\n }\n\n setSize(w: number, h: number) {\n this.width = w;\n this.height = h;\n\n this.camera.aspect = w / h;\n this.camera.updateProjectionMatrix();\n\n this.filter.setSize(w, h);\n\n this.center = { x: w / 2, y: h / 2 };\n }\n\n load() {\n this.animate();\n }\n\n onMouseMove(evt: any) {\n const e = evt.touches ? evt.touches[0] : evt;\n const bounds = this.container.getBoundingClientRect();\n const x = e.clientX - bounds.left;\n const y = e.clientY - bounds.top;\n this.mouse = { x, y };\n }\n\n animate() {\n const animateFrame = () => {\n this.animationFrameId = requestAnimationFrame(animateFrame);\n this.render();\n };\n animateFrame();\n }\n\n render() {\n const time = new Date().getTime() * 0.001;\n\n this.textCanvas.render();\n this.texture.needsUpdate = true;\n\n (this.mesh.material as any).uniforms.uTime.value = Math.sin(time);\n\n this.updateRotation();\n this.filter.render(this.scene, this.camera);\n }\n\n updateRotation() {\n const map = (\n n: number,\n start: number,\n stop: number,\n start2: number,\n stop2: number,\n ) => {\n return ((n - start) / (stop - start)) * (stop2 - start2) + start2;\n };\n\n const x = map(this.mouse.y, 0, this.height, 0.5, -0.5);\n const y = map(this.mouse.x, 0, this.width, -0.5, 0.5);\n\n this.mesh.rotation.x += (x - this.mesh.rotation.x) * 0.05;\n this.mesh.rotation.y += (y - this.mesh.rotation.y) * 0.05;\n }\n\n clear() {\n this.scene.traverse((obj: THREE.Object3D) => {\n if (obj instanceof THREE.Mesh) {\n if (Array.isArray(obj.material)) {\n obj.material.forEach((m: THREE.Material) => m.dispose());\n } else if (obj.material instanceof THREE.Material) {\n obj.material.dispose();\n }\n obj.geometry.dispose();\n }\n });\n this.scene.clear();\n }\n\n dispose() {\n cancelAnimationFrame(this.animationFrameId);\n this.filter.dispose();\n if (this.filter.domElement.parentNode === this.container) {\n this.container.removeChild(this.filter.domElement);\n }\n this.container.removeEventListener(\"mousemove\", this.onMouseMove);\n this.container.removeEventListener(\"touchmove\", this.onMouseMove);\n this.clear();\n this.renderer.dispose();\n }\n}\n\nexport interface ASCIITextProps {\n text?: string;\n asciiFontSize?: number;\n textFontSize?: number;\n textColor?: string;\n planeBaseHeight?: number;\n enableWaves?: boolean;\n className?: string;\n style?: React.CSSProperties;\n}\n\nexport const ASCIIText: React.FC<ASCIITextProps> = ({\n text = \"David!\",\n asciiFontSize = 8,\n textFontSize = 200,\n textColor = \"var(--ds-color-fg)\",\n planeBaseHeight = 8,\n enableWaves = true,\n className = \"\",\n style = {},\n}) => {\n const containerRef = useRef<HTMLDivElement>(null);\n const asciiRef = useRef<CanvAscii | null>(null);\n\n useEffect(() => {\n if (!containerRef.current) return;\n\n const { width, height } = containerRef.current.getBoundingClientRect();\n\n const initAscii = (w: number, h: number) => {\n if (asciiRef.current) asciiRef.current.dispose();\n asciiRef.current = new CanvAscii(\n {\n text,\n asciiFontSize,\n textFontSize,\n textColor,\n planeBaseHeight,\n enableWaves,\n },\n containerRef.current!,\n w,\n h,\n );\n asciiRef.current.load();\n };\n\n if (width === 0 || height === 0) {\n const observer = new IntersectionObserver(\n ([entry]) => {\n if (\n entry.isIntersecting &&\n entry.boundingClientRect.width > 0 &&\n entry.boundingClientRect.height > 0\n ) {\n initAscii(\n entry.boundingClientRect.width,\n entry.boundingClientRect.height,\n );\n observer.disconnect();\n }\n },\n { threshold: 0.1 },\n );\n\n observer.observe(containerRef.current);\n\n return () => {\n observer.disconnect();\n if (asciiRef.current) {\n asciiRef.current.dispose();\n }\n };\n }\n\n initAscii(width, height);\n\n const ro = new ResizeObserver((entries) => {\n if (!entries[0] || !asciiRef.current) return;\n const { width: w, height: h } = entries[0].contentRect;\n if (w > 0 && h > 0) {\n asciiRef.current.setSize(w, h);\n }\n });\n ro.observe(containerRef.current);\n\n return () => {\n ro.disconnect();\n if (asciiRef.current) {\n asciiRef.current.dispose();\n }\n };\n }, [\n text,\n asciiFontSize,\n textFontSize,\n textColor,\n planeBaseHeight,\n enableWaves,\n ]);\n\n return (\n <div\n ref={containerRef}\n className={`ascii-text-container ${className}`}\n style={{\n position: \"absolute\",\n width: \"100%\",\n height: \"100%\",\n ...style,\n }}\n >\n <style>{`\n @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500&display=swap');\n\n .ascii-text-container canvas {\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n image-rendering: optimizeSpeed;\n image-rendering: -moz-crisp-edges;\n image-rendering: -o-crisp-edges;\n image-rendering: -webkit-optimize-contrast;\n image-rendering: optimize-contrast;\n image-rendering: crisp-edges;\n image-rendering: pixelated;\n }\n\n .ascii-text-container pre {\n margin: 0;\n user-select: none;\n padding: 0;\n line-height: 1em;\n text-align: left;\n position: absolute;\n left: 0;\n top: 0;\n background-image: radial-gradient(circle, var(--ds-color-accent) 0%, var(--ds-color-accent-hover) 50%, var(--ds-color-warning) 100%);\n background-attachment: fixed;\n -webkit-text-fill-color: transparent;\n -webkit-background-clip: text;\n background-clip: text;\n z-index: 9;\n mix-blend-mode: difference;\n }\n `}</style>\n </div>\n );\n};\n\nexport default ASCIIText;\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ascii-text-C5tyNsR3.mjs","names":[],"sources":["../../src/components/effects/ascii-text/ASCIIText.tsx"],"sourcesContent":["import React, { useRef, useEffect } from \"react\";\nimport * as THREE from \"three\";\n\nconst vertexShader = `\nvarying vec2 vUv;\nuniform float uTime;\nuniform float mouse;\nuniform float uEnableWaves;\n\nvoid main() {\n vUv = uv;\n float time = uTime * 5.;\n\n float waveFactor = uEnableWaves;\n\n vec3 transformed = position;\n\n transformed.x += sin(time + position.y) * 0.5 * waveFactor;\n transformed.y += cos(time + position.z) * 0.15 * waveFactor;\n transformed.z += sin(time + position.x) * waveFactor;\n\n gl_Position = projectionMatrix * modelViewMatrix * vec4(transformed, 1.0);\n}\n`;\n\nconst fragmentShader = `\nvarying vec2 vUv;\nuniform float mouse;\nuniform float uTime;\nuniform sampler2D uTexture;\n\nvoid main() {\n float time = uTime;\n vec2 pos = vUv;\n \n float move = sin(time + mouse) * 0.01;\n float r = texture2D(uTexture, pos + cos(time * 2. - time + pos.x) * .01).r;\n float g = texture2D(uTexture, pos + tan(time * .5 + pos.x - time) * .01).g;\n float b = texture2D(uTexture, pos - cos(time * 2. + time + pos.y) * .01).b;\n float a = texture2D(uTexture, pos).a;\n gl_FragColor = vec4(r, g, b, a);\n}\n`;\n\nconst PX_RATIO = typeof window !== \"undefined\" ? window.devicePixelRatio : 1;\n\nconst resolvedCanvasColorCache = new Map<string, string>();\n\nconst getThemeSignature = () => {\n if (typeof document === \"undefined\") return \"\";\n\n const root = document.documentElement;\n return [\n root.getAttribute(\"data-brand\") ?? \"\",\n root.getAttribute(\"data-mode\") ?? \"\",\n root.getAttribute(\"data-theme\") ?? \"\",\n ].join(\"|\");\n};\n\nconst resolveCanvasColor = (value: string): string => {\n if (typeof document === \"undefined\") return value;\n if (!value.includes(\"var(\") && !value.includes(\"color-mix(\")) return value;\n\n const cacheKey = `${getThemeSignature()}::${value}`;\n const cachedValue = resolvedCanvasColorCache.get(cacheKey);\n if (cachedValue) {\n return cachedValue;\n }\n\n const probe = document.createElement(\"span\");\n probe.style.color = value;\n probe.style.position = \"fixed\";\n probe.style.pointerEvents = \"none\";\n probe.style.opacity = \"0\";\n document.body.appendChild(probe);\n const resolvedValue = getComputedStyle(probe).color || value;\n document.body.removeChild(probe);\n resolvedCanvasColorCache.set(cacheKey, resolvedValue);\n return resolvedValue;\n};\n\ninterface AsciiFilterOptions {\n fontSize?: number;\n fontFamily?: string;\n charset?: string;\n invert?: boolean;\n}\n\nclass AsciiFilter {\n renderer: THREE.WebGLRenderer;\n domElement: HTMLDivElement;\n pre: HTMLPreElement;\n canvas: HTMLCanvasElement;\n context: CanvasRenderingContext2D;\n deg: number;\n invert: boolean;\n fontSize: number;\n fontFamily: string;\n charset: string;\n width: number = 0;\n height: number = 0;\n cols: number = 0;\n rows: number = 0;\n center: { x: number; y: number } = { x: 0, y: 0 };\n mouse: { x: number; y: number } = { x: 0, y: 0 };\n\n constructor(\n renderer: THREE.WebGLRenderer,\n { fontSize, fontFamily, charset, invert }: AsciiFilterOptions = {},\n ) {\n this.renderer = renderer;\n this.domElement = document.createElement(\"div\");\n this.domElement.style.position = \"absolute\";\n this.domElement.style.top = \"0\";\n this.domElement.style.left = \"0\";\n this.domElement.style.width = \"100%\";\n this.domElement.style.height = \"100%\";\n\n this.pre = document.createElement(\"pre\");\n this.domElement.appendChild(this.pre);\n\n this.canvas = document.createElement(\"canvas\");\n const ctx = this.canvas.getContext(\"2d\");\n if (!ctx) throw new Error(\"Could not get 2d context\");\n this.context = ctx;\n this.domElement.appendChild(this.canvas);\n\n this.deg = 0;\n this.invert = invert ?? true;\n this.fontSize = fontSize ?? 12;\n this.fontFamily = fontFamily ?? \"'Courier New', monospace\";\n this.charset =\n charset ??\n \" .'`^\\\",:;Il!i~+_-?][}{1)(|/tfjrxnuvczXYUJCLQ0OZmwqpdbkhao*#MW&8%B@$\";\n\n this.context.imageSmoothingEnabled = false;\n\n this.onMouseMove = this.onMouseMove.bind(this);\n document.addEventListener(\"mousemove\", this.onMouseMove);\n }\n\n setSize(width: number, height: number) {\n this.width = width;\n this.height = height;\n this.renderer.setSize(width, height);\n this.reset();\n\n this.center = { x: width / 2, y: height / 2 };\n this.mouse = { x: this.center.x, y: this.center.y };\n }\n\n reset() {\n this.context.font = `${this.fontSize}px ${this.fontFamily}`;\n const charWidth = this.context.measureText(\"A\").width;\n\n this.cols = Math.floor(\n this.width / (this.fontSize * (charWidth / this.fontSize)),\n );\n this.rows = Math.floor(this.height / this.fontSize);\n\n this.canvas.width = this.cols;\n this.canvas.height = this.rows;\n this.pre.style.fontFamily = this.fontFamily;\n this.pre.style.fontSize = `${this.fontSize}px`;\n this.pre.style.margin = \"0\";\n this.pre.style.padding = \"0\";\n this.pre.style.lineHeight = \"1em\";\n this.pre.style.position = \"absolute\";\n this.pre.style.left = \"0\";\n this.pre.style.top = \"0\";\n this.pre.style.zIndex = \"9\";\n this.pre.style.backgroundAttachment = \"fixed\";\n this.pre.style.mixBlendMode = \"difference\";\n }\n\n render(scene: THREE.Scene, camera: THREE.Camera) {\n this.renderer.render(scene, camera);\n\n const w = this.canvas.width;\n const h = this.canvas.height;\n this.context.clearRect(0, 0, w, h);\n if (this.context && w && h) {\n this.context.drawImage(this.renderer.domElement, 0, 0, w, h);\n }\n\n this.asciify(this.context, w, h);\n this.hue();\n }\n\n onMouseMove(e: MouseEvent) {\n this.mouse = { x: e.clientX * PX_RATIO, y: e.clientY * PX_RATIO };\n }\n\n get dx() {\n return this.mouse.x - this.center.x;\n }\n\n get dy() {\n return this.mouse.y - this.center.y;\n }\n\n hue() {\n const deg = (Math.atan2(this.dy, this.dx) * 180) / Math.PI;\n this.deg += (deg - this.deg) * 0.075;\n this.domElement.style.filter = `hue-rotate(${this.deg.toFixed(1)}deg)`;\n }\n\n asciify(ctx: CanvasRenderingContext2D, w: number, h: number) {\n if (w && h) {\n const imgData = ctx.getImageData(0, 0, w, h).data;\n let str = \"\";\n for (let y = 0; y < h; y++) {\n for (let x = 0; x < w; x++) {\n const i = x * 4 + y * 4 * w;\n const [r, g, b, a] = [\n imgData[i],\n imgData[i + 1],\n imgData[i + 2],\n imgData[i + 3],\n ];\n\n if (a === 0) {\n str += \" \";\n continue;\n }\n\n const gray = (0.3 * r + 0.6 * g + 0.1 * b) / 255;\n let idx = Math.floor((1 - gray) * (this.charset.length - 1));\n if (this.invert) idx = this.charset.length - idx - 1;\n str += this.charset[idx];\n }\n str += \"\\n\";\n }\n this.pre.innerHTML = str;\n }\n }\n\n dispose() {\n document.removeEventListener(\"mousemove\", this.onMouseMove);\n }\n}\n\ninterface CanvasTxtOptions {\n fontSize?: number;\n fontFamily?: string;\n color?: string;\n}\n\nclass CanvasTxt {\n canvas: HTMLCanvasElement;\n context: CanvasRenderingContext2D;\n txt: string;\n fontSize: number;\n fontFamily: string;\n color: string;\n font: string;\n\n constructor(\n txt: string,\n {\n fontSize = 200,\n fontFamily = \"Arial\",\n color = \"var(--ds-color-fg)\",\n }: CanvasTxtOptions = {},\n ) {\n this.canvas = document.createElement(\"canvas\");\n const ctx = this.canvas.getContext(\"2d\");\n if (!ctx) throw new Error(\"Could not get 2d context\");\n this.context = ctx;\n this.txt = txt;\n this.fontSize = fontSize;\n this.fontFamily = fontFamily;\n this.color = color;\n\n this.font = `600 ${this.fontSize}px ${this.fontFamily}`;\n }\n\n resize() {\n this.context.font = this.font;\n const metrics = this.context.measureText(this.txt);\n\n const textWidth = Math.ceil(metrics.width) + 20;\n const textHeight =\n Math.ceil(\n metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent,\n ) + 20;\n\n this.canvas.width = textWidth;\n this.canvas.height = textHeight;\n }\n\n render() {\n this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);\n this.context.fillStyle = resolveCanvasColor(this.color);\n this.context.font = this.font;\n\n const metrics = this.context.measureText(this.txt);\n const yPos = 10 + metrics.actualBoundingBoxAscent;\n\n this.context.fillText(this.txt, 10, yPos);\n }\n\n get width() {\n return this.canvas.width;\n }\n\n get height() {\n return this.canvas.height;\n }\n\n get texture() {\n return this.canvas;\n }\n}\n\ninterface CanvAsciiOptions {\n text: string;\n asciiFontSize: number;\n textFontSize: number;\n textColor: string;\n planeBaseHeight: number;\n enableWaves: boolean;\n}\n\nclass CanvAscii {\n textString: string;\n asciiFontSize: number;\n textFontSize: number;\n textColor: string;\n planeBaseHeight: number;\n container: HTMLElement;\n width: number;\n height: number;\n enableWaves: boolean;\n camera: THREE.PerspectiveCamera;\n scene: THREE.Scene;\n mouse: { x: number; y: number };\n textCanvas!: CanvasTxt;\n texture!: THREE.CanvasTexture;\n geometry!: THREE.PlaneGeometry;\n material!: THREE.ShaderMaterial;\n mesh!: THREE.Mesh;\n renderer!: THREE.WebGLRenderer;\n filter!: AsciiFilter;\n center: { x: number; y: number } = { x: 0, y: 0 };\n animationFrameId: number = 0;\n\n constructor(\n {\n text,\n asciiFontSize,\n textFontSize,\n textColor,\n planeBaseHeight,\n enableWaves,\n }: CanvAsciiOptions,\n containerElem: HTMLElement,\n width: number,\n height: number,\n ) {\n this.textString = text;\n this.asciiFontSize = asciiFontSize;\n this.textFontSize = textFontSize;\n this.textColor = textColor;\n this.planeBaseHeight = planeBaseHeight;\n this.container = containerElem;\n this.width = width;\n this.height = height;\n this.enableWaves = enableWaves;\n\n this.camera = new THREE.PerspectiveCamera(\n 45,\n this.width / this.height,\n 1,\n 1000,\n );\n this.camera.position.z = 30;\n\n this.scene = new THREE.Scene();\n this.mouse = { x: 0, y: 0 };\n\n this.onMouseMove = this.onMouseMove.bind(this);\n\n this.setMesh();\n this.setRenderer();\n }\n\n setMesh() {\n this.textCanvas = new CanvasTxt(this.textString, {\n fontSize: this.textFontSize,\n fontFamily: \"IBM Plex Mono\",\n color: this.textColor,\n });\n this.textCanvas.resize();\n this.textCanvas.render();\n\n this.texture = new THREE.CanvasTexture(this.textCanvas.texture);\n this.texture.minFilter = THREE.NearestFilter;\n\n const textAspect = this.textCanvas.width / this.textCanvas.height;\n const baseH = this.planeBaseHeight;\n const planeW = baseH * textAspect;\n const planeH = baseH;\n\n this.geometry = new THREE.PlaneGeometry(planeW, planeH, 36, 36);\n this.material = new THREE.ShaderMaterial({\n vertexShader,\n fragmentShader,\n transparent: true,\n uniforms: {\n uTime: { value: 0 },\n mouse: { value: 1.0 },\n uTexture: { value: this.texture },\n uEnableWaves: { value: this.enableWaves ? 1.0 : 0.0 },\n },\n });\n\n this.mesh = new THREE.Mesh(this.geometry, this.material);\n this.scene.add(this.mesh);\n }\n\n setRenderer() {\n this.renderer = new THREE.WebGLRenderer({ antialias: false, alpha: true });\n this.renderer.setPixelRatio(1);\n this.renderer.setClearColor(0x000000, 0);\n\n this.filter = new AsciiFilter(this.renderer, {\n fontFamily: \"IBM Plex Mono\",\n fontSize: this.asciiFontSize,\n invert: true,\n });\n\n this.container.appendChild(this.filter.domElement);\n this.setSize(this.width, this.height);\n\n this.container.addEventListener(\"mousemove\", this.onMouseMove);\n this.container.addEventListener(\"touchmove\", this.onMouseMove);\n }\n\n setSize(w: number, h: number) {\n this.width = w;\n this.height = h;\n\n this.camera.aspect = w / h;\n this.camera.updateProjectionMatrix();\n\n this.filter.setSize(w, h);\n\n this.center = { x: w / 2, y: h / 2 };\n }\n\n load() {\n this.animate();\n }\n\n onMouseMove(evt: any) {\n const e = evt.touches ? evt.touches[0] : evt;\n const bounds = this.container.getBoundingClientRect();\n const x = e.clientX - bounds.left;\n const y = e.clientY - bounds.top;\n this.mouse = { x, y };\n }\n\n animate() {\n const animateFrame = () => {\n this.animationFrameId = requestAnimationFrame(animateFrame);\n this.render();\n };\n animateFrame();\n }\n\n render() {\n const time = new Date().getTime() * 0.001;\n\n this.textCanvas.render();\n this.texture.needsUpdate = true;\n\n (this.mesh.material as any).uniforms.uTime.value = Math.sin(time);\n\n this.updateRotation();\n this.filter.render(this.scene, this.camera);\n }\n\n updateRotation() {\n const map = (\n n: number,\n start: number,\n stop: number,\n start2: number,\n stop2: number,\n ) => {\n return ((n - start) / (stop - start)) * (stop2 - start2) + start2;\n };\n\n const x = map(this.mouse.y, 0, this.height, 0.5, -0.5);\n const y = map(this.mouse.x, 0, this.width, -0.5, 0.5);\n\n this.mesh.rotation.x += (x - this.mesh.rotation.x) * 0.05;\n this.mesh.rotation.y += (y - this.mesh.rotation.y) * 0.05;\n }\n\n clear() {\n this.scene.traverse((obj: THREE.Object3D) => {\n if (obj instanceof THREE.Mesh) {\n if (Array.isArray(obj.material)) {\n obj.material.forEach((m: THREE.Material) => m.dispose());\n } else if (obj.material instanceof THREE.Material) {\n obj.material.dispose();\n }\n obj.geometry.dispose();\n }\n });\n this.scene.clear();\n }\n\n dispose() {\n cancelAnimationFrame(this.animationFrameId);\n this.filter.dispose();\n if (this.filter.domElement.parentNode === this.container) {\n this.container.removeChild(this.filter.domElement);\n }\n this.container.removeEventListener(\"mousemove\", this.onMouseMove);\n this.container.removeEventListener(\"touchmove\", this.onMouseMove);\n this.clear();\n this.renderer.dispose();\n }\n}\n\nexport interface ASCIITextProps {\n text?: string;\n asciiFontSize?: number;\n textFontSize?: number;\n textColor?: string;\n planeBaseHeight?: number;\n enableWaves?: boolean;\n className?: string;\n style?: React.CSSProperties;\n}\n\nexport const ASCIIText: React.FC<ASCIITextProps> = ({\n text = \"David!\",\n asciiFontSize = 8,\n textFontSize = 200,\n textColor = \"var(--ds-color-fg)\",\n planeBaseHeight = 8,\n enableWaves = true,\n className = \"\",\n style = {},\n}) => {\n const containerRef = useRef<HTMLDivElement>(null);\n const asciiRef = useRef<CanvAscii | null>(null);\n\n useEffect(() => {\n if (!containerRef.current) return;\n\n const { width, height } = containerRef.current.getBoundingClientRect();\n\n const initAscii = (w: number, h: number) => {\n if (asciiRef.current) asciiRef.current.dispose();\n asciiRef.current = new CanvAscii(\n {\n text,\n asciiFontSize,\n textFontSize,\n textColor,\n planeBaseHeight,\n enableWaves,\n },\n containerRef.current!,\n w,\n h,\n );\n asciiRef.current.load();\n };\n\n if (width === 0 || height === 0) {\n const observer = new IntersectionObserver(\n ([entry]) => {\n if (\n entry.isIntersecting &&\n entry.boundingClientRect.width > 0 &&\n entry.boundingClientRect.height > 0\n ) {\n initAscii(\n entry.boundingClientRect.width,\n entry.boundingClientRect.height,\n );\n observer.disconnect();\n }\n },\n { threshold: 0.1 },\n );\n\n observer.observe(containerRef.current);\n\n return () => {\n observer.disconnect();\n if (asciiRef.current) {\n asciiRef.current.dispose();\n }\n };\n }\n\n initAscii(width, height);\n\n const ro = new ResizeObserver((entries) => {\n if (!entries[0] || !asciiRef.current) return;\n const { width: w, height: h } = entries[0].contentRect;\n if (w > 0 && h > 0) {\n asciiRef.current.setSize(w, h);\n }\n });\n ro.observe(containerRef.current);\n\n return () => {\n ro.disconnect();\n if (asciiRef.current) {\n asciiRef.current.dispose();\n }\n };\n }, [\n text,\n asciiFontSize,\n textFontSize,\n textColor,\n planeBaseHeight,\n enableWaves,\n ]);\n\n return (\n <div\n ref={containerRef}\n className={`ascii-text-container ${className}`}\n style={{\n position: \"absolute\",\n width: \"100%\",\n height: \"100%\",\n ...style,\n }}\n >\n <style>{`\n @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500&display=swap');\n\n .ascii-text-container canvas {\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n image-rendering: optimizeSpeed;\n image-rendering: -moz-crisp-edges;\n image-rendering: -o-crisp-edges;\n image-rendering: -webkit-optimize-contrast;\n image-rendering: optimize-contrast;\n image-rendering: crisp-edges;\n image-rendering: pixelated;\n }\n\n .ascii-text-container pre {\n margin: 0;\n user-select: none;\n padding: 0;\n line-height: 1em;\n text-align: left;\n position: absolute;\n left: 0;\n top: 0;\n background-image: radial-gradient(circle, var(--ds-color-accent) 0%, var(--ds-color-accent-hover) 50%, var(--ds-color-warning) 100%);\n background-attachment: fixed;\n -webkit-text-fill-color: transparent;\n -webkit-background-clip: text;\n background-clip: text;\n z-index: 9;\n mix-blend-mode: difference;\n }\n `}</style>\n </div>\n );\n};\n\nexport default ASCIIText;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ascii-text-RJxX3wCC.mjs","names":[],"sources":["../../src/components/effects/ascii-text/ASCIIText.tsx"],"sourcesContent":["import React, { useRef, useEffect } from \"react\";\nimport * as THREE from \"three\";\n\nconst vertexShader = `\nvarying vec2 vUv;\nuniform float uTime;\nuniform float mouse;\nuniform float uEnableWaves;\n\nvoid main() {\n vUv = uv;\n float time = uTime * 5.;\n\n float waveFactor = uEnableWaves;\n\n vec3 transformed = position;\n\n transformed.x += sin(time + position.y) * 0.5 * waveFactor;\n transformed.y += cos(time + position.z) * 0.15 * waveFactor;\n transformed.z += sin(time + position.x) * waveFactor;\n\n gl_Position = projectionMatrix * modelViewMatrix * vec4(transformed, 1.0);\n}\n`;\n\nconst fragmentShader = `\nvarying vec2 vUv;\nuniform float mouse;\nuniform float uTime;\nuniform sampler2D uTexture;\n\nvoid main() {\n float time = uTime;\n vec2 pos = vUv;\n \n float move = sin(time + mouse) * 0.01;\n float r = texture2D(uTexture, pos + cos(time * 2. - time + pos.x) * .01).r;\n float g = texture2D(uTexture, pos + tan(time * .5 + pos.x - time) * .01).g;\n float b = texture2D(uTexture, pos - cos(time * 2. + time + pos.y) * .01).b;\n float a = texture2D(uTexture, pos).a;\n gl_FragColor = vec4(r, g, b, a);\n}\n`;\n\nconst PX_RATIO = typeof window !== \"undefined\" ? window.devicePixelRatio : 1;\n\nconst resolvedCanvasColorCache = new Map<string, string>();\n\nconst getThemeSignature = () => {\n if (typeof document === \"undefined\") return \"\";\n\n const root = document.documentElement;\n return [\n root.getAttribute(\"data-brand\") ?? \"\",\n root.getAttribute(\"data-mode\") ?? \"\",\n root.getAttribute(\"data-theme\") ?? \"\",\n ].join(\"|\");\n};\n\nconst resolveCanvasColor = (value: string): string => {\n if (typeof document === \"undefined\") return value;\n if (!value.includes(\"var(\") && !value.includes(\"color-mix(\")) return value;\n\n const cacheKey = `${getThemeSignature()}::${value}`;\n const cachedValue = resolvedCanvasColorCache.get(cacheKey);\n if (cachedValue) {\n return cachedValue;\n }\n\n const probe = document.createElement(\"span\");\n probe.style.color = value;\n probe.style.position = \"fixed\";\n probe.style.pointerEvents = \"none\";\n probe.style.opacity = \"0\";\n document.body.appendChild(probe);\n const resolvedValue = getComputedStyle(probe).color || value;\n document.body.removeChild(probe);\n resolvedCanvasColorCache.set(cacheKey, resolvedValue);\n return resolvedValue;\n};\n\ninterface AsciiFilterOptions {\n fontSize?: number;\n fontFamily?: string;\n charset?: string;\n invert?: boolean;\n}\n\nclass AsciiFilter {\n renderer: THREE.WebGLRenderer;\n domElement: HTMLDivElement;\n pre: HTMLPreElement;\n canvas: HTMLCanvasElement;\n context: CanvasRenderingContext2D;\n deg: number;\n invert: boolean;\n fontSize: number;\n fontFamily: string;\n charset: string;\n width: number = 0;\n height: number = 0;\n cols: number = 0;\n rows: number = 0;\n center: { x: number; y: number } = { x: 0, y: 0 };\n mouse: { x: number; y: number } = { x: 0, y: 0 };\n\n constructor(\n renderer: THREE.WebGLRenderer,\n { fontSize, fontFamily, charset, invert }: AsciiFilterOptions = {},\n ) {\n this.renderer = renderer;\n this.domElement = document.createElement(\"div\");\n this.domElement.style.position = \"absolute\";\n this.domElement.style.top = \"0\";\n this.domElement.style.left = \"0\";\n this.domElement.style.width = \"100%\";\n this.domElement.style.height = \"100%\";\n\n this.pre = document.createElement(\"pre\");\n this.domElement.appendChild(this.pre);\n\n this.canvas = document.createElement(\"canvas\");\n const ctx = this.canvas.getContext(\"2d\");\n if (!ctx) throw new Error(\"Could not get 2d context\");\n this.context = ctx;\n this.domElement.appendChild(this.canvas);\n\n this.deg = 0;\n this.invert = invert ?? true;\n this.fontSize = fontSize ?? 12;\n this.fontFamily = fontFamily ?? \"'Courier New', monospace\";\n this.charset =\n charset ??\n \" .'`^\\\",:;Il!i~+_-?][}{1)(|/tfjrxnuvczXYUJCLQ0OZmwqpdbkhao*#MW&8%B@$\";\n\n this.context.imageSmoothingEnabled = false;\n\n this.onMouseMove = this.onMouseMove.bind(this);\n document.addEventListener(\"mousemove\", this.onMouseMove);\n }\n\n setSize(width: number, height: number) {\n this.width = width;\n this.height = height;\n this.renderer.setSize(width, height);\n this.reset();\n\n this.center = { x: width / 2, y: height / 2 };\n this.mouse = { x: this.center.x, y: this.center.y };\n }\n\n reset() {\n this.context.font = `${this.fontSize}px ${this.fontFamily}`;\n const charWidth = this.context.measureText(\"A\").width;\n\n this.cols = Math.floor(\n this.width / (this.fontSize * (charWidth / this.fontSize)),\n );\n this.rows = Math.floor(this.height / this.fontSize);\n\n this.canvas.width = this.cols;\n this.canvas.height = this.rows;\n this.pre.style.fontFamily = this.fontFamily;\n this.pre.style.fontSize = `${this.fontSize}px`;\n this.pre.style.margin = \"0\";\n this.pre.style.padding = \"0\";\n this.pre.style.lineHeight = \"1em\";\n this.pre.style.position = \"absolute\";\n this.pre.style.left = \"0\";\n this.pre.style.top = \"0\";\n this.pre.style.zIndex = \"9\";\n this.pre.style.backgroundAttachment = \"fixed\";\n this.pre.style.mixBlendMode = \"difference\";\n }\n\n render(scene: THREE.Scene, camera: THREE.Camera) {\n this.renderer.render(scene, camera);\n\n const w = this.canvas.width;\n const h = this.canvas.height;\n this.context.clearRect(0, 0, w, h);\n if (this.context && w && h) {\n this.context.drawImage(this.renderer.domElement, 0, 0, w, h);\n }\n\n this.asciify(this.context, w, h);\n this.hue();\n }\n\n onMouseMove(e: MouseEvent) {\n this.mouse = { x: e.clientX * PX_RATIO, y: e.clientY * PX_RATIO };\n }\n\n get dx() {\n return this.mouse.x - this.center.x;\n }\n\n get dy() {\n return this.mouse.y - this.center.y;\n }\n\n hue() {\n const deg = (Math.atan2(this.dy, this.dx) * 180) / Math.PI;\n this.deg += (deg - this.deg) * 0.075;\n this.domElement.style.filter = `hue-rotate(${this.deg.toFixed(1)}deg)`;\n }\n\n asciify(ctx: CanvasRenderingContext2D, w: number, h: number) {\n if (w && h) {\n const imgData = ctx.getImageData(0, 0, w, h).data;\n let str = \"\";\n for (let y = 0; y < h; y++) {\n for (let x = 0; x < w; x++) {\n const i = x * 4 + y * 4 * w;\n const [r, g, b, a] = [\n imgData[i],\n imgData[i + 1],\n imgData[i + 2],\n imgData[i + 3],\n ];\n\n if (a === 0) {\n str += \" \";\n continue;\n }\n\n const gray = (0.3 * r + 0.6 * g + 0.1 * b) / 255;\n let idx = Math.floor((1 - gray) * (this.charset.length - 1));\n if (this.invert) idx = this.charset.length - idx - 1;\n str += this.charset[idx];\n }\n str += \"\\n\";\n }\n this.pre.innerHTML = str;\n }\n }\n\n dispose() {\n document.removeEventListener(\"mousemove\", this.onMouseMove);\n }\n}\n\ninterface CanvasTxtOptions {\n fontSize?: number;\n fontFamily?: string;\n color?: string;\n}\n\nclass CanvasTxt {\n canvas: HTMLCanvasElement;\n context: CanvasRenderingContext2D;\n txt: string;\n fontSize: number;\n fontFamily: string;\n color: string;\n font: string;\n\n constructor(\n txt: string,\n {\n fontSize = 200,\n fontFamily = \"Arial\",\n color = \"var(--ds-color-fg)\",\n }: CanvasTxtOptions = {},\n ) {\n this.canvas = document.createElement(\"canvas\");\n const ctx = this.canvas.getContext(\"2d\");\n if (!ctx) throw new Error(\"Could not get 2d context\");\n this.context = ctx;\n this.txt = txt;\n this.fontSize = fontSize;\n this.fontFamily = fontFamily;\n this.color = color;\n\n this.font = `600 ${this.fontSize}px ${this.fontFamily}`;\n }\n\n resize() {\n this.context.font = this.font;\n const metrics = this.context.measureText(this.txt);\n\n const textWidth = Math.ceil(metrics.width) + 20;\n const textHeight =\n Math.ceil(\n metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent,\n ) + 20;\n\n this.canvas.width = textWidth;\n this.canvas.height = textHeight;\n }\n\n render() {\n this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);\n this.context.fillStyle = resolveCanvasColor(this.color);\n this.context.font = this.font;\n\n const metrics = this.context.measureText(this.txt);\n const yPos = 10 + metrics.actualBoundingBoxAscent;\n\n this.context.fillText(this.txt, 10, yPos);\n }\n\n get width() {\n return this.canvas.width;\n }\n\n get height() {\n return this.canvas.height;\n }\n\n get texture() {\n return this.canvas;\n }\n}\n\ninterface CanvAsciiOptions {\n text: string;\n asciiFontSize: number;\n textFontSize: number;\n textColor: string;\n planeBaseHeight: number;\n enableWaves: boolean;\n}\n\nclass CanvAscii {\n textString: string;\n asciiFontSize: number;\n textFontSize: number;\n textColor: string;\n planeBaseHeight: number;\n container: HTMLElement;\n width: number;\n height: number;\n enableWaves: boolean;\n camera: THREE.PerspectiveCamera;\n scene: THREE.Scene;\n mouse: { x: number; y: number };\n textCanvas!: CanvasTxt;\n texture!: THREE.CanvasTexture;\n geometry!: THREE.PlaneGeometry;\n material!: THREE.ShaderMaterial;\n mesh!: THREE.Mesh;\n renderer!: THREE.WebGLRenderer;\n filter!: AsciiFilter;\n center: { x: number; y: number } = { x: 0, y: 0 };\n animationFrameId: number = 0;\n\n constructor(\n {\n text,\n asciiFontSize,\n textFontSize,\n textColor,\n planeBaseHeight,\n enableWaves,\n }: CanvAsciiOptions,\n containerElem: HTMLElement,\n width: number,\n height: number,\n ) {\n this.textString = text;\n this.asciiFontSize = asciiFontSize;\n this.textFontSize = textFontSize;\n this.textColor = textColor;\n this.planeBaseHeight = planeBaseHeight;\n this.container = containerElem;\n this.width = width;\n this.height = height;\n this.enableWaves = enableWaves;\n\n this.camera = new THREE.PerspectiveCamera(\n 45,\n this.width / this.height,\n 1,\n 1000,\n );\n this.camera.position.z = 30;\n\n this.scene = new THREE.Scene();\n this.mouse = { x: 0, y: 0 };\n\n this.onMouseMove = this.onMouseMove.bind(this);\n\n this.setMesh();\n this.setRenderer();\n }\n\n setMesh() {\n this.textCanvas = new CanvasTxt(this.textString, {\n fontSize: this.textFontSize,\n fontFamily: \"IBM Plex Mono\",\n color: this.textColor,\n });\n this.textCanvas.resize();\n this.textCanvas.render();\n\n this.texture = new THREE.CanvasTexture(this.textCanvas.texture);\n this.texture.minFilter = THREE.NearestFilter;\n\n const textAspect = this.textCanvas.width / this.textCanvas.height;\n const baseH = this.planeBaseHeight;\n const planeW = baseH * textAspect;\n const planeH = baseH;\n\n this.geometry = new THREE.PlaneGeometry(planeW, planeH, 36, 36);\n this.material = new THREE.ShaderMaterial({\n vertexShader,\n fragmentShader,\n transparent: true,\n uniforms: {\n uTime: { value: 0 },\n mouse: { value: 1.0 },\n uTexture: { value: this.texture },\n uEnableWaves: { value: this.enableWaves ? 1.0 : 0.0 },\n },\n });\n\n this.mesh = new THREE.Mesh(this.geometry, this.material);\n this.scene.add(this.mesh);\n }\n\n setRenderer() {\n this.renderer = new THREE.WebGLRenderer({ antialias: false, alpha: true });\n this.renderer.setPixelRatio(1);\n this.renderer.setClearColor(0x000000, 0);\n\n this.filter = new AsciiFilter(this.renderer, {\n fontFamily: \"IBM Plex Mono\",\n fontSize: this.asciiFontSize,\n invert: true,\n });\n\n this.container.appendChild(this.filter.domElement);\n this.setSize(this.width, this.height);\n\n this.container.addEventListener(\"mousemove\", this.onMouseMove);\n this.container.addEventListener(\"touchmove\", this.onMouseMove);\n }\n\n setSize(w: number, h: number) {\n this.width = w;\n this.height = h;\n\n this.camera.aspect = w / h;\n this.camera.updateProjectionMatrix();\n\n this.filter.setSize(w, h);\n\n this.center = { x: w / 2, y: h / 2 };\n }\n\n load() {\n this.animate();\n }\n\n onMouseMove(evt: any) {\n const e = evt.touches ? evt.touches[0] : evt;\n const bounds = this.container.getBoundingClientRect();\n const x = e.clientX - bounds.left;\n const y = e.clientY - bounds.top;\n this.mouse = { x, y };\n }\n\n animate() {\n const animateFrame = () => {\n this.animationFrameId = requestAnimationFrame(animateFrame);\n this.render();\n };\n animateFrame();\n }\n\n render() {\n const time = new Date().getTime() * 0.001;\n\n this.textCanvas.render();\n this.texture.needsUpdate = true;\n\n (this.mesh.material as any).uniforms.uTime.value = Math.sin(time);\n\n this.updateRotation();\n this.filter.render(this.scene, this.camera);\n }\n\n updateRotation() {\n const map = (\n n: number,\n start: number,\n stop: number,\n start2: number,\n stop2: number,\n ) => {\n return ((n - start) / (stop - start)) * (stop2 - start2) + start2;\n };\n\n const x = map(this.mouse.y, 0, this.height, 0.5, -0.5);\n const y = map(this.mouse.x, 0, this.width, -0.5, 0.5);\n\n this.mesh.rotation.x += (x - this.mesh.rotation.x) * 0.05;\n this.mesh.rotation.y += (y - this.mesh.rotation.y) * 0.05;\n }\n\n clear() {\n this.scene.traverse((obj: THREE.Object3D) => {\n if (obj instanceof THREE.Mesh) {\n if (Array.isArray(obj.material)) {\n obj.material.forEach((m: THREE.Material) => m.dispose());\n } else if (obj.material instanceof THREE.Material) {\n obj.material.dispose();\n }\n obj.geometry.dispose();\n }\n });\n this.scene.clear();\n }\n\n dispose() {\n cancelAnimationFrame(this.animationFrameId);\n this.filter.dispose();\n if (this.filter.domElement.parentNode === this.container) {\n this.container.removeChild(this.filter.domElement);\n }\n this.container.removeEventListener(\"mousemove\", this.onMouseMove);\n this.container.removeEventListener(\"touchmove\", this.onMouseMove);\n this.clear();\n this.renderer.dispose();\n }\n}\n\nexport interface ASCIITextProps {\n text?: string;\n asciiFontSize?: number;\n textFontSize?: number;\n textColor?: string;\n planeBaseHeight?: number;\n enableWaves?: boolean;\n className?: string;\n style?: React.CSSProperties;\n}\n\nexport const ASCIIText: React.FC<ASCIITextProps> = ({\n text = \"David!\",\n asciiFontSize = 8,\n textFontSize = 200,\n textColor = \"var(--ds-color-fg)\",\n planeBaseHeight = 8,\n enableWaves = true,\n className = \"\",\n style = {},\n}) => {\n const containerRef = useRef<HTMLDivElement>(null);\n const asciiRef = useRef<CanvAscii | null>(null);\n\n useEffect(() => {\n if (!containerRef.current) return;\n\n const { width, height } = containerRef.current.getBoundingClientRect();\n\n const initAscii = (w: number, h: number) => {\n if (asciiRef.current) asciiRef.current.dispose();\n asciiRef.current = new CanvAscii(\n {\n text,\n asciiFontSize,\n textFontSize,\n textColor,\n planeBaseHeight,\n enableWaves,\n },\n containerRef.current!,\n w,\n h,\n );\n asciiRef.current.load();\n };\n\n if (width === 0 || height === 0) {\n const observer = new IntersectionObserver(\n ([entry]) => {\n if (\n entry.isIntersecting &&\n entry.boundingClientRect.width > 0 &&\n entry.boundingClientRect.height > 0\n ) {\n initAscii(\n entry.boundingClientRect.width,\n entry.boundingClientRect.height,\n );\n observer.disconnect();\n }\n },\n { threshold: 0.1 },\n );\n\n observer.observe(containerRef.current);\n\n return () => {\n observer.disconnect();\n if (asciiRef.current) {\n asciiRef.current.dispose();\n }\n };\n }\n\n initAscii(width, height);\n\n const ro = new ResizeObserver((entries) => {\n if (!entries[0] || !asciiRef.current) return;\n const { width: w, height: h } = entries[0].contentRect;\n if (w > 0 && h > 0) {\n asciiRef.current.setSize(w, h);\n }\n });\n ro.observe(containerRef.current);\n\n return () => {\n ro.disconnect();\n if (asciiRef.current) {\n asciiRef.current.dispose();\n }\n };\n }, [\n text,\n asciiFontSize,\n textFontSize,\n textColor,\n planeBaseHeight,\n enableWaves,\n ]);\n\n return (\n <div\n ref={containerRef}\n className={`ascii-text-container ${className}`}\n style={{\n position: \"absolute\",\n width: \"100%\",\n height: \"100%\",\n ...style,\n }}\n >\n <style>{`\n @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500&display=swap');\n\n .ascii-text-container canvas {\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n image-rendering: optimizeSpeed;\n image-rendering: -moz-crisp-edges;\n image-rendering: -o-crisp-edges;\n image-rendering: -webkit-optimize-contrast;\n image-rendering: optimize-contrast;\n image-rendering: crisp-edges;\n image-rendering: pixelated;\n }\n\n .ascii-text-container pre {\n margin: 0;\n user-select: none;\n padding: 0;\n line-height: 1em;\n text-align: left;\n position: absolute;\n left: 0;\n top: 0;\n background-image: radial-gradient(circle, var(--ds-color-accent) 0%, var(--ds-color-accent-hover) 50%, var(--ds-color-warning) 100%);\n background-attachment: fixed;\n -webkit-text-fill-color: transparent;\n -webkit-background-clip: text;\n background-clip: text;\n z-index: 9;\n mix-blend-mode: difference;\n }\n `}</style>\n </div>\n );\n};\n\nexport default ASCIIText;\n"],"mappings":"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"}
|
|
@@ -141,4 +141,4 @@ function BackgroundGradientAnimationDemo() {
|
|
|
141
141
|
//#endregion
|
|
142
142
|
export { BackgroundGradientAnimation as n, BackgroundGradientAnimationDemo as t };
|
|
143
143
|
|
|
144
|
-
//# sourceMappingURL=background-gradient-animation-
|
|
144
|
+
//# sourceMappingURL=background-gradient-animation-BNztOaAL.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"background-gradient-animation-
|
|
1
|
+
{"version":3,"file":"background-gradient-animation-BNztOaAL.mjs","names":[],"sources":["../../src/components/effects/background-gradient-animation/BackgroundGradientAnimation.tsx","../../src/components/effects/background-gradient-animation/BackgroundGradientAnimationDemo.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport { mergeClassNames } from \"../../../utils\";\n\nexport interface BackgroundGradientAnimationProps {\n gradientBackgroundStart?: string;\n gradientBackgroundEnd?: string;\n firstColor?: string;\n secondColor?: string;\n thirdColor?: string;\n fourthColor?: string;\n fifthColor?: string;\n pointerColor?: string;\n size?: string;\n blendingValue?: string;\n children?: React.ReactNode;\n className?: string;\n interactive?: boolean;\n containerClassName?: string;\n}\n\nexport const BackgroundGradientAnimation = ({\n gradientBackgroundStart = \"rgb(108, 0, 162)\",\n gradientBackgroundEnd = \"rgb(0, 17, 82)\",\n firstColor = \"18, 113, 255\",\n secondColor = \"221, 74, 255\",\n thirdColor = \"100, 220, 255\",\n fourthColor = \"200, 50, 50\",\n fifthColor = \"180, 180, 50\",\n pointerColor = \"140, 100, 255\",\n size = \"80%\",\n blendingValue = \"hard-light\",\n children,\n className,\n interactive = true,\n containerClassName,\n}: BackgroundGradientAnimationProps) => {\n const interactiveRef = useRef<HTMLDivElement>(null);\n const containerRef = useRef<HTMLDivElement>(null);\n\n const currentPositionRef = useRef({ x: 0, y: 0 });\n const targetPositionRef = useRef({ x: 0, y: 0 });\n\n useEffect(() => {\n if (!interactive) {\n return;\n }\n\n let animationFrameId = 0;\n\n const move = () => {\n const interactiveElement = interactiveRef.current;\n\n if (interactiveElement) {\n const currentPosition = currentPositionRef.current;\n const targetPosition = targetPositionRef.current;\n\n currentPosition.x += (targetPosition.x - currentPosition.x) / 20;\n currentPosition.y += (targetPosition.y - currentPosition.y) / 20;\n\n interactiveElement.style.transform = `translate(${Math.round(\n currentPosition.x,\n )}px, ${Math.round(currentPosition.y)}px)`;\n }\n\n animationFrameId = window.requestAnimationFrame(move);\n };\n\n animationFrameId = window.requestAnimationFrame(move);\n\n return () => {\n window.cancelAnimationFrame(animationFrameId);\n };\n }, [interactive]);\n\n const handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {\n if (interactiveRef.current) {\n const rect = interactiveRef.current.getBoundingClientRect();\n targetPositionRef.current = {\n x: event.clientX - rect.left,\n y: event.clientY - rect.top,\n };\n }\n };\n\n const [isSafari] = useState(() =>\n typeof navigator !== \"undefined\"\n ? /^((?!chrome|android).)*safari/i.test(navigator.userAgent)\n : false,\n );\n\n const blobStyle = (\n color: string,\n _animationClass: string,\n transformOrigin: string,\n opacity: number = 1,\n ): React.CSSProperties => ({\n position: \"absolute\",\n width: size,\n height: size,\n top: `calc(50% - ${size} / 2)`,\n left: `calc(50% - ${size} / 2)`,\n background: `radial-gradient(circle at center, rgba(${color}, 0.8) 0, rgba(${color}, 0) 50%) no-repeat`,\n mixBlendMode: blendingValue as React.CSSProperties[\"mixBlendMode\"],\n transformOrigin,\n opacity,\n });\n\n return (\n <div\n ref={containerRef}\n className={mergeClassNames(\n \"h-screen w-screen relative overflow-hidden top-0 left-0\",\n containerClassName,\n )}\n style={{\n background: `linear-gradient(40deg, ${gradientBackgroundStart}, ${gradientBackgroundEnd})`,\n }}\n >\n <svg className=\"hidden\">\n <defs>\n <filter id=\"blurMe\">\n <feGaussianBlur\n in=\"SourceGraphic\"\n stdDeviation=\"10\"\n result=\"blur\"\n />\n <feColorMatrix\n in=\"blur\"\n mode=\"matrix\"\n values=\"1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -8\"\n result=\"goo\"\n />\n <feBlend in=\"SourceGraphic\" in2=\"goo\" />\n </filter>\n </defs>\n </svg>\n <div className={mergeClassNames(\"\", className)}>{children}</div>\n <div\n className=\"h-full w-full\"\n style={{\n filter: isSafari ? \"blur(24px)\" : \"url(#blurMe) blur(40px)\",\n }}\n >\n {/* First blob */}\n <div\n className=\"ui:animate-gradient-first\"\n style={blobStyle(\n firstColor,\n \"animate-gradient-first\",\n \"center center\",\n )}\n />\n {/* Second blob */}\n <div\n className=\"ui:animate-gradient-second\"\n style={blobStyle(\n secondColor,\n \"animate-gradient-second\",\n \"calc(50% - 400px)\",\n )}\n />\n {/* Third blob */}\n <div\n className=\"ui:animate-gradient-third\"\n style={blobStyle(\n thirdColor,\n \"animate-gradient-third\",\n \"calc(50% + 400px)\",\n )}\n />\n {/* Fourth blob */}\n <div\n className=\"ui:animate-gradient-fourth\"\n style={blobStyle(\n fourthColor,\n \"animate-gradient-fourth\",\n \"calc(50% - 200px)\",\n 0.7,\n )}\n />\n {/* Fifth blob */}\n <div\n className=\"ui:animate-gradient-fifth\"\n style={blobStyle(\n fifthColor,\n \"animate-gradient-fifth\",\n \"calc(50% - 800px) calc(50% + 800px)\",\n )}\n />\n\n {interactive && (\n <div\n ref={interactiveRef}\n onMouseMove={handleMouseMove}\n className=\"absolute w-full h-full\"\n style={{\n top: \"-50%\",\n left: \"-50%\",\n willChange: \"transform\",\n opacity: 0.7,\n background: `radial-gradient(circle at center, rgba(${pointerColor}, 0.8) 0, rgba(${pointerColor}, 0) 50%) no-repeat`,\n mixBlendMode:\n blendingValue as React.CSSProperties[\"mixBlendMode\"],\n }}\n />\n )}\n </div>\n </div>\n );\n};\n","import { BackgroundGradientAnimation } from \"./BackgroundGradientAnimation\";\n\nexport default function BackgroundGradientAnimationDemo() {\n return (\n <BackgroundGradientAnimation>\n <div className=\"ui:absolute ui:z-50 ui:inset-0 ui:flex ui:items-center ui:justify-center ui:text-white ui:font-bold ui:px-4 ui:pointer-events-none ui:text-3xl ui:text-center md:ui:text-4xl lg:ui:text-7xl\">\n <p className=\"ui:bg-clip-text ui:text-transparent ui:drop-shadow-2xl ui:bg-gradient-to-b ui:from-white/80 ui:to-white/20\">\n Gradients X Animations\n </p>\n </div>\n </BackgroundGradientAnimation>\n );\n}\n"],"mappings":";;;;AAoBA,IAAa,+BAA+B,EAC1C,0BAA0B,oBAC1B,wBAAwB,kBACxB,aAAa,gBACb,cAAc,gBACd,aAAa,iBACb,cAAc,eACd,aAAa,gBACb,eAAe,iBACf,OAAO,OACP,gBAAgB,cAChB,UACA,WACA,cAAc,MACd,yBACsC;CACtC,MAAM,iBAAiB,OAAuB,KAAK;CACnD,MAAM,eAAe,OAAuB,KAAK;CAEjD,MAAM,qBAAqB,OAAO;EAAE,GAAG;EAAG,GAAG;EAAG,CAAC;CACjD,MAAM,oBAAoB,OAAO;EAAE,GAAG;EAAG,GAAG;EAAG,CAAC;AAEhD,iBAAgB;AACd,MAAI,CAAC,YACH;EAGF,IAAI,mBAAmB;EAEvB,MAAM,aAAa;GACjB,MAAM,qBAAqB,eAAe;AAE1C,OAAI,oBAAoB;IACtB,MAAM,kBAAkB,mBAAmB;IAC3C,MAAM,iBAAiB,kBAAkB;AAEzC,oBAAgB,MAAM,eAAe,IAAI,gBAAgB,KAAK;AAC9D,oBAAgB,MAAM,eAAe,IAAI,gBAAgB,KAAK;AAE9D,uBAAmB,MAAM,YAAY,aAAa,KAAK,MACrD,gBAAgB,EACjB,CAAC,MAAM,KAAK,MAAM,gBAAgB,EAAE,CAAC;;AAGxC,sBAAmB,OAAO,sBAAsB,KAAK;;AAGvD,qBAAmB,OAAO,sBAAsB,KAAK;AAErD,eAAa;AACX,UAAO,qBAAqB,iBAAiB;;IAE9C,CAAC,YAAY,CAAC;CAEjB,MAAM,mBAAmB,UAA4C;AACnE,MAAI,eAAe,SAAS;GAC1B,MAAM,OAAO,eAAe,QAAQ,uBAAuB;AAC3D,qBAAkB,UAAU;IAC1B,GAAG,MAAM,UAAU,KAAK;IACxB,GAAG,MAAM,UAAU,KAAK;IACzB;;;CAIL,MAAM,CAAC,YAAY,eACjB,OAAO,cAAc,cACjB,iCAAiC,KAAK,UAAU,UAAU,GAC1D,MACL;CAED,MAAM,aACJ,OACA,iBACA,iBACA,UAAkB,OACO;EACzB,UAAU;EACV,OAAO;EACP,QAAQ;EACR,KAAK,cAAc,KAAK;EACxB,MAAM,cAAc,KAAK;EACzB,YAAY,0CAA0C,MAAM,iBAAiB,MAAM;EACnF,cAAc;EACd;EACA;EACD;AAED,QACE,qBAAC,OAAD;EACE,KAAK;EACL,WAAW,gBACT,2DACA,mBACD;EACD,OAAO,EACL,YAAY,0BAA0B,wBAAwB,IAAI,sBAAsB,IACzF;YARH;GAUE,oBAAC,OAAD;IAAK,WAAU;cACb,oBAAC,QAAD,EAAA,UACE,qBAAC,UAAD;KAAQ,IAAG;eAAX;MACE,oBAAC,kBAAD;OACE,IAAG;OACH,cAAa;OACb,QAAO;OACP,CAAA;MACF,oBAAC,iBAAD;OACE,IAAG;OACH,MAAK;OACL,QAAO;OACP,QAAO;OACP,CAAA;MACF,oBAAC,WAAD;OAAS,IAAG;OAAgB,KAAI;OAAQ,CAAA;MACjC;QACJ,CAAA;IACH,CAAA;GACN,oBAAC,OAAD;IAAK,WAAW,gBAAgB,IAAI,UAAU;IAAG;IAAe,CAAA;GAChE,qBAAC,OAAD;IACE,WAAU;IACV,OAAO,EACL,QAAQ,WAAW,eAAe,2BACnC;cAJH;KAOE,oBAAC,OAAD;MACE,WAAU;MACV,OAAO,UACL,YACA,0BACA,gBACD;MACD,CAAA;KAEF,oBAAC,OAAD;MACE,WAAU;MACV,OAAO,UACL,aACA,2BACA,oBACD;MACD,CAAA;KAEF,oBAAC,OAAD;MACE,WAAU;MACV,OAAO,UACL,YACA,0BACA,oBACD;MACD,CAAA;KAEF,oBAAC,OAAD;MACE,WAAU;MACV,OAAO,UACL,aACA,2BACA,qBACA,GACD;MACD,CAAA;KAEF,oBAAC,OAAD;MACE,WAAU;MACV,OAAO,UACL,YACA,0BACA,sCACD;MACD,CAAA;KAED,eACC,oBAAC,OAAD;MACE,KAAK;MACL,aAAa;MACb,WAAU;MACV,OAAO;OACL,KAAK;OACL,MAAM;OACN,YAAY;OACZ,SAAS;OACT,YAAY,0CAA0C,aAAa,iBAAiB,aAAa;OACjG,cACE;OACH;MACD,CAAA;KAEA;;GACF;;;;;AC7MV,SAAwB,kCAAkC;AACxD,QACE,oBAAC,6BAAD,EAAA,UACE,oBAAC,OAAD;EAAK,WAAU;YACb,oBAAC,KAAD;GAAG,WAAU;aAA6G;GAEtH,CAAA;EACA,CAAA,EACsB,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"background-gradient-animation-
|
|
1
|
+
{"version":3,"file":"background-gradient-animation-C0jV3b6l.cjs","names":[],"sources":["../../src/components/effects/background-gradient-animation/BackgroundGradientAnimation.tsx","../../src/components/effects/background-gradient-animation/BackgroundGradientAnimationDemo.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport { mergeClassNames } from \"../../../utils\";\n\nexport interface BackgroundGradientAnimationProps {\n gradientBackgroundStart?: string;\n gradientBackgroundEnd?: string;\n firstColor?: string;\n secondColor?: string;\n thirdColor?: string;\n fourthColor?: string;\n fifthColor?: string;\n pointerColor?: string;\n size?: string;\n blendingValue?: string;\n children?: React.ReactNode;\n className?: string;\n interactive?: boolean;\n containerClassName?: string;\n}\n\nexport const BackgroundGradientAnimation = ({\n gradientBackgroundStart = \"rgb(108, 0, 162)\",\n gradientBackgroundEnd = \"rgb(0, 17, 82)\",\n firstColor = \"18, 113, 255\",\n secondColor = \"221, 74, 255\",\n thirdColor = \"100, 220, 255\",\n fourthColor = \"200, 50, 50\",\n fifthColor = \"180, 180, 50\",\n pointerColor = \"140, 100, 255\",\n size = \"80%\",\n blendingValue = \"hard-light\",\n children,\n className,\n interactive = true,\n containerClassName,\n}: BackgroundGradientAnimationProps) => {\n const interactiveRef = useRef<HTMLDivElement>(null);\n const containerRef = useRef<HTMLDivElement>(null);\n\n const currentPositionRef = useRef({ x: 0, y: 0 });\n const targetPositionRef = useRef({ x: 0, y: 0 });\n\n useEffect(() => {\n if (!interactive) {\n return;\n }\n\n let animationFrameId = 0;\n\n const move = () => {\n const interactiveElement = interactiveRef.current;\n\n if (interactiveElement) {\n const currentPosition = currentPositionRef.current;\n const targetPosition = targetPositionRef.current;\n\n currentPosition.x += (targetPosition.x - currentPosition.x) / 20;\n currentPosition.y += (targetPosition.y - currentPosition.y) / 20;\n\n interactiveElement.style.transform = `translate(${Math.round(\n currentPosition.x,\n )}px, ${Math.round(currentPosition.y)}px)`;\n }\n\n animationFrameId = window.requestAnimationFrame(move);\n };\n\n animationFrameId = window.requestAnimationFrame(move);\n\n return () => {\n window.cancelAnimationFrame(animationFrameId);\n };\n }, [interactive]);\n\n const handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {\n if (interactiveRef.current) {\n const rect = interactiveRef.current.getBoundingClientRect();\n targetPositionRef.current = {\n x: event.clientX - rect.left,\n y: event.clientY - rect.top,\n };\n }\n };\n\n const [isSafari] = useState(() =>\n typeof navigator !== \"undefined\"\n ? /^((?!chrome|android).)*safari/i.test(navigator.userAgent)\n : false,\n );\n\n const blobStyle = (\n color: string,\n _animationClass: string,\n transformOrigin: string,\n opacity: number = 1,\n ): React.CSSProperties => ({\n position: \"absolute\",\n width: size,\n height: size,\n top: `calc(50% - ${size} / 2)`,\n left: `calc(50% - ${size} / 2)`,\n background: `radial-gradient(circle at center, rgba(${color}, 0.8) 0, rgba(${color}, 0) 50%) no-repeat`,\n mixBlendMode: blendingValue as React.CSSProperties[\"mixBlendMode\"],\n transformOrigin,\n opacity,\n });\n\n return (\n <div\n ref={containerRef}\n className={mergeClassNames(\n \"h-screen w-screen relative overflow-hidden top-0 left-0\",\n containerClassName,\n )}\n style={{\n background: `linear-gradient(40deg, ${gradientBackgroundStart}, ${gradientBackgroundEnd})`,\n }}\n >\n <svg className=\"hidden\">\n <defs>\n <filter id=\"blurMe\">\n <feGaussianBlur\n in=\"SourceGraphic\"\n stdDeviation=\"10\"\n result=\"blur\"\n />\n <feColorMatrix\n in=\"blur\"\n mode=\"matrix\"\n values=\"1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -8\"\n result=\"goo\"\n />\n <feBlend in=\"SourceGraphic\" in2=\"goo\" />\n </filter>\n </defs>\n </svg>\n <div className={mergeClassNames(\"\", className)}>{children}</div>\n <div\n className=\"h-full w-full\"\n style={{\n filter: isSafari ? \"blur(24px)\" : \"url(#blurMe) blur(40px)\",\n }}\n >\n {/* First blob */}\n <div\n className=\"ui:animate-gradient-first\"\n style={blobStyle(\n firstColor,\n \"animate-gradient-first\",\n \"center center\",\n )}\n />\n {/* Second blob */}\n <div\n className=\"ui:animate-gradient-second\"\n style={blobStyle(\n secondColor,\n \"animate-gradient-second\",\n \"calc(50% - 400px)\",\n )}\n />\n {/* Third blob */}\n <div\n className=\"ui:animate-gradient-third\"\n style={blobStyle(\n thirdColor,\n \"animate-gradient-third\",\n \"calc(50% + 400px)\",\n )}\n />\n {/* Fourth blob */}\n <div\n className=\"ui:animate-gradient-fourth\"\n style={blobStyle(\n fourthColor,\n \"animate-gradient-fourth\",\n \"calc(50% - 200px)\",\n 0.7,\n )}\n />\n {/* Fifth blob */}\n <div\n className=\"ui:animate-gradient-fifth\"\n style={blobStyle(\n fifthColor,\n \"animate-gradient-fifth\",\n \"calc(50% - 800px) calc(50% + 800px)\",\n )}\n />\n\n {interactive && (\n <div\n ref={interactiveRef}\n onMouseMove={handleMouseMove}\n className=\"absolute w-full h-full\"\n style={{\n top: \"-50%\",\n left: \"-50%\",\n willChange: \"transform\",\n opacity: 0.7,\n background: `radial-gradient(circle at center, rgba(${pointerColor}, 0.8) 0, rgba(${pointerColor}, 0) 50%) no-repeat`,\n mixBlendMode:\n blendingValue as React.CSSProperties[\"mixBlendMode\"],\n }}\n />\n )}\n </div>\n </div>\n );\n};\n","import { BackgroundGradientAnimation } from \"./BackgroundGradientAnimation\";\n\nexport default function BackgroundGradientAnimationDemo() {\n return (\n <BackgroundGradientAnimation>\n <div className=\"ui:absolute ui:z-50 ui:inset-0 ui:flex ui:items-center ui:justify-center ui:text-white ui:font-bold ui:px-4 ui:pointer-events-none ui:text-3xl ui:text-center md:ui:text-4xl lg:ui:text-7xl\">\n <p className=\"ui:bg-clip-text ui:text-transparent ui:drop-shadow-2xl ui:bg-gradient-to-b ui:from-white/80 ui:to-white/20\">\n Gradients X Animations\n </p>\n </div>\n </BackgroundGradientAnimation>\n );\n}\n"],"mappings":"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"}
|