erp-pro-ui 0.1.8 → 0.2.0
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 +94 -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/carousel.cjs +1 -1
- package/dist/carousel.mjs +1 -1
- package/dist/charts.cjs +1 -1
- package/dist/charts.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/{DropdownMenu-DOvo5pV_.cjs → DropdownMenu-BDrNYO-D.cjs} +6 -5
- package/dist/chunks/DropdownMenu-BDrNYO-D.cjs.map +1 -0
- package/dist/chunks/{DropdownMenu-C17Zqu_E.mjs → DropdownMenu-BtTOri-A.mjs} +6 -5
- package/dist/chunks/DropdownMenu-BtTOri-A.mjs.map +1 -0
- package/dist/chunks/{HoverBorderGradient-C5D6lGg0.cjs → HoverBorderGradient-9pfvBoHR.cjs} +2 -2
- package/dist/chunks/{HoverBorderGradient-C5D6lGg0.cjs.map → HoverBorderGradient-9pfvBoHR.cjs.map} +1 -1
- package/dist/chunks/{HoverBorderGradient-CduqqQgX.mjs → HoverBorderGradient-NbdXeLgC.mjs} +2 -2
- package/dist/chunks/{HoverBorderGradient-CduqqQgX.mjs.map → HoverBorderGradient-NbdXeLgC.mjs.map} +1 -1
- package/dist/chunks/SunToMoonButton-BkEfkElJ.mjs.map +1 -1
- package/dist/chunks/SunToMoonButton-jS4BJD9q.cjs.map +1 -1
- package/dist/chunks/{tooltip-PJaQa8_l.cjs → Tooltip-DD30yj3A.cjs} +1 -1
- package/dist/chunks/{tooltip-PJaQa8_l.cjs.map → Tooltip-DD30yj3A.cjs.map} +1 -1
- package/dist/chunks/{tooltip-CmB8xKOF.mjs → Tooltip-DK3B879v.mjs} +1 -1
- package/dist/chunks/{tooltip-CmB8xKOF.mjs.map → Tooltip-DK3B879v.mjs.map} +1 -1
- package/dist/chunks/animated-content-CLsFnjgr.cjs.map +1 -1
- package/dist/chunks/animated-content-bK6xp-vc.mjs.map +1 -1
- package/dist/chunks/{ascii-text-OnPOTd2I.cjs → ascii-text-BFnpVur6.cjs} +5 -3
- package/dist/chunks/{ascii-text-OnPOTd2I.cjs.map → ascii-text-BFnpVur6.cjs.map} +1 -1
- package/dist/chunks/{ascii-text-OBwVLFDC.mjs → ascii-text-Bdy4C5rU.mjs} +5 -3
- package/dist/chunks/{ascii-text-OBwVLFDC.mjs.map → ascii-text-Bdy4C5rU.mjs.map} +1 -1
- package/dist/chunks/{background-gradient-animation-DpKJ3ecq.mjs → background-gradient-animation-BR9wx6Z8.mjs} +2 -2
- package/dist/chunks/{background-gradient-animation-DpKJ3ecq.mjs.map → background-gradient-animation-BR9wx6Z8.mjs.map} +1 -1
- package/dist/chunks/{background-gradient-animation-II9hdrgB.cjs → background-gradient-animation-CiNdmA61.cjs} +2 -2
- package/dist/chunks/{background-gradient-animation-II9hdrgB.cjs.map → background-gradient-animation-CiNdmA61.cjs.map} +1 -1
- package/dist/chunks/{button-DddUhuR-.mjs → button-A6UTvrOu.mjs} +2 -2
- package/dist/chunks/{button-DddUhuR-.mjs.map → button-A6UTvrOu.mjs.map} +1 -1
- package/dist/chunks/{button-xqernofO.cjs → button-C4MXPxsC.cjs} +2 -2
- package/dist/chunks/{button-xqernofO.cjs.map → button-C4MXPxsC.cjs.map} +1 -1
- package/dist/chunks/{button-hover-border-gradient-DFppVRI4.mjs → button-hover-border-gradient-DnFvjNNw.mjs} +2 -2
- package/dist/chunks/{button-hover-border-gradient-DFppVRI4.mjs.map → button-hover-border-gradient-DnFvjNNw.mjs.map} +1 -1
- package/dist/chunks/{button-hover-border-gradient-DX2lBG5C.cjs → button-hover-border-gradient-ssmwU5-U.cjs} +2 -2
- package/dist/chunks/{button-hover-border-gradient-DX2lBG5C.cjs.map → button-hover-border-gradient-ssmwU5-U.cjs.map} +1 -1
- package/dist/chunks/{calendar-BOBm3dFA.mjs → calendar-5XzPqKbE.mjs} +4 -4
- package/dist/chunks/calendar-5XzPqKbE.mjs.map +1 -0
- package/dist/chunks/{calendar-DJkfDhQA.cjs → calendar-CQJgQ5H_.cjs} +4 -4
- package/dist/chunks/calendar-CQJgQ5H_.cjs.map +1 -0
- package/dist/chunks/{carousel-F4drTOr6.cjs → carousel-Cv0m1Pp5.cjs} +2 -2
- package/dist/chunks/{carousel-DUqOaYvs.mjs.map → carousel-Cv0m1Pp5.cjs.map} +1 -1
- package/dist/chunks/{carousel-DUqOaYvs.mjs → carousel-Dd4rp-jr.mjs} +2 -2
- package/dist/chunks/{carousel-F4drTOr6.cjs.map → carousel-Dd4rp-jr.mjs.map} +1 -1
- package/dist/chunks/{charts-CZEYcr6X.cjs → charts-BmIV-mJy.cjs} +41 -10
- package/dist/chunks/charts-BmIV-mJy.cjs.map +1 -0
- package/dist/chunks/{charts-C-Qee_JY.mjs → charts-DkVu0rFc.mjs} +41 -10
- package/dist/chunks/charts-DkVu0rFc.mjs.map +1 -0
- package/dist/chunks/{chip-CMs73sc5.cjs → chip-B0YzBwkz.cjs} +10 -7
- package/dist/chunks/chip-B0YzBwkz.cjs.map +1 -0
- package/dist/chunks/{chip-BFg3DJx6.mjs → chip-CqcdcSs2.mjs} +10 -7
- package/dist/chunks/chip-CqcdcSs2.mjs.map +1 -0
- package/dist/chunks/{chroma-grid-tJX7CzCS.cjs → chroma-grid-DcZ9f4Ui.cjs} +2 -2
- package/dist/chunks/{chroma-grid-tJX7CzCS.cjs.map → chroma-grid-DcZ9f4Ui.cjs.map} +1 -1
- package/dist/chunks/{chroma-grid-DlY9hIRI.mjs → chroma-grid-opB2DBtS.mjs} +2 -2
- package/dist/chunks/{chroma-grid-DlY9hIRI.mjs.map → chroma-grid-opB2DBtS.mjs.map} +1 -1
- package/dist/chunks/color-palette-C3lesasJ.mjs +329 -0
- package/dist/chunks/color-palette-C3lesasJ.mjs.map +1 -0
- package/dist/chunks/color-palette-pLh6En3n.cjs +384 -0
- package/dist/chunks/color-palette-pLh6En3n.cjs.map +1 -0
- package/dist/chunks/{combobox-Bcwi33Qx.mjs → combobox-B6yk5U82.mjs} +6 -6
- package/dist/chunks/combobox-B6yk5U82.mjs.map +1 -0
- package/dist/chunks/{combobox-DRiHHhXL.cjs → combobox-CtNrGmuR.cjs} +6 -6
- package/dist/chunks/combobox-CtNrGmuR.cjs.map +1 -0
- package/dist/chunks/{data-table-Biom5rvs.mjs → data-table-Dtf6lKpp.mjs} +19 -19
- package/dist/chunks/data-table-Dtf6lKpp.mjs.map +1 -0
- package/dist/chunks/{data-table-D0BD2sFz.cjs → data-table-fAEuevPn.cjs} +20 -20
- package/dist/chunks/data-table-fAEuevPn.cjs.map +1 -0
- package/dist/chunks/{date-picker-CXGwnrLr.mjs → date-picker-BmQ0rgwH.mjs} +2 -2
- package/dist/chunks/{date-picker-CXGwnrLr.mjs.map → date-picker-BmQ0rgwH.mjs.map} +1 -1
- package/dist/chunks/{date-picker-Cw_tZGuk.cjs → date-picker-qpUZMtZC.cjs} +2 -2
- package/dist/chunks/{date-picker-Cw_tZGuk.cjs.map → date-picker-qpUZMtZC.cjs.map} +1 -1
- package/dist/chunks/dialog-CanVyiAD.mjs.map +1 -1
- package/dist/chunks/dialog-fffx1-4D.cjs.map +1 -1
- package/dist/chunks/{drawer-DTRnKChF.cjs → drawer-D07dGN6R.cjs} +6 -6
- package/dist/chunks/drawer-D07dGN6R.cjs.map +1 -0
- package/dist/chunks/{drawer-BJsBK6cP.mjs → drawer-DaoAXL-w.mjs} +6 -6
- package/dist/chunks/drawer-DaoAXL-w.mjs.map +1 -0
- package/dist/chunks/{form-CvNNjA1i.mjs → form-CtZ6U-_B.mjs} +2 -2
- package/dist/chunks/{form-CvNNjA1i.mjs.map → form-CtZ6U-_B.mjs.map} +1 -1
- package/dist/chunks/{form-C_JxqsSZ.cjs → form-X6Vyaavl.cjs} +2 -2
- package/dist/chunks/{form-C_JxqsSZ.cjs.map → form-X6Vyaavl.cjs.map} +1 -1
- package/dist/chunks/{gradual-blur-BB-8oKX6.cjs → gradual-blur-C6NOnjTw.cjs} +2 -2
- package/dist/chunks/{gradual-blur-BB-8oKX6.cjs.map → gradual-blur-C6NOnjTw.cjs.map} +1 -1
- package/dist/chunks/{gradual-blur-BR06yO3Y.mjs → gradual-blur-DXfxpCdB.mjs} +2 -2
- package/dist/chunks/{gradual-blur-BR06yO3Y.mjs.map → gradual-blur-DXfxpCdB.mjs.map} +1 -1
- package/dist/chunks/{input-Dox16Ozo.mjs → input-Bqo9Q5zF.mjs} +34 -13
- package/dist/chunks/input-Bqo9Q5zF.mjs.map +1 -0
- package/dist/chunks/{input-T4OlFhBc.cjs → input-DkCPyWXi.cjs} +34 -13
- package/dist/chunks/input-DkCPyWXi.cjs.map +1 -0
- package/dist/chunks/{label-CxmbGh0l.cjs → label-BKzqfAAq.cjs} +2 -2
- package/dist/chunks/{label-CxmbGh0l.cjs.map → label-BKzqfAAq.cjs.map} +1 -1
- package/dist/chunks/{label-C1Ekt3j2.mjs → label-Drxg0cG2.mjs} +2 -2
- package/dist/chunks/{label-C1Ekt3j2.mjs.map → label-Drxg0cG2.mjs.map} +1 -1
- package/dist/chunks/loading-BiM4mKh6.cjs.map +1 -1
- package/dist/chunks/loading-Dtosnb4A.mjs.map +1 -1
- package/dist/chunks/{multi-select-combobox-BzqYLVpV.cjs → multi-select-combobox-C0DoDzxQ.cjs} +6 -6
- package/dist/chunks/multi-select-combobox-C0DoDzxQ.cjs.map +1 -0
- package/dist/chunks/{multi-select-combobox-BrFtvCrS.mjs → multi-select-combobox-Do23ZfOQ.mjs} +6 -6
- package/dist/chunks/multi-select-combobox-Do23ZfOQ.mjs.map +1 -0
- package/dist/chunks/otp-input-CkhV-sGl.cjs.map +1 -1
- package/dist/chunks/otp-input-JOysxKfD.mjs.map +1 -1
- package/dist/chunks/{password-strength-meter-BEx94cfy.mjs → password-strength-meter-BsvqQBAg.mjs} +3 -3
- package/dist/chunks/{password-strength-meter-BEx94cfy.mjs.map → password-strength-meter-BsvqQBAg.mjs.map} +1 -1
- package/dist/chunks/{password-strength-meter-BNnmSgLh.cjs → password-strength-meter-DCi_BP7e.cjs} +3 -3
- package/dist/chunks/{password-strength-meter-BNnmSgLh.cjs.map → password-strength-meter-DCi_BP7e.cjs.map} +1 -1
- package/dist/chunks/{progress-bar-DS8KZ7eO.cjs → progress-bar-CYaBO_lS.cjs} +2 -2
- package/dist/chunks/{progress-bar-DS8KZ7eO.cjs.map → progress-bar-CYaBO_lS.cjs.map} +1 -1
- package/dist/chunks/{progress-bar-C9O0tuZf.mjs → progress-bar-DQ5ZKk2Y.mjs} +2 -2
- package/dist/chunks/{progress-bar-C9O0tuZf.mjs.map → progress-bar-DQ5ZKk2Y.mjs.map} +1 -1
- package/dist/chunks/radio-CuiM_gDv.mjs +50 -0
- package/dist/chunks/radio-CuiM_gDv.mjs.map +1 -0
- package/dist/chunks/radio-zx9xEW_C.cjs +56 -0
- package/dist/chunks/radio-zx9xEW_C.cjs.map +1 -0
- package/dist/chunks/{select-D0GOBB-b.mjs → select-CUaSNR09.mjs} +6 -6
- package/dist/chunks/select-CUaSNR09.mjs.map +1 -0
- package/dist/chunks/{select-CORFYTvs.cjs → select-bZ9WqLOc.cjs} +6 -6
- package/dist/chunks/select-bZ9WqLOc.cjs.map +1 -0
- package/dist/chunks/{sidebar-BrOLz89T.mjs → sidebar-DYEDFV2u.mjs} +242 -231
- package/dist/chunks/sidebar-DYEDFV2u.mjs.map +1 -0
- package/dist/chunks/{sidebar-D9D651F6.cjs → sidebar-Kkr45nuN.cjs} +241 -230
- package/dist/chunks/sidebar-Kkr45nuN.cjs.map +1 -0
- package/dist/chunks/{skeleton-wQOE-pRg.cjs → skeleton-DCBGLNAZ.cjs} +2 -2
- package/dist/chunks/{skeleton-wQOE-pRg.cjs.map → skeleton-DCBGLNAZ.cjs.map} +1 -1
- package/dist/chunks/{skeleton-BdijDxP6.mjs → skeleton-nH1eAN96.mjs} +2 -2
- package/dist/chunks/{skeleton-BdijDxP6.mjs.map → skeleton-nH1eAN96.mjs.map} +1 -1
- package/dist/chunks/{splash-cursor-CCi5n3O-.cjs → splash-cursor-BqG7ClsJ.cjs} +2 -2
- package/dist/chunks/{splash-cursor-CCi5n3O-.cjs.map → splash-cursor-BqG7ClsJ.cjs.map} +1 -1
- package/dist/chunks/{splash-cursor-CDHTm5vA.mjs → splash-cursor-N4FdnkOa.mjs} +2 -2
- package/dist/chunks/{splash-cursor-CDHTm5vA.mjs.map → splash-cursor-N4FdnkOa.mjs.map} +1 -1
- package/dist/chunks/{spotlight-card-Bh7KG0vZ.cjs → spotlight-card-BmsqC7wm.cjs} +2 -2
- package/dist/chunks/{spotlight-card-Bh7KG0vZ.cjs.map → spotlight-card-BmsqC7wm.cjs.map} +1 -1
- package/dist/chunks/{spotlight-card-D0uTxfPZ.mjs → spotlight-card-D9Z3nTmb.mjs} +2 -2
- package/dist/chunks/{spotlight-card-D0uTxfPZ.mjs.map → spotlight-card-D9Z3nTmb.mjs.map} +1 -1
- package/dist/chunks/{stepper-Z_7ugZJN.cjs → stepper-DepvEGfr.cjs} +4 -4
- package/dist/chunks/{stepper-Z_7ugZJN.cjs.map → stepper-DepvEGfr.cjs.map} +1 -1
- package/dist/chunks/{stepper-BMKxjCdm.mjs → stepper-Jv5OS1nY.mjs} +4 -4
- package/dist/chunks/{stepper-BMKxjCdm.mjs.map → stepper-Jv5OS1nY.mjs.map} +1 -1
- package/dist/chunks/{sun-to-moon-button-DcRX0obV.mjs → sun-to-moon-button-BJtBEaa3.mjs} +70 -51
- package/dist/chunks/sun-to-moon-button-BJtBEaa3.mjs.map +1 -0
- package/dist/chunks/{sun-to-moon-button-De0_Sf01.cjs → sun-to-moon-button-PwgTPsTW.cjs} +70 -51
- package/dist/chunks/sun-to-moon-button-PwgTPsTW.cjs.map +1 -0
- package/dist/chunks/{switch-DPyzVrNh.cjs → switch-X3l8xnle.cjs} +10 -29
- package/dist/chunks/switch-X3l8xnle.cjs.map +1 -0
- package/dist/chunks/{switch-C1gKE0m0.mjs → switch-iPsN1NS2.mjs} +10 -29
- package/dist/chunks/switch-iPsN1NS2.mjs.map +1 -0
- package/dist/chunks/{textarea-BY5-J9No.mjs → textarea-Bdo-Trvi.mjs} +2 -2
- package/dist/chunks/{textarea-BY5-J9No.mjs.map → textarea-Bdo-Trvi.mjs.map} +1 -1
- package/dist/chunks/{textarea-D-oBQ3IZ.cjs → textarea-CGRl2hrM.cjs} +2 -2
- package/dist/chunks/{textarea-D-oBQ3IZ.cjs.map → textarea-CGRl2hrM.cjs.map} +1 -1
- package/dist/chunks/toast-BcBidy5n.mjs.map +1 -1
- package/dist/chunks/toast-DiFgv3IL.cjs.map +1 -1
- package/dist/chunks/{truncated-text-istgJRUq.cjs → truncated-text-BIXqNfOL.cjs} +2 -2
- package/dist/chunks/{truncated-text-istgJRUq.cjs.map → truncated-text-BIXqNfOL.cjs.map} +1 -1
- package/dist/chunks/{truncated-text-DTgks5yS.mjs → truncated-text-C9t9o9IA.mjs} +2 -2
- package/dist/chunks/{truncated-text-DTgks5yS.mjs.map → truncated-text-C9t9o9IA.mjs.map} +1 -1
- package/dist/chunks/{typography-C_IanU4b.mjs → typography-Ct-jDJP3.mjs} +2 -2
- package/dist/chunks/{typography-C_IanU4b.mjs.map → typography-Ct-jDJP3.mjs.map} +1 -1
- package/dist/chunks/{typography-DUD6Dzd5.cjs → typography-LwwY_MOy.cjs} +2 -2
- package/dist/chunks/{typography-DUD6Dzd5.cjs.map → typography-LwwY_MOy.cjs.map} +1 -1
- package/dist/chunks/{utils-ati1KkDb.mjs → utils-7S0u48mU.mjs} +1339 -1
- package/dist/chunks/{utils-B4SmmY4J.cjs.map → utils-7S0u48mU.mjs.map} +1 -1
- package/dist/chunks/{utils-B4SmmY4J.cjs → utils-LRbEQHYs.cjs} +1339 -1
- package/dist/chunks/{utils-ati1KkDb.mjs.map → utils-LRbEQHYs.cjs.map} +1 -1
- package/dist/color-palette.cjs +9 -1
- package/dist/color-palette.mjs +2 -2
- package/dist/combobox.cjs +1 -1
- package/dist/combobox.mjs +1 -1
- package/dist/components/data-display/charts/BarChart.d.ts +5 -0
- package/dist/components/data-display/charts/BarChart.d.ts.map +1 -1
- package/dist/components/data-display/chip/Chip.d.ts +1 -1
- package/dist/components/data-display/chip/Chip.d.ts.map +1 -1
- package/dist/components/data-display/color-palette/ColorPalette.d.ts +24 -16
- package/dist/components/data-display/color-palette/ColorPalette.d.ts.map +1 -1
- package/dist/components/data-display/color-palette/index.d.ts +2 -1
- package/dist/components/data-display/color-palette/index.d.ts.map +1 -1
- package/dist/components/data-display/dashboard-cards/ChartCard.d.ts +15 -0
- package/dist/components/data-display/dashboard-cards/ChartCard.d.ts.map +1 -0
- package/dist/components/data-display/dashboard-cards/StatCard.d.ts +42 -0
- package/dist/components/data-display/dashboard-cards/StatCard.d.ts.map +1 -0
- package/dist/components/data-display/dashboard-cards/TopProductsCard.d.ts +17 -0
- package/dist/components/data-display/dashboard-cards/TopProductsCard.d.ts.map +1 -0
- package/dist/components/data-display/dashboard-cards/index.d.ts +7 -0
- package/dist/components/data-display/dashboard-cards/index.d.ts.map +1 -0
- package/dist/components/effects/sun-to-moon-button/ThemeSwitcherButtons.d.ts +16 -1
- package/dist/components/effects/sun-to-moon-button/ThemeSwitcherButtons.d.ts.map +1 -1
- package/dist/components/effects/sun-to-moon-button/index.d.ts +1 -1
- package/dist/components/effects/sun-to-moon-button/index.d.ts.map +1 -1
- package/dist/components/forms/input/Input.d.ts.map +1 -1
- package/dist/components/forms/input/types.d.ts +2 -0
- package/dist/components/forms/input/types.d.ts.map +1 -1
- package/dist/components/forms/radio/Radio.d.ts.map +1 -1
- package/dist/components/forms/switch/Switch.d.ts.map +1 -1
- package/dist/components/navigation/sidebar/DashboardSidebarShell.d.ts +26 -6
- package/dist/components/navigation/sidebar/DashboardSidebarShell.d.ts.map +1 -1
- package/dist/components/navigation/sidebar/index.d.ts +1 -0
- package/dist/components/navigation/sidebar/index.d.ts.map +1 -1
- package/dist/components/overlays/dropdown-menu/DropdownMenu.d.ts +1 -1
- package/dist/components/overlays/dropdown-menu/DropdownMenu.d.ts.map +1 -1
- package/dist/components/overlays/dropdown-menu/types.d.ts +1 -0
- package/dist/components/overlays/dropdown-menu/types.d.ts.map +1 -1
- 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/docs.cjs.map +1 -1
- 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/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/index.cjs +325 -38
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +5 -3
- package/dist/index.d.ts.map +1 -1
- package/dist/index.mjs +315 -39
- 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/multi-select-combobox.cjs +1 -1
- package/dist/multi-select-combobox.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/sidebar.cjs +1 -1
- package/dist/sidebar.mjs +1 -1
- package/dist/skeleton.cjs +1 -1
- package/dist/skeleton.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/tooltip.cjs +2 -2
- package/dist/tooltip.mjs +1 -1
- package/dist/truncated-text.cjs +1 -1
- package/dist/truncated-text.mjs +1 -1
- package/dist/typography.cjs +1 -1
- package/dist/typography.mjs +1 -1
- package/dist/utils.cjs +1 -1
- package/dist/utils.mjs +1 -1
- package/package.json +8 -8
- package/dist/chunks/DropdownMenu-C17Zqu_E.mjs.map +0 -1
- package/dist/chunks/DropdownMenu-DOvo5pV_.cjs.map +0 -1
- package/dist/chunks/calendar-BOBm3dFA.mjs.map +0 -1
- package/dist/chunks/calendar-DJkfDhQA.cjs.map +0 -1
- package/dist/chunks/charts-C-Qee_JY.mjs.map +0 -1
- package/dist/chunks/charts-CZEYcr6X.cjs.map +0 -1
- package/dist/chunks/chip-BFg3DJx6.mjs.map +0 -1
- package/dist/chunks/chip-CMs73sc5.cjs.map +0 -1
- package/dist/chunks/color-palette-BmQC14gE.cjs +0 -789
- package/dist/chunks/color-palette-BmQC14gE.cjs.map +0 -1
- package/dist/chunks/color-palette-DnX1sODj.mjs +0 -782
- package/dist/chunks/color-palette-DnX1sODj.mjs.map +0 -1
- package/dist/chunks/combobox-Bcwi33Qx.mjs.map +0 -1
- package/dist/chunks/combobox-DRiHHhXL.cjs.map +0 -1
- package/dist/chunks/data-table-Biom5rvs.mjs.map +0 -1
- package/dist/chunks/data-table-D0BD2sFz.cjs.map +0 -1
- package/dist/chunks/drawer-BJsBK6cP.mjs.map +0 -1
- package/dist/chunks/drawer-DTRnKChF.cjs.map +0 -1
- package/dist/chunks/input-Dox16Ozo.mjs.map +0 -1
- package/dist/chunks/input-T4OlFhBc.cjs.map +0 -1
- package/dist/chunks/multi-select-combobox-BrFtvCrS.mjs.map +0 -1
- package/dist/chunks/multi-select-combobox-BzqYLVpV.cjs.map +0 -1
- package/dist/chunks/radio-BiD1ofmq.cjs +0 -50
- package/dist/chunks/radio-BiD1ofmq.cjs.map +0 -1
- package/dist/chunks/radio-C7Eg3FEp.mjs +0 -44
- package/dist/chunks/radio-C7Eg3FEp.mjs.map +0 -1
- package/dist/chunks/select-CORFYTvs.cjs.map +0 -1
- package/dist/chunks/select-D0GOBB-b.mjs.map +0 -1
- package/dist/chunks/sidebar-BrOLz89T.mjs.map +0 -1
- package/dist/chunks/sidebar-D9D651F6.cjs.map +0 -1
- package/dist/chunks/sun-to-moon-button-DcRX0obV.mjs.map +0 -1
- package/dist/chunks/sun-to-moon-button-De0_Sf01.cjs.map +0 -1
- package/dist/chunks/switch-C1gKE0m0.mjs.map +0 -1
- package/dist/chunks/switch-DPyzVrNh.cjs.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"
|
|
1
|
+
{"version":3,"file":"Tooltip-DK3B879v.mjs","names":[],"sources":["../../src/components/overlays/tooltip/Tooltip.tsx"],"sourcesContent":["import { useState, useRef, useEffect, useCallback } from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\n\nexport type TooltipPosition = \"top\" | \"bottom\" | \"left\" | \"right\";\nexport type TooltipTrigger = \"hover\" | \"click\" | \"focus\";\n\nexport interface TooltipProps {\n /** The content to display in the tooltip */\n content: React.ReactNode;\n /** The element that triggers the tooltip */\n children: React.ReactElement;\n /** Position of the tooltip relative to the trigger */\n position?: TooltipPosition;\n /** How the tooltip is triggered */\n trigger?: TooltipTrigger;\n /** Delay before showing tooltip (ms) */\n delayShow?: number;\n /** Delay before hiding tooltip (ms) */\n delayHide?: number;\n /** Whether the tooltip is disabled */\n disabled?: boolean;\n /** Custom className for the tooltip */\n className?: string;\n /** Whether to show an arrow pointing to the trigger */\n arrow?: boolean;\n /** Maximum width of the tooltip */\n maxWidth?: number;\n /** Controlled open state */\n open?: boolean;\n /** Callback when open state changes */\n onOpenChange?: (open: boolean) => void;\n}\n\nconst positionStyles: Record<TooltipPosition, string> = {\n top: \"bottom-full left-1/2 -translate-x-1/2 mb-2\",\n bottom: \"top-full left-1/2 -translate-x-1/2 mt-2\",\n left: \"right-full top-1/2 -translate-y-1/2 mr-2\",\n right: \"left-full top-1/2 -translate-y-1/2 ml-2\",\n};\n\nconst arrowStyles: Record<TooltipPosition, string> = {\n top: \"top-full left-1/2 -translate-x-1/2 border-t-ds-surface-2 border-x-transparent border-b-transparent border-t-[6px] border-x-[6px] border-b-0\",\n bottom:\n \"bottom-full left-1/2 -translate-x-1/2 border-b-ds-surface-2 border-x-transparent border-t-transparent border-b-[6px] border-x-[6px] border-t-0\",\n left: \"left-full top-1/2 -translate-y-1/2 border-l-ds-surface-2 border-y-transparent border-r-transparent border-l-[6px] border-y-[6px] border-r-0\",\n right:\n \"right-full top-1/2 -translate-y-1/2 border-r-ds-surface-2 border-y-transparent border-l-transparent border-r-[6px] border-y-[6px] border-l-0\",\n};\n\nconst motionVariants = {\n top: {\n initial: { opacity: 0, y: 4, scale: 0.95 },\n animate: { opacity: 1, y: 0, scale: 1 },\n exit: { opacity: 0, y: 4, scale: 0.95 },\n },\n bottom: {\n initial: { opacity: 0, y: -4, scale: 0.95 },\n animate: { opacity: 1, y: 0, scale: 1 },\n exit: { opacity: 0, y: -4, scale: 0.95 },\n },\n left: {\n initial: { opacity: 0, x: 4, scale: 0.95 },\n animate: { opacity: 1, x: 0, scale: 1 },\n exit: { opacity: 0, x: 4, scale: 0.95 },\n },\n right: {\n initial: { opacity: 0, x: -4, scale: 0.95 },\n animate: { opacity: 1, x: 0, scale: 1 },\n exit: { opacity: 0, x: -4, scale: 0.95 },\n },\n} as const;\n\nexport default function Tooltip({\n content,\n children,\n position = \"top\",\n trigger = \"hover\",\n delayShow = 200,\n delayHide = 0,\n disabled = false,\n className = \"\",\n arrow = true,\n maxWidth = 250,\n open: controlledOpen,\n onOpenChange,\n}: TooltipProps) {\n const [internalOpen, setInternalOpen] = useState(false);\n const showTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n const hideTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n const triggerRef = useRef<HTMLDivElement>(null);\n\n const isControlled = controlledOpen !== undefined;\n const isOpen = isControlled ? controlledOpen : internalOpen;\n\n const setOpen = useCallback(\n (value: boolean) => {\n if (isControlled) {\n onOpenChange?.(value);\n } else {\n setInternalOpen(value);\n }\n },\n [isControlled, onOpenChange],\n );\n\n const clearTimeouts = useCallback(() => {\n if (showTimeoutRef.current) {\n clearTimeout(showTimeoutRef.current);\n showTimeoutRef.current = null;\n }\n if (hideTimeoutRef.current) {\n clearTimeout(hideTimeoutRef.current);\n hideTimeoutRef.current = null;\n }\n }, []);\n\n const showTooltip = useCallback(() => {\n if (disabled) return;\n clearTimeouts();\n if (delayShow > 0) {\n showTimeoutRef.current = setTimeout(() => setOpen(true), delayShow);\n } else {\n setOpen(true);\n }\n }, [disabled, delayShow, setOpen, clearTimeouts]);\n\n const hideTooltip = useCallback(() => {\n clearTimeouts();\n if (delayHide > 0) {\n hideTimeoutRef.current = setTimeout(() => setOpen(false), delayHide);\n } else {\n setOpen(false);\n }\n }, [delayHide, setOpen, clearTimeouts]);\n\n const toggleTooltip = useCallback(() => {\n if (disabled) return;\n setOpen(!isOpen);\n }, [disabled, isOpen, setOpen]);\n\n useEffect(() => {\n return () => clearTimeouts();\n }, [clearTimeouts]);\n\n // Close on click outside for click trigger\n useEffect(() => {\n if (trigger !== \"click\" || !isOpen) return;\n\n const handleClickOutside = (event: MouseEvent) => {\n if (\n triggerRef.current &&\n !triggerRef.current.contains(event.target as Node)\n ) {\n setOpen(false);\n }\n };\n\n document.addEventListener(\"mousedown\", handleClickOutside);\n return () => document.removeEventListener(\"mousedown\", handleClickOutside);\n }, [trigger, isOpen, setOpen]);\n\n // Close on Escape\n useEffect(() => {\n if (!isOpen) return;\n\n const handleEscape = (event: KeyboardEvent) => {\n if (event.key === \"Escape\") {\n setOpen(false);\n }\n };\n\n document.addEventListener(\"keydown\", handleEscape);\n return () => document.removeEventListener(\"keydown\", handleEscape);\n }, [isOpen, setOpen]);\n\n const triggerProps = {\n ...(trigger === \"hover\" && {\n onMouseEnter: showTooltip,\n onMouseLeave: hideTooltip,\n }),\n ...(trigger === \"click\" && {\n onClick: toggleTooltip,\n }),\n ...(trigger === \"focus\" && {\n onFocus: showTooltip,\n onBlur: hideTooltip,\n }),\n };\n\n return (\n <div ref={triggerRef} className=\"relative inline-flex\" {...triggerProps}>\n {children}\n <AnimatePresence>\n {isOpen && !disabled && (\n <motion.div\n role=\"tooltip\"\n initial={motionVariants[position].initial}\n animate={motionVariants[position].animate}\n exit={motionVariants[position].exit}\n transition={{ duration: 0.15, ease: \"easeOut\" }}\n className={`\n absolute z-50 ${positionStyles[position]}\n px-3 py-2 text-sm font-medium\n rounded-lg border border-ds-border-2 bg-ds-surface-2 text-ds-1 shadow-lg\n whitespace-normal break-words\n ${className}\n `}\n style={{ maxWidth }}\n >\n {content}\n {arrow && (\n <span\n className={`absolute w-0 h-0 ${arrowStyles[position]}`}\n aria-hidden=\"true\"\n />\n )}\n </motion.div>\n )}\n </AnimatePresence>\n </div>\n );\n}\n\nexport { Tooltip };\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
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
|
+
{"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-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
|
+
{"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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"}
|
|
@@ -362,9 +362,11 @@ var CanvAscii = class {
|
|
|
362
362
|
onMouseMove(evt) {
|
|
363
363
|
const e = evt.touches ? evt.touches[0] : evt;
|
|
364
364
|
const bounds = this.container.getBoundingClientRect();
|
|
365
|
+
const x = e.clientX - bounds.left;
|
|
366
|
+
const y = e.clientY - bounds.top;
|
|
365
367
|
this.mouse = {
|
|
366
|
-
x
|
|
367
|
-
y
|
|
368
|
+
x,
|
|
369
|
+
y
|
|
368
370
|
};
|
|
369
371
|
}
|
|
370
372
|
animate() {
|
|
@@ -516,4 +518,4 @@ Object.defineProperty(exports, "ASCIIText", {
|
|
|
516
518
|
}
|
|
517
519
|
});
|
|
518
520
|
|
|
519
|
-
//# sourceMappingURL=ascii-text-
|
|
521
|
+
//# sourceMappingURL=ascii-text-BFnpVur6.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ascii-text-OnPOTd2I.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-BFnpVur6.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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"}
|
|
@@ -359,9 +359,11 @@ var CanvAscii = class {
|
|
|
359
359
|
onMouseMove(evt) {
|
|
360
360
|
const e = evt.touches ? evt.touches[0] : evt;
|
|
361
361
|
const bounds = this.container.getBoundingClientRect();
|
|
362
|
+
const x = e.clientX - bounds.left;
|
|
363
|
+
const y = e.clientY - bounds.top;
|
|
362
364
|
this.mouse = {
|
|
363
|
-
x
|
|
364
|
-
y
|
|
365
|
+
x,
|
|
366
|
+
y
|
|
365
367
|
};
|
|
366
368
|
}
|
|
367
369
|
animate() {
|
|
@@ -508,4 +510,4 @@ var ASCIIText = ({ text = "David!", asciiFontSize = 8, textFontSize = 200, textC
|
|
|
508
510
|
//#endregion
|
|
509
511
|
export { ASCIIText as t };
|
|
510
512
|
|
|
511
|
-
//# sourceMappingURL=ascii-text-
|
|
513
|
+
//# sourceMappingURL=ascii-text-Bdy4C5rU.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ascii-text-OBwVLFDC.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-Bdy4C5rU.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,4 +1,4 @@
|
|
|
1
|
-
import { n as mergeClassNames } from "./utils-
|
|
1
|
+
import { n as mergeClassNames } from "./utils-7S0u48mU.mjs";
|
|
2
2
|
import { useEffect, useRef, useState } from "react";
|
|
3
3
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
4
4
|
//#region src/components/effects/background-gradient-animation/BackgroundGradientAnimation.tsx
|
|
@@ -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-BR9wx6Z8.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"background-gradient-animation-
|
|
1
|
+
{"version":3,"file":"background-gradient-animation-BR9wx6Z8.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-ds-on-accent 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-ds-on-accent ui:to-ds-on-accent/35\">\n Gradients X Animations\n </p>\n </div>\n </BackgroundGradientAnimation>\n );\n}\n"],"mappings":"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"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
require("./chunk-B_GkZjkl.cjs");
|
|
2
|
-
const require_utils = require("./utils-
|
|
2
|
+
const require_utils = require("./utils-LRbEQHYs.cjs");
|
|
3
3
|
let react = require("react");
|
|
4
4
|
let react_jsx_runtime = require("react/jsx-runtime");
|
|
5
5
|
//#region src/components/effects/background-gradient-animation/BackgroundGradientAnimation.tsx
|
|
@@ -153,4 +153,4 @@ Object.defineProperty(exports, "BackgroundGradientAnimationDemo", {
|
|
|
153
153
|
}
|
|
154
154
|
});
|
|
155
155
|
|
|
156
|
-
//# sourceMappingURL=background-gradient-animation-
|
|
156
|
+
//# sourceMappingURL=background-gradient-animation-CiNdmA61.cjs.map
|