├── .github ├── composite-actions │ └── install │ │ └── action.yml ├── dependabot.yml └── workflows │ └── static.yml ├── .gitignore ├── .husky ├── commit-msg └── pre-commit ├── .ncurc.json ├── .npmrc ├── .nvmrc ├── .prettierignore ├── .prettierrc ├── README.md ├── examples └── next-js │ ├── .eslintrc.json │ ├── .gitignore │ ├── README.md │ ├── next.config.js │ ├── package.json │ ├── panda.config.ts │ ├── postcss.config.cjs │ ├── public │ ├── next.svg │ └── vercel.svg │ ├── src │ └── app │ │ ├── favicon.ico │ │ ├── global.css │ │ ├── layout.tsx │ │ └── page.tsx │ └── tsconfig.json ├── package.json ├── packages └── animated-pandacss │ ├── .release-it.json │ ├── CHANGELOG.md │ ├── package.json │ ├── src │ ├── index.ts │ └── keyframes.ts │ └── tsconfig.json ├── pnpm-lock.yaml ├── pnpm-workspace.yaml └── site ├── .eslintrc.cjs ├── .gitignore ├── README.md ├── index.html ├── package.json ├── panda.config.ts ├── postcss.config.cjs ├── src ├── App.tsx ├── code.tsx ├── codeblocks.ts ├── color-mode-button.tsx ├── copy-code-button.tsx ├── index.css ├── main.tsx ├── useColorMode.ts └── vite-env.d.ts ├── tsconfig.json ├── tsconfig.node.json └── vite.config.ts /.github/composite-actions/install/action.yml: -------------------------------------------------------------------------------- 1 | name: "Install" 2 | description: "Sets up Node.js and runs install" 3 | 4 | runs: 5 | using: composite 6 | steps: 7 | - uses: pnpm/action-setup@v2.2.4 8 | with: 9 | version: 7 10 | 11 | - name: Setup Node.js 12 | uses: actions/setup-node@v3 13 | with: 14 | node-version: 16.x 15 | registry-url: "https://registry.npmjs.org" 16 | cache: "pnpm" 17 | 18 | - name: Install dependencies 19 | shell: bash 20 | run: pnpm install --no-frozen-lockfile 21 | -------------------------------------------------------------------------------- /.github/dependabot.yml: -------------------------------------------------------------------------------- 1 | # To get started with Dependabot version updates, you'll need to specify which 2 | # package ecosystems to update and where the package manifests are located. 3 | # Please see the documentation for all configuration options: 4 | # https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates 5 | 6 | version: 2 7 | updates: 8 | - package-ecosystem: "pnpm" # See documentation for possible values 9 | directory: "/" # Location of package manifests 10 | schedule: 11 | interval: "weekly" 12 | -------------------------------------------------------------------------------- /.github/workflows/static.yml: -------------------------------------------------------------------------------- 1 | # Simple workflow for deploying static content to GitHub Pages 2 | name: Deploy Demo page 3 | 4 | on: 5 | # Runs on pushes targeting the default branch 6 | push: 7 | branches: ["main"] 8 | 9 | # Allows you to run this workflow manually from the Actions tab 10 | workflow_dispatch: 11 | 12 | # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages 13 | permissions: 14 | contents: read 15 | pages: write 16 | id-token: write 17 | 18 | # Allow one concurrent deployment 19 | concurrency: 20 | group: "pages" 21 | cancel-in-progress: true 22 | 23 | env: 24 | BUILD_PATH: "site" 25 | 26 | jobs: 27 | build: 28 | name: Build 29 | runs-on: ubuntu-latest 30 | steps: 31 | - name: Checkout 32 | uses: actions/checkout@v3 33 | - name: Install 34 | uses: ./.github/composite-actions/install 35 | - name: Setup Node 36 | uses: actions/setup-node@v3 37 | - name: Setup Pages 38 | id: pages 39 | uses: actions/configure-pages@v2 40 | - name: Build with Vite 41 | run: | 42 | pnpm --filter site build 43 | working-directory: ${{ env.BUILD_PATH }} 44 | - name: Upload artifact 45 | uses: actions/upload-pages-artifact@v1 46 | with: 47 | path: ${{ env.BUILD_PATH }}/site-build 48 | 49 | deploy: 50 | environment: 51 | name: github-pages 52 | url: ${{ steps.deployment.outputs.page_url }} 53 | needs: build 54 | runs-on: ubuntu-latest 55 | name: Deploy 56 | steps: 57 | - name: Deploy to GitHub Pages 58 | id: deployment 59 | uses: actions/deploy-pages@v1 60 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | node_modules/ 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | .next 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | 27 | # local env files 28 | .env*.local 29 | 30 | # vercel 31 | .vercel 32 | 33 | # typescript 34 | *.tsbuildinfo 35 | next-env.d.ts 36 | 37 | # Panda 38 | styled-system 39 | 40 | # Sitemap 41 | sitemap*.xml 42 | 43 | .env 44 | dist 45 | *.tgz 46 | 47 | # contentlayer 48 | .contentlayer -------------------------------------------------------------------------------- /.husky/commit-msg: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | . "$(dirname "$0")/_/husky.sh" 3 | 4 | pnpm commitlint --edit 5 | -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | . "$(dirname "$0")/_/husky.sh" 3 | 4 | pnpm lint-staged 5 | -------------------------------------------------------------------------------- /.ncurc.json: -------------------------------------------------------------------------------- 1 | { 2 | "reject": ["@types/node"] 3 | } 4 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | unsafe-perm=true 2 | save-exact=true 3 | enable-pre-post-scripts=true -------------------------------------------------------------------------------- /.nvmrc: -------------------------------------------------------------------------------- 1 | 18.x 2 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | *.hbs -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "printWidth": 100, 3 | "singleQuote": true, 4 | "trailingComma": "all", 5 | "arrowParens": "always", 6 | "semi": false 7 | } 8 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |
2 | 3 |

4 |
5 | 6 | 7 | 8 | 9 | 10 | 🐼 11 | 12 | 13 | 14 |
15 | animated-pandacss 16 |
17 |
18 | 19 |

20 | 21 |
22 |
23 | 24 | npm package 25 | 26 | 27 | npm downloads 28 | 29 | 30 | NPM 31 | 32 | 33 | GitHub Repo stars 34 | 35 | 36 |
37 | Use Animate.css with Panda CSS 38 | 39 | 40 |
41 |
42 |
43 |
44 | 
npm i -D animated-pandacss
45 |
46 |
47 |
48 |
49 |
50 |
51 | 52 | ## About 53 | 54 | It's a preset for [Panda CSS](https://panda-css.com) that adds [Animate.css](https://animate.style) animations to your project. 55 | 56 | ## Install 57 | 58 | ```bash 59 | npm i -D animated-pandacss 60 | #or 61 | yarn add -D animated-pandacss 62 | #or 63 | pnpm i -D animated-pandacss 64 | ``` 65 | 66 | ## Usage 67 | 68 | Add as first item of presets in your [Panda](https://panda-css.com) config. 69 | 70 | ```ts 71 | import { defineConfig } from '@pandacss/dev' 72 | 73 | export default defineConfig({ 74 | // Other config... 75 | presets: ['animated-pandacss', '@pandacss/dev/presets'], 76 | }) 77 | ``` 78 | 79 | You can now use it in your project. 80 | 81 | ```jsx 82 |
92 | Animated element 93 |
94 | ``` 95 | 96 | You can play around with the animations in the [docs](https://anubra266.github.io/animated-pandacss/) 97 | 98 | ## Sponsors ✨ 99 | 100 | Thanks goes to these wonderful people 101 | 102 |

103 | 104 | 105 | 106 |

107 | -------------------------------------------------------------------------------- /examples/next-js/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /examples/next-js/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | 27 | # local env files 28 | .env*.local 29 | 30 | # vercel 31 | .vercel 32 | 33 | # typescript 34 | *.tsbuildinfo 35 | next-env.d.ts 36 | -------------------------------------------------------------------------------- /examples/next-js/README.md: -------------------------------------------------------------------------------- 1 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). 2 | 3 | ## Getting Started 4 | 5 | First, run the development server: 6 | 7 | ```bash 8 | npm run dev 9 | # or 10 | yarn dev 11 | # or 12 | pnpm dev 13 | ``` 14 | 15 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. 16 | 17 | You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file. 18 | 19 | This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font. 20 | 21 | ## Learn More 22 | 23 | To learn more about Next.js, take a look at the following resources: 24 | 25 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. 26 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. 27 | 28 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! 29 | 30 | ## Deploy on Vercel 31 | 32 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. 33 | 34 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. 35 | -------------------------------------------------------------------------------- /examples/next-js/next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = {} 3 | 4 | module.exports = nextConfig 5 | -------------------------------------------------------------------------------- /examples/next-js/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "examples-react-next-js", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "prepare": "panda codegen --silent", 7 | "dev": "next dev", 8 | "build": "next build", 9 | "start": "next start", 10 | "lint": "next lint" 11 | }, 12 | "dependencies": { 13 | "@types/node": "20.4.9", 14 | "@types/react": "18.2.20", 15 | "@types/react-dom": "18.2.7", 16 | "animated-pandacss": "workspace:*", 17 | "eslint": "8.47.0", 18 | "eslint-config-next": "13.4.16", 19 | "next": "13.4.16", 20 | "react": "18.2.0", 21 | "react-dom": "18.2.0", 22 | "typescript": "5.1.6" 23 | }, 24 | "devDependencies": { 25 | "@pandacss/dev": "0.11.1" 26 | } 27 | } -------------------------------------------------------------------------------- /examples/next-js/panda.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from '@pandacss/dev' 2 | 3 | export default defineConfig({ 4 | preflight: true, 5 | presets: ['@pandacss/dev/presets', 'animated-pandacss'], 6 | include: ['./src/**/*.{js,jsx,ts,tsx}', './pages/**/*.{js,jsx,ts,tsx}'], 7 | exclude: [], 8 | theme: { 9 | extend: {}, 10 | }, 11 | jsxFramework: 'react', 12 | outdir: 'styled-system', 13 | }) 14 | -------------------------------------------------------------------------------- /examples/next-js/postcss.config.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | '@pandacss/dev/postcss': {}, 4 | }, 5 | } -------------------------------------------------------------------------------- /examples/next-js/public/next.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/next-js/public/vercel.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/next-js/src/app/favicon.ico: -------------------------------------------------------------------------------- 1 |  (F  (n00 (-� ��F(  $]��]$ �������� 8����������8��������������������������#���OOO�������������������������ggg����#Y����������������������������555����Y�����kkk������������������������������� �����������������������Y�����JJJ���������kkk������Y#�������������� ������#������111�DDD�������������������8����������8 �������� $]��]$( @ ,U����U,*������������*����������������Q������������������Qr��������������������rr����������������������rO������������������������O������������������������������������������������������(����������������������������'�������888���������������������������������������������������������___������������������������������������������������������������������������SSS��������+��������hhh�������������������������������������������������������������+T���������������������������������������������������������,,,���������T����������GGG��������������������������������������������������������������������������������������������������������������������������������+++���������������������������������jjj��������������������������������������������������������������������T������������������������������������III������������T+������������hhh���������������������������������+�����������������������������,,,��������������������������GGG��������������������������'����������������������������������(�������������333�___����������������������������������������O������������������������Or����������������������rr��������������������rQ������������������Q����������������*������������*,U����U,(0` - (Lj����jK( V��������������U%��������������������&������������������������Q��������������������������R��������������������������������������������������������������������������������������������������������������������������������������������������������������������������P��������������������������������������O����������������������������������������������������������������������������������#������������������������������������������#������������������������������������������������������$$$�hhh�eee�eee�eee�eee�eee�eee�eee�eee�eee�eee�eee�eee�eee�eee�eee�eee�eee�eee�eee�eee�eee�PPP�����������U���������������������������������������������������������������������������������������������������sss�����������U������������eee������������������������������������������������������������������������������������������������� ���������������������������������������������������������������������������������������������HHH������������� (�������������EEE������������������������������������������������������������������������������������������(K��������������������������������������������������������������������������������������,,,��������������Lj��������������)))�����������������������������������������������������������������������������������j�������������������������������������������������������������������������������������������������������������������������������������������������������������������������iii����������������������������������eee����������������������������������������������������������������������������������������������������������������������������������������HHH������������������j�����������������EEE��������������������������������������������������������������jL����������������������������������������������������������,,,������������������K(������������������)))�������������������������������������������������������( ���������������������������������������������������������������������� ��������������������������������������������iii��������������������U�������������������eee����������������������������������������U������������������������������������HHH����������������������������������������EEE���������������������������������#����������������������������,,,��������������������#��������������������222�}}}�������������������������������������������������������������O��������������������������������������P��������������������������������������������������������������������������������������������������������������������������������������������������������������������������R��������������������������Q������������������������&��������������������%U��������������V (Kj����jL( �PNG 2 |  3 | IHDR\r�fsRGB���8eXIfMM*�i��D"8sIDATx�] �ՙn�]<QVA���h$ �N��13*�q��d�č�I���D�L2��(�(Ԙ2�ę�G ��q_@屈���xț�Џ��{o�������U�{}�O��;������9�‘d���(Dg��8 ��N�]��@ �hx�?v �N�3�=`;�6�.�&� �u�� ��6� P��н��@�àR�P�iZq�^DN���wp� � ��X�hИH g@�� 4 | :��|�5` p"@�'�ɲ�s{ �p�*�2����� dү���|(0� 5 | 0��>K� 6 | �xX�6IJ ��C|?$KE N�}ϓ|������h $ 2 � �|/�.Nz�# ���W�e� 7 | �5�� ����ܶ�� �;�y�� �g�s�h^I� �DL(�;�8�� Hjg�cH|x�1��R"�a���Ӂ�G��@��9`/`%0� H�@j �~,���K 8 | �,t).��I���D�T�O�)~��V�u$b 誛 �U%�7������_�$b 8A������J�3` 510wQ�?��vr���:�2�K�@ ��v*{%#��A�Z�咁^(��=�g\��W�����!:��,`�6��643�:@�c.Fٟ����u?�<��'������_܏vp: �8Q�� 9 | I�Ł� p{3���kHȢ�G�����c�Ѽ <�62&� 10 | ��2uC�����敭��T�3� 11 | �� ���;���d�/~m��.��X�@{�w.��d]G��{lK��Eb���(P�RuM�T�C���� �d��])��_Lm�=��=@b���K��GUk�^�U�������)1����g�T�Š��m`9�\����Q��@����Ⱆ6�:ڞ�^�w�����E�D ��� �5����F�,�� 12 | �X"�d�m�<�nB~�� @����t�t�x�� �;�f�>����I8����8��C1۪$B���e���+��jl��EZ��& ��S:�:�6�m����\G1��`���!�nl�l�Ɗ�^�Q`��@Oc�S��@e�ͷ���qb�p���S��@u p���F�D@�Г������2@#����L3�A��$H2�_h��FH #rq(��O�D�򤬈���runGOWa�b�&�SgD�3�ED�to�*Ǥ����9k��~)���,$�x�R�1�v�K ��9�D 䍁U(�w�&LE��ꩻ� S)��3�Y8x8$.i�(��K�ŀY ����a�]��� �4��ǀ c����@3�f����4�Ƣ�� �/*b������$!I�~� �7�B*-1` o �� �$��ǡD�����L�������J"���OQ��)��2@#�x4�"$e���I�8��Oi��8�"��G��8[x�t<�.��7&�m&؎R�^��tq�ؕ�.���Y�-2��d���*_��&d|j\�W�b � �G����*g����釁�F4�"I�؃�/b1q�N����Y�D ��p ���9���p�}w\��Ԥ���1 j`��O���xK=��H���A��1 �#� 13 | D:U8j���t���$b b�A||�U�Q��26%��)1 ��_ �ꢳ!~D�����+b >A��:]�E$��50��GDhR�t����ݻwR�)�� P���n$� 3���@bS�Nu�,Y�j�ʲ��:����;�����@�`�|�-[)�'OV��Ն�sFxڮ��ۥ�n}͛7�����~��ƺ�:���Q��J_��UKj8�q0x���;v4̞=[�hW=� �� �&�!e5�8hѢE��w�]�����6���_�iW}�SZ�? �/`�;vl�}��2<�h�"� ���A�܁�X,�m۶�+V�(��<�w���#F�^���;���aH�c� ��)S�*�{a���p ��c89(�^����4�&E��oÆ ��W�/��u�=�^���*?{k^�_E�����z���g��UI-���{WU* 14 | �:p�9 .tڷo(/ݺus>��3�'�^�Rg���ڞG��I_D���� ���~~���{ ���?N0�7�S��.ƍ׸�~?}/y]nA;�أ���2]�FOB2C?�_I����[�:�:�=#�OzK�-� ��ϣ�%����?j��I���P�ۯ��{N�-hU��t�:�������,���G�K�-hU���c�hP7 �� �˜�@�n?�\�-�k�.���2�:�� �`��F��=�-�V�_�G��܂V���}�0WI����F��ʭ���sM�r Z�8pJ�Q�*@OK8��� 15 | r Z� �ݖa,��w��S�W^y����.��5�at7��ݏ���Tv#�~7n ��A"�����+��W��pM��/�hK8����g��F/^������M{e��R�|�)q��7�t��?8'���K��P~���瞰�\��r ��>�ǷUk�eP��|�^x���� 16 | �/V/��v������ ���*�p�v������ʟ]J��}��k8(������ĉ�ѣGǗ�O�mڴq,X�o ���e. �^ �Qx���p�t����4^_�N�{�����y�2�s������-عsg�s���i�v��Z 8 17 | !~PJ?�c�������|�]�ܽ{��z�긓R��1pn���z�����tlp�9�f�r�v�jT殿�z�4*O�L�~����ԕ3��4�~~�r �;�m�xY�+��� ������3r �;�m�x�4���:7]Ձq L�4)U��!r �1��u�6���$� �7����8�w��̙3Ǹ|5�>?�\z��O� ��͆���,�E����3�����2���[����2Wu:E�����^p. H1cJ�t�]}��B�u��SOu�����I c�O�����%� �AZ������k����D?�5�@Q�� ���3�w�+��"��T��S��Uޥ�13��?� �5M'݋��>p��Z�j�~fj� ׈�סԐ�n�����>���i5D�[bf ��~a�'�`Xc���-�1�k����āI�������k��Q�ů|�k�M��(92�@�t�����݂X-�Lדa��N4��qܞ'$f0@� @V�nA�ܘY�L9:�|/^s��� ��)0`�j��T\w�uZ-����¨\� @�:��c�t���{�-��Rb��1%��I,Y%T���~ ��r �1����C��,�$��*ˀ���f<��0z����h�F��������| ���8Z-�CR����Tg��HRf��glY����s��-��p��'+����m�_ؒg������C�{� ����Ȫ�ϏΙ3g�-�GR|׹7`G��񥡘�0�U��_ٵZЏ�د�D�)���\>����ʗ������zN���@��~~��-��P��{rs���@�<����|.]�Ը|��m|g����_��y�W�KD1�b�M���%�s\����r �1��n�\ �ƒ�"-��` .4��~%3��I}[0A��$��=-�>BH"G�ۏ�^r��<�EBG�i�%���9�@^�~~ @�����1�� ��@�t�-[����{%@C�$�mAg���Κ5kʆх����/双O��l��ӿ��B�@.X���u�p�O��6��x�9MPn�`߷o_���^n�`t� 18 | ��(�����\r��s�A�y���ۂ�T��@h 19 | �E0l�0��;�tڵӘkƸN����Y�jU�� 20 | S#�|^㽺- |��p� N�.���ޥ`�^{�zL�6��4�ě�b��e�]&"�d�sΜ9Uޥ�U0�! ��*nP�*`���o֨v����i8G�����hh��m������ɓ�s�=�{J�U0�Ղ���wZ������������8bEz���,Y�D��![C�>}��7:k׮ �no��f�>jvR?#b��X �(��F�AT�F��i��[�{��zv��>��C���a+�[0B2�D��=��G~�( 21 | �ĺ������LO�\s�܂>"8|�`[) 22 | &Lp8�'��������4oGe�#�ۏ�lْ_\�D̀܂�2Z�l��i�9�� t�ȑ9f ޢ�-����=���Y�y��n?uQ�}Xͬ �sA�i>=��1�=R��+� + �܂��.2� �K������CƢۃ20h� �˫%53�5@�MA�%���̣������j[��9�;��_(�����0��~r���\�{�m�P����x#TT9��n?����N#��ץ&� }���) 23 | �T�VL�!���j���` �p �8@Rr�UAV�A����=��-����pLH�`@n�*Ȋ1�܂U���?}w ]�H2@�ߴi��V���[�˯%�������5�8�)Э 24 | T`��|rZbZ-�.�!da+@����ߞ�Z�gf�[0p������ I��gr �$��o%P�_rCy �V�|߽����"m�Y���-�[ l��kxA���ۯ9]�[pҤI�Ȩ�pP���k��Feِ���gHE�d�nAm"Z�$��5} ���z�8����2r�X�|� ��Sܻw��r�J�s�J�~�T�f�z{�ͫ��x�j?j��Q�E�n��js���|G�xз���󕾤�rzr�� ��`���V{���u��4448�V��ra��p���QRZ�<{�dK.F9��#~T���s.����N%*� ���Ýu�8G&����/W:*x%�{�}@� ��l���Nc#�AI�������i����*?�د�0}�g���C"Ā pۯ������4薒ҏ(b�8�_Q�Y� ���r7'��� `��� �j�6�� *��3�W�g��"��l� �ˆ1�:�Sg}%� � ��P?����1`�����Y���"��D�0b@ �������9������[t��F1���p`k�\U�`��R��A#W81 e`)R�ZM�����[ u��F0� rq.�����#^�=C"Ā9 P'�R~f��� 27 | pn�zdC"�e���?�\K����@&$b }jz�3۵�x/{ ��1 Ra�#�|��ƟUK�=&�^��TM�n�2�9�5)?s���{O'�D ��D���o[kM�oK0�x���Td�_@]b r� �G�����;����D ��D���1�gaR �`��'`0�  �> \��/���f��������ŀ����!fn�Z�|b����U�.t���ट���r�9�+�������� �b rnE�Dk�=��8�����!b R�Cl�P�E�`�܌�K�'~�@���}*�!`�@��6L� �;�� $b@ D��?#��g�F� 28 | �� V��1�v��;�Es��Q����=ɮ�4���b@ T��n��!��3q�0^�V��c��1�ܶ��[����M�=8I����1@�څ@Cu��`N�o��WJĀ�W����e��I��n��N�mீ��ܴ�_ d��(�4`E܅I�� ��"̵�1 *3�+\�E� �\M���)g r��� 29 | ���8�>��p�?vI��0�ǀ~�!b������$'�%"I����R��i�1 �0� �?S~&���r��� ��{ n�_ �����L�?��T�e��Ǝ�7�C"r��OQ~"qI���O 8�?$b � ܋r�#@�_�v�J̙��/��3�'d�/����W[����o'N� �l� �-2����@j�O~��0���2`H�@�؄��+����p OB��uO��(l�S�ԕ���9����~�c�:x/�X d�.���Ɣ�d��V�y@F$H2�����+M*�i��l8O@F$H2����2�4&r� PO��֢��€��7N�YS ����Y�1`��;�JS3n� g[�'��@W@"la`32�n?'�HB2p 30 | �hām�mu �����j@F@��V����Z!��xI���H�y�ѱ) ��>��Z!6���a�`�����dDV$9f��� pM�6�I�!LG:\LdrwPy�~�P�%��L3��7�TK��Am�mo|�6�� 3��-�hJ3��?�67 �yr���"�� ��g��4.$�1���_�[*��&���S/�dq������� C��h�3��>�6Ŷ%������\�#�RZq� � =lK|ŔX��X�WS�ej5/����$���:��v@������8�� �d��1(�z2~F�)���3��͋���l��C�������#����=�.\Lt? %�N$9b�%�:���2��u �1|-� ld�����t$b��@?���@� �F�c��ρ^�D �d�[9�ࠐz�����: 31 | H�@ ��P2v)~���@����z5��|����R�ֵ���|`#�W39؂��<�"-�0��\<�d ��u�oGLz1��Gp����e�倯d�.�j H�@j �F�3��@ c{s<��J& �@�����b���w�� �� ��n���v��< �����,M;��*p>p!0hH��{=�����x�]I� �DLh����<'��h8�@V �#��J���f�I� ��Hn����W�} �N�t[u�$��������� @� 2 �]&)� �#�3���, =%�T���k�&� I�����I��ӳ��[8 � �L�]�]t�T�g���6�-@b2U�OV��: A?�� } .i�| �xC���rv�w;��#�>�i8_b82�WP�������{'n���8�z;�Ƥy��s���@���P��o|�S�ih$3��@߹j��IEND�B`� -------------------------------------------------------------------------------- /examples/next-js/src/app/global.css: -------------------------------------------------------------------------------- 1 | @layer reset, base, tokens, recipes, utilities; 2 | -------------------------------------------------------------------------------- /examples/next-js/src/app/layout.tsx: -------------------------------------------------------------------------------- 1 | import type { Metadata } from 'next' 2 | import { Fira_Code, Plus_Jakarta_Sans } from 'next/font/google' 3 | import { PropsWithChildren } from 'react' 4 | import { cx } from 'styled-system/css' 5 | import './global.css' 6 | 7 | const body = Plus_Jakarta_Sans({ subsets: ['latin'], variable: '--font-body' }) 8 | const code = Fira_Code({ subsets: ['latin'], variable: '--font-code' }) 9 | 10 | export const metadata: Metadata = { 11 | title: 'Create Next App', 12 | description: 'Generated by create next app', 13 | } 14 | 15 | const RootLayout = (props: PropsWithChildren) => { 16 | const { children } = props 17 | return ( 18 | 19 | {children} 20 | 21 | ) 22 | } 23 | 24 | export default RootLayout 25 | -------------------------------------------------------------------------------- /examples/next-js/src/app/page.tsx: -------------------------------------------------------------------------------- 1 | 'use client' 2 | 3 | import { css } from 'styled-system/css' 4 | 5 | export default function Home() { 6 | return ( 7 |
8 |
20 | wow 21 |
22 |
23 | ) 24 | } 25 | -------------------------------------------------------------------------------- /examples/next-js/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es6", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "strict": true, 8 | "forceConsistentCasingInFileNames": true, 9 | "noEmit": true, 10 | "esModuleInterop": true, 11 | "module": "esnext", 12 | "moduleResolution": "bundler", 13 | "resolveJsonModule": true, 14 | "isolatedModules": true, 15 | "jsx": "preserve", 16 | "incremental": true, 17 | "baseUrl": ".", 18 | "plugins": [ 19 | { 20 | "name": "next" 21 | } 22 | ], 23 | "paths": { 24 | "~/*": ["./src/*"] 25 | } 26 | }, 27 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "postcss.config.cjs"], 28 | "exclude": ["node_modules"] 29 | } 30 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "animated-pandacss-root", 3 | "version": "0.0.0", 4 | "private": true, 5 | "scripts": { 6 | "prepare": "husky install", 7 | "preset": "pnpm --filter=animated-pandacss", 8 | "site": "pnpm --filter=site" 9 | }, 10 | "devDependencies": { 11 | "@commitlint/cli": "17.7.1", 12 | "@commitlint/config-conventional": "17.7.0", 13 | "husky": "8.0.3", 14 | "lint-staged": "14.0.0", 15 | "prettier": "3.0.01", 16 | "prettier-plugin-organize-imports": "3.2.3" 17 | }, 18 | "commitlint": { 19 | "extends": [ 20 | "@commitlint/config-conventional" 21 | ] 22 | }, 23 | "lint-staged": { 24 | "**/*.{js,jsx,ts,tsx,json}": [ 25 | "prettier --plugin prettier-plugin-organize-imports --write" 26 | ] 27 | }, 28 | "packageManager": "pnpm@8.6.7" 29 | } 30 | -------------------------------------------------------------------------------- /packages/animated-pandacss/.release-it.json: -------------------------------------------------------------------------------- 1 | { 2 | "git": { 3 | "commitMessage": "chore: release ${npm.name} v${version}", 4 | "tagName": "${npm.name}@${version}" 5 | }, 6 | "plugins": { 7 | "@release-it/keep-a-changelog": { 8 | "addUnreleased": true, 9 | "filename": "CHANGELOG.md" 10 | } 11 | }, 12 | "hooks": { 13 | "before:init": ["pnpm build"] 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /packages/animated-pandacss/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | ## [Unreleased] 2 | 3 | ## [0.0.4] - 2024-03-15 4 | 5 | - Fix preset config 6 | 7 | ## [0.0.3] - 2024-01-22 8 | 9 | - Updated Pandacss deps to dev 10 | 11 | ## [0.0.2] - 2023-08-18 12 | 13 | ### Changed 14 | 15 | - Removed extend from theme 16 | 17 | ## [0.0.1] - 2023-08-17 18 | 19 | ### Added 20 | 21 | - Initial release 22 | -------------------------------------------------------------------------------- /packages/animated-pandacss/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "animated-pandacss", 3 | "version": "0.0.4", 4 | "description": "Use Animate.css with Panda CSS", 5 | "keywords": [ 6 | "Animate.css", 7 | "Panda CSS", 8 | "Presets" 9 | ], 10 | "author": "Abraham Aremu (https://anubra266.com/)", 11 | "homepage": "anubra266.github.io/animated-pandacss/", 12 | "license": "MIT", 13 | "repository": "https://github.com/anubra266/animated-pandacss", 14 | "bugs": { 15 | "url": "https://github.com/anubra266/animated-pandacss/issues" 16 | }, 17 | "files": [ 18 | "dist", 19 | "src" 20 | ], 21 | "publishConfig": { 22 | "access": "public" 23 | }, 24 | "scripts": { 25 | "build": "tsup", 26 | "release-it": "release-it", 27 | "prepack": "clean-package", 28 | "postpack": "clean-package restore" 29 | }, 30 | "dependencies": { 31 | "@pandacss/dev": "dev" 32 | }, 33 | "devDependencies": { 34 | "@pandacss/types": "dev", 35 | "@release-it/keep-a-changelog": "4.0.0", 36 | "clean-package": "2.2.0", 37 | "release-it": "16.1.5", 38 | "tsup": "7.2.0" 39 | }, 40 | "clean-package": { 41 | "replace": { 42 | "main": "dist/index.js", 43 | "module": "dist/index.mjs", 44 | "types": "dist/index.d.ts", 45 | "exports": { 46 | ".": { 47 | "types": "./dist/index.d.ts", 48 | "import": "./dist/index.mjs", 49 | "require": "./dist/index.js" 50 | }, 51 | "./package.json": "./package.json" 52 | } 53 | } 54 | }, 55 | "tsup": { 56 | "entry": [ 57 | "src/index.ts" 58 | ], 59 | "clean": true, 60 | "dts": true, 61 | "sourcemap": true, 62 | "format": [ 63 | "esm", 64 | "cjs" 65 | ] 66 | }, 67 | "main": "src/index.ts" 68 | } 69 | -------------------------------------------------------------------------------- /packages/animated-pandacss/src/index.ts: -------------------------------------------------------------------------------- 1 | import { definePreset } from '@pandacss/dev' 2 | import { type Preset } from '@pandacss/types' 3 | 4 | import { keyframes } from './keyframes' 5 | 6 | const preset: Preset = definePreset({ 7 | theme: { 8 | extend: { 9 | keyframes, 10 | }, 11 | }, 12 | utilities: { 13 | extend: { 14 | animationName: { 15 | className: 'animation-name', 16 | values: 'animationName', 17 | transform(value) { 18 | return { 19 | animationName: value, 20 | animationDuration: '1s', 21 | animationFillMode: 'both', 22 | 23 | '@media (prefers-reduced-motion: reduce), print': Object.assign( 24 | {}, 25 | { 26 | animationDuration: '1ms !important', 27 | transitionDuration: '1ms !important', 28 | animationIterationCount: '1 !important', 29 | }, 30 | value.includes('Out') && { opacity: 0 }, 31 | ), 32 | } 33 | }, 34 | }, 35 | animationRepeat: { 36 | className: 'animation-name', 37 | property: 'animationIterationCount', 38 | transform(value: string) { 39 | return { 40 | animationIterationCount: value, 41 | } 42 | }, 43 | }, 44 | }, 45 | }, 46 | }) 47 | 48 | export default preset 49 | 50 | export { keyframes } 51 | -------------------------------------------------------------------------------- /packages/animated-pandacss/src/keyframes.ts: -------------------------------------------------------------------------------- 1 | import { defineKeyframes } from '@pandacss/dev' 2 | 3 | export const keyframes = defineKeyframes({ 4 | bounce: { 5 | '0%, 20%, 53%, to': { 6 | animationTimingFunction: 'cubic-bezier(0.215, 0.61, 0.355, 1)', 7 | transform: 'translateZ(0)', 8 | }, 9 | '40%, 43%': { 10 | animationTimingFunction: 'cubic-bezier(0.755, 0.05, 0.855, 0.06)', 11 | transform: 'translate3d(0, -30px, 0) scaleY(1.1)', 12 | }, 13 | '70%': { 14 | animationTimingFunction: 'cubic-bezier(0.755, 0.05, 0.855, 0.06)', 15 | transform: 'translate3d(0, -15px, 0) scaleY(1.05)', 16 | }, 17 | '80%': { 18 | transitionTimingFunction: 'cubic-bezier(0.215, 0.61, 0.355, 1)', 19 | transform: 'translateZ(0) scaleY(0.95)', 20 | }, 21 | '90%': { 22 | transform: 'translate3d(0, -4px, 0) scaleY(1.02)', 23 | }, 24 | }, 25 | flash: { 26 | '0%, 50%, to': { opacity: 1 }, 27 | '25%, 75%': { opacity: 0 }, 28 | }, 29 | pulse: { 30 | '0%': { transform: 'scaleX(1)' }, 31 | '50%': { transform: 'scale3d(1.05, 1.05, 1.05)' }, 32 | to: { transform: 'scaleX(1)' }, 33 | }, 34 | rubberBand: { 35 | '0%': { transform: 'scaleX(1)' }, 36 | '30%': { transform: 'scale3d(1.25, 0.75, 1)' }, 37 | '40%': { transform: 'scale3d(0.75, 1.25, 1)' }, 38 | '50%': { transform: 'scale3d(1.15, 0.85, 1)' }, 39 | '65%': { transform: 'scale3d(0.95, 1.05, 1)' }, 40 | '75%': { transform: 'scale3d(1.05, 0.95, 1)' }, 41 | to: { transform: 'scaleX(1)' }, 42 | }, 43 | shakeX: { 44 | '0%, to': { transform: 'translateZ(0)' }, 45 | '10%, 30%, 50%, 70%, 90%': { transform: 'translate3d(-10px, 0, 0)' }, 46 | '20%, 40%, 60%, 80%': { transform: 'translate3d(10px, 0, 0)' }, 47 | }, 48 | shakeY: { 49 | '0%, to': { transform: 'translateZ(0)' }, 50 | '10%, 30%, 50%, 70%, 90%': { transform: 'translate3d(0, -10px, 0)' }, 51 | '20%, 40%, 60%, 80%': { transform: 'translate3d(0, 10px, 0)' }, 52 | }, 53 | headShake: { 54 | '0%': { transform: 'translateX(0)' }, 55 | '6.5%': { 56 | transform: 'translateX(-6px) rotateY(-9deg)', 57 | }, 58 | '18.5%': { transform: 'translateX(5px) rotateY(7deg)' }, 59 | '31.5%': { 60 | transform: 'translateX(-3px) rotateY(-5deg)', 61 | }, 62 | '43.5%': { transform: 'translateX(2px) rotateY(3deg)' }, 63 | '50%': { transform: 'translateX(0)' }, 64 | }, 65 | swing: { 66 | '20%': { transform: 'rotate(15deg)' }, 67 | '40%': { transform: 'rotate(-10deg)' }, 68 | '60%': { transform: 'rotate(5deg)' }, 69 | '80%': { transform: 'rotate(-5deg)' }, 70 | to: { transform: 'rotate(0deg)' }, 71 | }, 72 | tada: { 73 | '0%': { transform: 'scaleX(1)' }, 74 | '10%, 20%': { 75 | transform: 'scale3d(0.9, 0.9, 0.9) rotate(-3deg)', 76 | }, 77 | '30%, 50%, 70%, 90%': { 78 | transform: 'scale3d(1.1, 1.1, 1.1) rotate(3deg)', 79 | }, 80 | '40%, 60%, 80%': { 81 | transform: 'scale3d(1.1, 1.1, 1.1) rotate(-3deg)', 82 | }, 83 | to: { transform: 'scaleX(1)' }, 84 | }, 85 | wobble: { 86 | '0%': { transform: 'translateZ(0)' }, 87 | '15%': { 88 | transform: 'translate3d(-25%, 0, 0) rotate(-5deg)', 89 | }, 90 | '30%': { 91 | transform: 'translate3d(20%, 0, 0) rotate(3deg)', 92 | }, 93 | '45%': { 94 | transform: 'translate3d(-15%, 0, 0) rotate(-3deg)', 95 | }, 96 | '60%': { 97 | transform: 'translate3d(10%, 0, 0) rotate(2deg)', 98 | }, 99 | '75%': { 100 | transform: 'translate3d(-5%, 0, 0) rotate(-1deg)', 101 | }, 102 | to: { transform: 'translateZ(0)' }, 103 | }, 104 | jello: { 105 | '0%, 11.1%, to': { transform: 'translateZ(0)' }, 106 | '22.2%': { 107 | transform: 'skewX(-12.5deg) skewY(-12.5deg)', 108 | }, 109 | '33.3%': { transform: 'skewX(6.25deg) skewY(6.25deg)' }, 110 | '44.4%': { 111 | transform: 'skewX(-3.125deg) skewY(-3.125deg)', 112 | }, 113 | '55.5%': { 114 | transform: 'skewX(1.5625deg) skewY(1.5625deg)', 115 | }, 116 | '66.6%': { 117 | transform: 'skewX(-0.78125deg) skewY(-0.78125deg)', 118 | }, 119 | '77.7%': { 120 | transform: 'skewX(0.390625deg) skewY(0.390625deg)', 121 | }, 122 | '88.8%': { 123 | transform: 'skewX(-0.1953125deg) skewY(-0.1953125deg)', 124 | }, 125 | }, 126 | heartBeat: { 127 | '0%': { transform: 'scale(1)' }, 128 | '14%': { transform: 'scale(1.3)' }, 129 | '28%': { transform: 'scale(1)' }, 130 | '42%': { transform: 'scale(1.3)' }, 131 | '70%': { transform: 'scale(1)' }, 132 | }, 133 | backInDown: { 134 | '0%': { 135 | transform: 'translateY(-1200px) scale(0.7)', 136 | opacity: 0.7, 137 | }, 138 | '80%': { 139 | transform: 'translateY(0) scale(0.7)', 140 | opacity: 0.7, 141 | }, 142 | to: { transform: 'scale(1)', opacity: 1 }, 143 | }, 144 | backInLeft: { 145 | '0%': { 146 | transform: 'translateX(-2000px) scale(0.7)', 147 | opacity: 0.7, 148 | }, 149 | '80%': { 150 | transform: 'translateX(0) scale(0.7)', 151 | opacity: 0.7, 152 | }, 153 | to: { transform: 'scale(1)', opacity: 1 }, 154 | }, 155 | backInRight: { 156 | '0%': { 157 | transform: 'translateX(2000px) scale(0.7)', 158 | opacity: 0.7, 159 | }, 160 | '80%': { 161 | transform: 'translateX(0) scale(0.7)', 162 | opacity: 0.7, 163 | }, 164 | to: { transform: 'scale(1)', opacity: 1 }, 165 | }, 166 | backInUp: { 167 | '0%': { 168 | transform: 'translateY(1200px) scale(0.7)', 169 | opacity: 0.7, 170 | }, 171 | '80%': { 172 | transform: 'translateY(0) scale(0.7)', 173 | opacity: 0.7, 174 | }, 175 | to: { transform: 'scale(1)', opacity: 1 }, 176 | }, 177 | backOutDown: { 178 | '0%': { transform: 'scale(1)', opacity: 1 }, 179 | '20%': { 180 | transform: 'translateY(0) scale(0.7)', 181 | opacity: 0.7, 182 | }, 183 | to: { 184 | transform: 'translateY(700px) scale(0.7)', 185 | opacity: 0.7, 186 | }, 187 | }, 188 | backOutLeft: { 189 | '0%': { transform: 'scale(1)', opacity: 1 }, 190 | '20%': { 191 | transform: 'translateX(0) scale(0.7)', 192 | opacity: 0.7, 193 | }, 194 | to: { 195 | transform: 'translateX(-2000px) scale(0.7)', 196 | opacity: 0.7, 197 | }, 198 | }, 199 | backOutRight: { 200 | '0%': { transform: 'scale(1)', opacity: 1 }, 201 | '20%': { 202 | transform: 'translateX(0) scale(0.7)', 203 | opacity: 0.7, 204 | }, 205 | to: { 206 | transform: 'translateX(2000px) scale(0.7)', 207 | opacity: 0.7, 208 | }, 209 | }, 210 | backOutUp: { 211 | '0%': { transform: 'scale(1)', opacity: 1 }, 212 | '20%': { 213 | transform: 'translateY(0) scale(0.7)', 214 | opacity: 0.7, 215 | }, 216 | to: { 217 | transform: 'translateY(-700px) scale(0.7)', 218 | opacity: 0.7, 219 | }, 220 | }, 221 | bounceIn: { 222 | '0%, 20%, 40%, 60%, 80%, to': { 223 | animationTimingFunction: 'cubic-bezier(0.215, 0.61, 0.355, 1)', 224 | }, 225 | '0%': { 226 | opacity: 0, 227 | transform: 'scale3d(0.3, 0.3, 0.3)', 228 | }, 229 | '20%': { transform: 'scale3d(1.1, 1.1, 1.1)' }, 230 | '40%': { transform: 'scale3d(0.9, 0.9, 0.9)' }, 231 | '60%': { 232 | opacity: 1, 233 | transform: 'scale3d(1.03, 1.03, 1.03)', 234 | }, 235 | '80%': { transform: 'scale3d(0.97, 0.97, 0.97)' }, 236 | to: { opacity: 1, transform: 'scaleX(1)' }, 237 | }, 238 | bounceInDown: { 239 | '0%, 60%, 75%, 90%, to': { 240 | animationTimingFunction: 'cubic-bezier(0.215, 0.61, 0.355, 1)', 241 | }, 242 | '0%': { 243 | opacity: 0, 244 | transform: 'translate3d(0, -3000px, 0) scaleY(3)', 245 | }, 246 | '60%': { 247 | opacity: 1, 248 | transform: 'translate3d(0, 25px, 0) scaleY(0.9)', 249 | }, 250 | '75%': { 251 | transform: 'translate3d(0, -10px, 0) scaleY(0.95)', 252 | }, 253 | '90%': { 254 | transform: 'translate3d(0, 5px, 0) scaleY(0.985)', 255 | }, 256 | to: { transform: 'translateZ(0)' }, 257 | }, 258 | bounceInLeft: { 259 | '0%, 60%, 75%, 90%, to': { 260 | animationTimingFunction: 'cubic-bezier(0.215, 0.61, 0.355, 1)', 261 | }, 262 | '0%': { 263 | opacity: 0, 264 | transform: 'translate3d(-3000px, 0, 0) scaleX(3)', 265 | }, 266 | '60%': { 267 | opacity: 1, 268 | transform: 'translate3d(25px, 0, 0) scaleX(1)', 269 | }, 270 | '75%': { 271 | transform: 'translate3d(-10px, 0, 0) scaleX(0.98)', 272 | }, 273 | '90%': { 274 | transform: 'translate3d(5px, 0, 0) scaleX(0.995)', 275 | }, 276 | to: { transform: 'translateZ(0)' }, 277 | }, 278 | bounceInRight: { 279 | '0%, 60%, 75%, 90%, to': { 280 | animationTimingFunction: 'cubic-bezier(0.215, 0.61, 0.355, 1)', 281 | }, 282 | '0%': { 283 | opacity: 0, 284 | transform: 'translate3d(3000px, 0, 0) scaleX(3)', 285 | }, 286 | '60%': { 287 | opacity: 1, 288 | transform: 'translate3d(-25px, 0, 0) scaleX(1)', 289 | }, 290 | '75%': { 291 | transform: 'translate3d(10px, 0, 0) scaleX(0.98)', 292 | }, 293 | '90%': { 294 | transform: 'translate3d(-5px, 0, 0) scaleX(0.995)', 295 | }, 296 | to: { transform: 'translateZ(0)' }, 297 | }, 298 | bounceInUp: { 299 | '0%, 60%, 75%, 90%, to': { 300 | animationTimingFunction: 'cubic-bezier(0.215, 0.61, 0.355, 1)', 301 | }, 302 | '0%': { 303 | opacity: 0, 304 | transform: 'translate3d(0, 3000px, 0) scaleY(5)', 305 | }, 306 | '60%': { 307 | opacity: 1, 308 | transform: 'translate3d(0, -20px, 0) scaleY(0.9)', 309 | }, 310 | '75%': { 311 | transform: 'translate3d(0, 10px, 0) scaleY(0.95)', 312 | }, 313 | '90%': { 314 | transform: 'translate3d(0, -5px, 0) scaleY(0.985)', 315 | }, 316 | to: { transform: 'translateZ(0)' }, 317 | }, 318 | bounceOut: { 319 | '20%': { transform: 'scale3d(0.9, 0.9, 0.9)' }, 320 | '50%, 55%': { 321 | opacity: 1, 322 | transform: 'scale3d(1.1, 1.1, 1.1)', 323 | }, 324 | to: { 325 | opacity: 0, 326 | transform: 'scale3d(0.3, 0.3, 0.3)', 327 | }, 328 | }, 329 | bounceOutDown: { 330 | '20%': { 331 | transform: 'translate3d(0, 10px, 0) scaleY(0.985)', 332 | }, 333 | '40%, 45%': { 334 | opacity: 1, 335 | transform: 'translate3d(0, -20px, 0) scaleY(0.9)', 336 | }, 337 | to: { 338 | opacity: 0, 339 | transform: 'translate3d(0, 2000px, 0) scaleY(3)', 340 | }, 341 | }, 342 | bounceOutLeft: { 343 | '20%': { 344 | opacity: 1, 345 | transform: 'translate3d(20px, 0, 0) scaleX(0.9)', 346 | }, 347 | to: { 348 | opacity: 0, 349 | transform: 'translate3d(-2000px, 0, 0) scaleX(2)', 350 | }, 351 | }, 352 | bounceOutRight: { 353 | '20%': { 354 | opacity: 1, 355 | transform: 'translate3d(-20px, 0, 0) scaleX(0.9)', 356 | }, 357 | to: { 358 | opacity: 0, 359 | transform: 'translate3d(2000px, 0, 0) scaleX(2)', 360 | }, 361 | }, 362 | bounceOutUp: { 363 | '20%': { 364 | transform: 'translate3d(0, -10px, 0) scaleY(0.985)', 365 | }, 366 | '40%, 45%': { 367 | opacity: 1, 368 | transform: 'translate3d(0, 20px, 0) scaleY(0.9)', 369 | }, 370 | to: { 371 | opacity: 0, 372 | transform: 'translate3d(0, -2000px, 0) scaleY(3)', 373 | }, 374 | }, 375 | fadeIn: { '0%': { opacity: 0 }, to: { opacity: 1 } }, 376 | fadeInDown: { 377 | '0%': { 378 | opacity: 0, 379 | transform: 'translate3d(0, -100%, 0)', 380 | }, 381 | to: { opacity: 1, transform: 'translateZ(0)' }, 382 | }, 383 | fadeInDownBig: { 384 | '0%': { 385 | opacity: 0, 386 | transform: 'translate3d(0, -2000px, 0)', 387 | }, 388 | to: { opacity: 1, transform: 'translateZ(0)' }, 389 | }, 390 | fadeInLeft: { 391 | '0%': { 392 | opacity: 0, 393 | transform: 'translate3d(-100%, 0, 0)', 394 | }, 395 | to: { opacity: 1, transform: 'translateZ(0)' }, 396 | }, 397 | fadeInLeftBig: { 398 | '0%': { 399 | opacity: 0, 400 | transform: 'translate3d(-2000px, 0, 0)', 401 | }, 402 | to: { opacity: 1, transform: 'translateZ(0)' }, 403 | }, 404 | fadeInRight: { 405 | '0%': { 406 | opacity: 0, 407 | transform: 'translate3d(100%, 0, 0)', 408 | }, 409 | to: { opacity: 1, transform: 'translateZ(0)' }, 410 | }, 411 | fadeInRightBig: { 412 | '0%': { 413 | opacity: 0, 414 | transform: 'translate3d(2000px, 0, 0)', 415 | }, 416 | to: { opacity: 1, transform: 'translateZ(0)' }, 417 | }, 418 | fadeInUp: { 419 | '0%': { 420 | opacity: 0, 421 | transform: 'translate3d(0, 100%, 0)', 422 | }, 423 | to: { opacity: 1, transform: 'translateZ(0)' }, 424 | }, 425 | fadeInUpBig: { 426 | '0%': { 427 | opacity: 0, 428 | transform: 'translate3d(0, 2000px, 0)', 429 | }, 430 | to: { opacity: 1, transform: 'translateZ(0)' }, 431 | }, 432 | fadeInTopLeft: { 433 | '0%': { 434 | opacity: 0, 435 | transform: 'translate3d(-100%, -100%, 0)', 436 | }, 437 | to: { opacity: 1, transform: 'translateZ(0)' }, 438 | }, 439 | fadeInTopRight: { 440 | '0%': { 441 | opacity: 0, 442 | transform: 'translate3d(100%, -100%, 0)', 443 | }, 444 | to: { opacity: 1, transform: 'translateZ(0)' }, 445 | }, 446 | fadeInBottomLeft: { 447 | '0%': { 448 | opacity: 0, 449 | transform: 'translate3d(-100%, 100%, 0)', 450 | }, 451 | to: { opacity: 1, transform: 'translateZ(0)' }, 452 | }, 453 | fadeInBottomRight: { 454 | '0%': { 455 | opacity: 0, 456 | transform: 'translate3d(100%, 100%, 0)', 457 | }, 458 | to: { opacity: 1, transform: 'translateZ(0)' }, 459 | }, 460 | fadeOut: { '0%': { opacity: 1 }, to: { opacity: 0 } }, 461 | fadeOutDown: { 462 | '0%': { opacity: 1 }, 463 | to: { 464 | opacity: 0, 465 | transform: 'translate3d(0, 100%, 0)', 466 | }, 467 | }, 468 | fadeOutDownBig: { 469 | '0%': { opacity: 1 }, 470 | to: { 471 | opacity: 0, 472 | transform: 'translate3d(0, 2000px, 0)', 473 | }, 474 | }, 475 | fadeOutLeft: { 476 | '0%': { opacity: 1 }, 477 | to: { 478 | opacity: 0, 479 | transform: 'translate3d(-100%, 0, 0)', 480 | }, 481 | }, 482 | fadeOutLeftBig: { 483 | '0%': { opacity: 1 }, 484 | to: { 485 | opacity: 0, 486 | transform: 'translate3d(-2000px, 0, 0)', 487 | }, 488 | }, 489 | fadeOutRight: { 490 | '0%': { opacity: 1 }, 491 | to: { 492 | opacity: 0, 493 | transform: 'translate3d(100%, 0, 0)', 494 | }, 495 | }, 496 | fadeOutRightBig: { 497 | '0%': { opacity: 1 }, 498 | to: { 499 | opacity: 0, 500 | transform: 'translate3d(2000px, 0, 0)', 501 | }, 502 | }, 503 | fadeOutUp: { 504 | '0%': { opacity: 1 }, 505 | to: { 506 | opacity: 0, 507 | transform: 'translate3d(0, -100%, 0)', 508 | }, 509 | }, 510 | fadeOutUpBig: { 511 | '0%': { opacity: 1 }, 512 | to: { 513 | opacity: 0, 514 | transform: 'translate3d(0, -2000px, 0)', 515 | }, 516 | }, 517 | fadeOutTopLeft: { 518 | '0%': { opacity: 1, transform: 'translateZ(0)' }, 519 | to: { 520 | opacity: 0, 521 | transform: 'translate3d(-100%, -100%, 0)', 522 | }, 523 | }, 524 | fadeOutTopRight: { 525 | '0%': { opacity: 1, transform: 'translateZ(0)' }, 526 | to: { 527 | opacity: 0, 528 | transform: 'translate3d(100%, -100%, 0)', 529 | }, 530 | }, 531 | fadeOutBottomRight: { 532 | '0%': { opacity: 1, transform: 'translateZ(0)' }, 533 | to: { 534 | opacity: 0, 535 | transform: 'translate3d(100%, 100%, 0)', 536 | }, 537 | }, 538 | fadeOutBottomLeft: { 539 | '0%': { opacity: 1, transform: 'translateZ(0)' }, 540 | to: { 541 | opacity: 0, 542 | transform: 'translate3d(-100%, 100%, 0)', 543 | }, 544 | }, 545 | flip: { 546 | '0%': { 547 | transform: 'perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn)', 548 | animationTimingFunction: 'ease-out', 549 | }, 550 | '40%': { 551 | transform: 'perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg)', 552 | animationTimingFunction: 'ease-out', 553 | }, 554 | '50%': { 555 | transform: 'perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg)', 556 | animationTimingFunction: 'ease-in', 557 | }, 558 | '80%': { 559 | transform: 'perspective(400px) scale3d(0.95, 0.95, 0.95) translateZ(0) rotateY(0deg)', 560 | animationTimingFunction: 'ease-in', 561 | }, 562 | to: { 563 | transform: 'perspective(400px) scaleX(1) translateZ(0) rotateY(0deg)', 564 | animationTimingFunction: 'ease-in', 565 | }, 566 | }, 567 | flipInX: { 568 | '0%': { 569 | transform: 'perspective(400px) rotateX(90deg)', 570 | animationTimingFunction: 'ease-in', 571 | opacity: 0, 572 | }, 573 | '40%': { 574 | transform: 'perspective(400px) rotateX(-20deg)', 575 | animationTimingFunction: 'ease-in', 576 | }, 577 | '60%': { 578 | transform: 'perspective(400px) rotateX(10deg)', 579 | opacity: 1, 580 | }, 581 | '80%': { 582 | transform: 'perspective(400px) rotateX(-5deg)', 583 | }, 584 | to: { transform: 'perspective(400px)' }, 585 | }, 586 | flipInY: { 587 | '0%': { 588 | transform: 'perspective(400px) rotateY(90deg)', 589 | animationTimingFunction: 'ease-in', 590 | opacity: 0, 591 | }, 592 | '40%': { 593 | transform: 'perspective(400px) rotateY(-20deg)', 594 | animationTimingFunction: 'ease-in', 595 | }, 596 | '60%': { 597 | transform: 'perspective(400px) rotateY(10deg)', 598 | opacity: 1, 599 | }, 600 | '80%': { 601 | transform: 'perspective(400px) rotateY(-5deg)', 602 | }, 603 | to: { transform: 'perspective(400px)' }, 604 | }, 605 | flipOutX: { 606 | '0%': { transform: 'perspective(400px)' }, 607 | '30%': { 608 | transform: 'perspective(400px) rotateX(-20deg)', 609 | opacity: 1, 610 | }, 611 | to: { 612 | transform: 'perspective(400px) rotateX(90deg)', 613 | opacity: 0, 614 | }, 615 | }, 616 | flipOutY: { 617 | '0%': { transform: 'perspective(400px)' }, 618 | '30%': { 619 | transform: 'perspective(400px) rotateY(-15deg)', 620 | opacity: 1, 621 | }, 622 | to: { 623 | transform: 'perspective(400px) rotateY(90deg)', 624 | opacity: 0, 625 | }, 626 | }, 627 | lightSpeedInRight: { 628 | '0%': { 629 | transform: 'translate3d(100%, 0, 0) skewX(-30deg)', 630 | opacity: 0, 631 | }, 632 | '60%': { transform: 'skewX(20deg)', opacity: 1 }, 633 | '80%': { transform: 'skewX(-5deg)' }, 634 | to: { transform: 'translateZ(0)' }, 635 | }, 636 | lightSpeedInLeft: { 637 | '0%': { 638 | transform: 'translate3d(-100%, 0, 0) skewX(30deg)', 639 | opacity: 0, 640 | }, 641 | '60%': { transform: 'skewX(-20deg)', opacity: 1 }, 642 | '80%': { transform: 'skewX(5deg)' }, 643 | to: { transform: 'translateZ(0)' }, 644 | }, 645 | lightSpeedOutRight: { 646 | '0%': { opacity: 1 }, 647 | to: { 648 | transform: 'translate3d(100%, 0, 0) skewX(30deg)', 649 | opacity: 0, 650 | }, 651 | }, 652 | lightSpeedOutLeft: { 653 | '0%': { opacity: 1 }, 654 | to: { 655 | transform: 'translate3d(-100%, 0, 0) skewX(-30deg)', 656 | opacity: 0, 657 | }, 658 | }, 659 | rotateIn: { 660 | '0%': { transform: 'rotate(-200deg)', opacity: 0 }, 661 | to: { transform: 'translateZ(0)', opacity: 1 }, 662 | }, 663 | rotateInDownLeft: { 664 | '0%': { transform: 'rotate(-45deg)', opacity: 0 }, 665 | to: { transform: 'translateZ(0)', opacity: 1 }, 666 | }, 667 | rotateInDownRight: { 668 | '0%': { transform: 'rotate(45deg)', opacity: 0 }, 669 | to: { transform: 'translateZ(0)', opacity: 1 }, 670 | }, 671 | rotateInUpLeft: { 672 | '0%': { transform: 'rotate(45deg)', opacity: 0 }, 673 | to: { transform: 'translateZ(0)', opacity: 1 }, 674 | }, 675 | rotateInUpRight: { 676 | '0%': { transform: 'rotate(-90deg)', opacity: 0 }, 677 | to: { transform: 'translateZ(0)', opacity: 1 }, 678 | }, 679 | rotateOut: { 680 | '0%': { opacity: 1 }, 681 | to: { transform: 'rotate(200deg)', opacity: 0 }, 682 | }, 683 | rotateOutDownLeft: { 684 | '0%': { opacity: 1 }, 685 | to: { transform: 'rotate(45deg)', opacity: 0 }, 686 | }, 687 | rotateOutDownRight: { 688 | '0%': { opacity: 1 }, 689 | to: { transform: 'rotate(-45deg)', opacity: 0 }, 690 | }, 691 | rotateOutUpLeft: { 692 | '0%': { opacity: 1 }, 693 | to: { transform: 'rotate(-45deg)', opacity: 0 }, 694 | }, 695 | rotateOutUpRight: { 696 | '0%': { opacity: 1 }, 697 | to: { transform: 'rotate(90deg)', opacity: 0 }, 698 | }, 699 | hinge: { 700 | '0%': { animationTimingFunction: 'ease-in-out' }, 701 | '20%, 60%': { 702 | transform: 'rotate(80deg)', 703 | animationTimingFunction: 'ease-in-out', 704 | }, 705 | '40%, 80%': { 706 | transform: 'rotate(60deg)', 707 | animationTimingFunction: 'ease-in-out', 708 | opacity: 1, 709 | }, 710 | to: { 711 | transform: 'translate3d(0, 700px, 0)', 712 | opacity: 0, 713 | }, 714 | }, 715 | jackInTheBox: { 716 | '0%': { 717 | opacity: 0, 718 | transform: 'scale(0.1) rotate(30deg)', 719 | transformOrigin: 'center bottom', 720 | }, 721 | '50%': { transform: 'rotate(-10deg)' }, 722 | '70%': { transform: 'rotate(3deg)' }, 723 | to: { opacity: 1, transform: 'scale(1)' }, 724 | }, 725 | rollIn: { 726 | '0%': { 727 | opacity: 0, 728 | transform: 'translate3d(-100%, 0, 0) rotate(-120deg)', 729 | }, 730 | to: { opacity: 1, transform: 'translateZ(0)' }, 731 | }, 732 | rollOut: { 733 | '0%': { opacity: 1 }, 734 | to: { 735 | opacity: 0, 736 | transform: 'translate3d(100%, 0, 0) rotate(120deg)', 737 | }, 738 | }, 739 | zoomIn: { 740 | '0%': { 741 | opacity: 0, 742 | transform: 'scale3d(0.3, 0.3, 0.3)', 743 | }, 744 | '50%': { opacity: 1 }, 745 | }, 746 | zoomInDown: { 747 | '0%': { 748 | opacity: 0, 749 | transform: 'scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0)', 750 | animationTimingFunction: 'cubic-bezier(0.55, 0.055, 0.675, 0.19)', 751 | }, 752 | '60%': { 753 | opacity: 1, 754 | transform: 'scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0)', 755 | animationTimingFunction: 'cubic-bezier(0.175, 0.885, 0.32, 1)', 756 | }, 757 | }, 758 | zoomInLeft: { 759 | '0%': { 760 | opacity: 0, 761 | transform: 'scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0)', 762 | animationTimingFunction: 'cubic-bezier(0.55, 0.055, 0.675, 0.19)', 763 | }, 764 | '60%': { 765 | opacity: 1, 766 | transform: 'scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0)', 767 | animationTimingFunction: 'cubic-bezier(0.175, 0.885, 0.32, 1)', 768 | }, 769 | }, 770 | zoomInRight: { 771 | '0%': { 772 | opacity: 0, 773 | transform: 'scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0)', 774 | animationTimingFunction: 'cubic-bezier(0.55, 0.055, 0.675, 0.19)', 775 | }, 776 | '60%': { 777 | opacity: 1, 778 | transform: 'scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0)', 779 | animationTimingFunction: 'cubic-bezier(0.175, 0.885, 0.32, 1)', 780 | }, 781 | }, 782 | zoomInUp: { 783 | '0%': { 784 | opacity: 0, 785 | transform: 'scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0)', 786 | animationTimingFunction: 'cubic-bezier(0.55, 0.055, 0.675, 0.19)', 787 | }, 788 | '60%': { 789 | opacity: 1, 790 | transform: 'scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0)', 791 | animationTimingFunction: 'cubic-bezier(0.175, 0.885, 0.32, 1)', 792 | }, 793 | }, 794 | zoomOut: { 795 | '0%': { opacity: 1 }, 796 | '50%': { 797 | opacity: 0, 798 | transform: 'scale3d(0.3, 0.3, 0.3)', 799 | }, 800 | to: { opacity: 0 }, 801 | }, 802 | zoomOutDown: { 803 | '40%': { 804 | opacity: 1, 805 | transform: 'scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0)', 806 | animationTimingFunction: 'cubic-bezier(0.55, 0.055, 0.675, 0.19)', 807 | }, 808 | to: { 809 | opacity: 0, 810 | transform: 'scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0)', 811 | animationTimingFunction: 'cubic-bezier(0.175, 0.885, 0.32, 1)', 812 | }, 813 | }, 814 | zoomOutLeft: { 815 | '40%': { 816 | opacity: 1, 817 | transform: 'scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0)', 818 | }, 819 | to: { 820 | opacity: 0, 821 | transform: 'scale(0.1) translate3d(-2000px, 0, 0)', 822 | }, 823 | }, 824 | zoomOutRight: { 825 | '40%': { 826 | opacity: 1, 827 | transform: 'scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0)', 828 | }, 829 | to: { 830 | opacity: 0, 831 | transform: 'scale(0.1) translate3d(2000px, 0, 0)', 832 | }, 833 | }, 834 | zoomOutUp: { 835 | '40%': { 836 | opacity: 1, 837 | transform: 'scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0)', 838 | animationTimingFunction: 'cubic-bezier(0.55, 0.055, 0.675, 0.19)', 839 | }, 840 | to: { 841 | opacity: 0, 842 | transform: 'scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0)', 843 | animationTimingFunction: 'cubic-bezier(0.175, 0.885, 0.32, 1)', 844 | }, 845 | }, 846 | slideInDown: { 847 | '0%': { 848 | transform: 'translate3d(0, -100%, 0)', 849 | visibility: 'visible', 850 | }, 851 | to: { transform: 'translateZ(0)' }, 852 | }, 853 | slideInLeft: { 854 | '0%': { 855 | transform: 'translate3d(-100%, 0, 0)', 856 | visibility: 'visible', 857 | }, 858 | to: { transform: 'translateZ(0)' }, 859 | }, 860 | slideInRight: { 861 | '0%': { 862 | transform: 'translate3d(100%, 0, 0)', 863 | visibility: 'visible', 864 | }, 865 | to: { transform: 'translateZ(0)' }, 866 | }, 867 | slideInUp: { 868 | '0%': { 869 | transform: 'translate3d(0, 100%, 0)', 870 | visibility: 'visible', 871 | }, 872 | to: { transform: 'translateZ(0)' }, 873 | }, 874 | slideOutDown: { 875 | '0%': { transform: 'translateZ(0)' }, 876 | to: { 877 | visibility: 'hidden', 878 | transform: 'translate3d(0, 100%, 0)', 879 | }, 880 | }, 881 | slideOutLeft: { 882 | '0%': { transform: 'translateZ(0)' }, 883 | to: { 884 | visibility: 'hidden', 885 | transform: 'translate3d(-100%, 0, 0)', 886 | }, 887 | }, 888 | slideOutRight: { 889 | '0%': { transform: 'translateZ(0)' }, 890 | to: { 891 | visibility: 'hidden', 892 | transform: 'translate3d(100%, 0, 0)', 893 | }, 894 | }, 895 | slideOutUp: { 896 | '0%': { transform: 'translateZ(0)' }, 897 | to: { 898 | visibility: 'hidden', 899 | transform: 'translate3d(0, -100%, 0)', 900 | }, 901 | }, 902 | }) 903 | -------------------------------------------------------------------------------- /packages/animated-pandacss/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "esnext", 4 | "module": "esnext", 5 | "allowSyntheticDefaultImports": true, 6 | "esModuleInterop": true, 7 | "forceConsistentCasingInFileNames": true, 8 | "verbatimModuleSyntax": true, 9 | "moduleResolution": "node", 10 | "noEmit": true, 11 | "resolveJsonModule": true, 12 | "skipLibCheck": true, 13 | "strict": true 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /pnpm-workspace.yaml: -------------------------------------------------------------------------------- 1 | packages: 2 | - "examples/**" 3 | - "packages/*" 4 | - "site" 5 | -------------------------------------------------------------------------------- /site/.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { browser: true, es2020: true }, 4 | extends: [ 5 | 'eslint:recommended', 6 | 'plugin:@typescript-eslint/recommended', 7 | 'plugin:react-hooks/recommended', 8 | ], 9 | ignorePatterns: ['dist', '.eslintrc.cjs'], 10 | parser: '@typescript-eslint/parser', 11 | plugins: ['react-refresh'], 12 | rules: { 13 | 'react-refresh/only-export-components': [ 14 | 'warn', 15 | { allowConstantExport: true }, 16 | ], 17 | }, 18 | } 19 | -------------------------------------------------------------------------------- /site/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /site/README.md: -------------------------------------------------------------------------------- 1 | # React + TypeScript + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | 10 | ## Expanding the ESLint configuration 11 | 12 | If you are developing a production application, we recommend updating the configuration to enable type aware lint rules: 13 | 14 | - Configure the top-level `parserOptions` property like this: 15 | 16 | ```js 17 | parserOptions: { 18 | ecmaVersion: 'latest', 19 | sourceType: 'module', 20 | project: ['./tsconfig.json', './tsconfig.node.json'], 21 | tsconfigRootDir: __dirname, 22 | }, 23 | ``` 24 | 25 | - Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked` 26 | - Optionally add `plugin:@typescript-eslint/stylistic-type-checked` 27 | - Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list 28 | -------------------------------------------------------------------------------- /site/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 9 | 10 | Animated PandaCSS 11 | 12 | 13 |
14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /site/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "site", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "prepare": "panda codegen", 8 | "dev": "vite", 9 | "build": "tsc && vite build", 10 | "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0", 11 | "preview": "vite preview" 12 | }, 13 | "dependencies": { 14 | "@theme-toggles/react": "4.1.0", 15 | "animated-pandacss": "workspace:*", 16 | "react": "^18.2.0", 17 | "react-dom": "^18.2.0", 18 | "react-icons": "4.10.1", 19 | "react-syntax-highlighter": "15.5.0", 20 | "shiki": "0.14.3", 21 | "usehooks-ts": "2.9.1" 22 | }, 23 | "devDependencies": { 24 | "@pandacss/dev": "dev", 25 | "@shadow-panda/preset": "0.2.0", 26 | "@types/node": "20.4.9", 27 | "@types/react": "^18.2.15", 28 | "@types/react-dom": "^18.2.7", 29 | "@types/react-syntax-highlighter": "15.5.7", 30 | "@typescript-eslint/eslint-plugin": "^6.0.0", 31 | "@typescript-eslint/parser": "^6.0.0", 32 | "@vitejs/plugin-react": "^4.0.3", 33 | "eslint": "^8.45.0", 34 | "eslint-plugin-react-hooks": "^4.6.0", 35 | "eslint-plugin-react-refresh": "^0.4.3", 36 | "typescript": "^5.0.2", 37 | "vite": "^4.4.12", 38 | "vite-tsconfig-paths": "4.2.0" 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /site/panda.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from '@pandacss/dev' 2 | 3 | export default defineConfig({ 4 | preflight: true, 5 | include: ['./src/**/*.{js,jsx,ts,tsx}'], 6 | presets: ['animated-pandacss', '@shadow-panda/preset'], 7 | exclude: [], 8 | outdir: 'styled-system', 9 | jsxFramework: 'react', 10 | }) 11 | -------------------------------------------------------------------------------- /site/postcss.config.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | '@pandacss/dev/postcss': {}, 4 | }, 5 | } -------------------------------------------------------------------------------- /site/src/App.tsx: -------------------------------------------------------------------------------- 1 | import { keyframes } from 'animated-pandacss' 2 | import { useState } from 'react' 3 | import { BsGithub, BsTwitter } from 'react-icons/bs' 4 | import { IoClose } from 'react-icons/io5' 5 | import { css, cx } from '../styled-system/css' 6 | import { flex, grid, stack } from '../styled-system/patterns' 7 | import { badge, button, link } from '../styled-system/recipes' 8 | import { Code } from './code' 9 | import { addToPreset, installScript, usageScript } from './codeblocks' 10 | import { ColorModeButton } from './color-mode-button' 11 | 12 | const listButton = cx('dark', button({ variant: 'ghost', size: 'sm' }), css({ w: 'fit-content' })) 13 | 14 | function App() { 15 | const [animationName, setAnimationName] = useState('zoomInDown') 16 | const [listIsOpen, setListIsOpen] = useState(false) 17 | return ( 18 | <> 19 |
34 |
42 |

setAnimationName(undefined)} 52 | > 53 | Animated-🐼 54 |

55 |

64 | Animations for PandaCSS 65 |

66 |

74 | 77 |

78 |
79 | 80 |
112 |
115 | 121 | 122 | 123 | 129 | 130 | 131 | 132 | 142 |
143 |
144 | {Object.keys(keyframes).map((animation) => ( 145 | 156 | ))} 157 |
158 |
159 | 160 | 181 |
182 |
197 |

Documentation

198 |
199 |
200 |
201 | Animated PandaCSS is a preset for{' '} 202 | 203 | PandaCSS 204 | {' '} 205 | that lets you use{' '} 206 | 207 | Animate.css 208 | {' '} 209 | 219 | animations 220 | {' '} 221 | in the library. 222 |
223 | 224 |
225 |

Installation

226 | 227 |
228 | 229 |
230 |

Usage

231 | 232 |
233 | Add as first item of presets in your panda config 234 | 235 |
236 |
237 | You can now use it in your project. 238 | 239 |
240 |
241 |
242 | 243 | ) 244 | } 245 | 246 | export default App 247 | -------------------------------------------------------------------------------- /site/src/code.tsx: -------------------------------------------------------------------------------- 1 | import SyntaxHighlighter from 'react-syntax-highlighter' 2 | import { irBlack } from 'react-syntax-highlighter/dist/esm/styles/hljs' 3 | 4 | import { Box, Flex } from '../styled-system/jsx' 5 | import { CopyCodeButton } from './copy-code-button' 6 | 7 | type Props = { code: string; lang?: string } 8 | 9 | export const Code = (props: Props) => { 10 | const { code, lang = 'typescript' } = props 11 | 12 | return ( 13 | 21 | 22 | {code} 23 | 24 | 25 | 26 | 27 | 28 | ) 29 | } 30 | -------------------------------------------------------------------------------- /site/src/codeblocks.ts: -------------------------------------------------------------------------------- 1 | export const installScript = `npm i -D animated-pandacss 2 | yarn add -D animated-pandacss 3 | pnpm i -D animated-pandacss` 4 | 5 | export const addToPreset = `import { defineConfig } from '@pandacss/dev' 6 | 7 | export default defineConfig({ 8 | // Other config... 9 | presets: ['animated-pandacss', '@pandacss/dev/presets'], 10 | }) 11 | ` 12 | 13 | export const usageScript = `
23 | Animated element 24 |
` 25 | -------------------------------------------------------------------------------- /site/src/color-mode-button.tsx: -------------------------------------------------------------------------------- 1 | import { Expand } from '@theme-toggles/react' 2 | import '@theme-toggles/react/css/Expand.css' 3 | import { useColorMode } from './useColorMode' 4 | 5 | export const ColorModeButton = ({ className }: { className?: string }) => { 6 | const { toggle, colorMode } = useColorMode() 7 | 8 | return 9 | } 10 | -------------------------------------------------------------------------------- /site/src/copy-code-button.tsx: -------------------------------------------------------------------------------- 1 | 'use client' 2 | import { useEffect, useState } from 'react' 3 | import { FiCheck, FiCopy } from 'react-icons/fi' 4 | import { useCopyToClipboard } from 'usehooks-ts' 5 | import { cx } from '../styled-system/css' 6 | import { button } from '../styled-system/recipes' 7 | 8 | type Props = { content: string } 9 | 10 | export const CopyCodeButton = (props: Props) => { 11 | const { content } = props 12 | const [, copy] = useCopyToClipboard() 13 | const [visible, setVisible] = useState(true) 14 | 15 | useEffect(() => { 16 | if (visible) return 17 | const timer = setTimeout(() => setVisible(true), 1000) 18 | return () => clearTimeout(timer) 19 | }, [visible]) 20 | 21 | const handleClick = () => { 22 | copy(content) 23 | setVisible(false) 24 | } 25 | 26 | return ( 27 | 34 | ) 35 | } 36 | -------------------------------------------------------------------------------- /site/src/index.css: -------------------------------------------------------------------------------- 1 | @layer reset, base, tokens, recipes, utilities; 2 | -------------------------------------------------------------------------------- /site/src/main.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App.tsx' 4 | import './index.css' 5 | 6 | ReactDOM.createRoot(document.getElementById('root')!).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /site/src/useColorMode.ts: -------------------------------------------------------------------------------- 1 | import { useEffectOnce, useLocalStorage, useUpdateEffect } from 'usehooks-ts' 2 | 3 | type ColorMode = 'light' | 'dark' 4 | 5 | export const colorModeLocalStorageKey = 'animated-pandacss-color-mode' 6 | 7 | export const useColorMode = () => { 8 | const [colorMode, setColorMode] = useLocalStorage(colorModeLocalStorageKey, 'dark') 9 | 10 | const syncColorMode = () => 11 | colorMode === 'dark' 12 | ? document.documentElement.classList.add('dark') 13 | : document.documentElement.classList.remove('dark') 14 | 15 | useEffectOnce(syncColorMode) 16 | useUpdateEffect(syncColorMode, [colorMode]) 17 | 18 | return { 19 | colorMode, 20 | toggle: () => setColorMode((prev) => (prev === 'dark' ? 'light' : 'dark')), 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /site/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /site/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2020", 4 | "useDefineForClassFields": true, 5 | "lib": ["ES2020", "DOM", "DOM.Iterable"], 6 | "module": "ESNext", 7 | "skipLibCheck": true, 8 | /* Bundler mode */ 9 | "moduleResolution": "bundler", 10 | "allowImportingTsExtensions": true, 11 | "resolveJsonModule": true, 12 | "isolatedModules": true, 13 | "noEmit": true, 14 | "jsx": "react-jsx", 15 | /* Linting */ 16 | "strict": true, 17 | "noUnusedLocals": true, 18 | "noUnusedParameters": true, 19 | "noFallthroughCasesInSwitch": true 20 | }, 21 | "include": ["src", "styled-system"], 22 | "references": [ 23 | { 24 | "path": "./tsconfig.node.json" 25 | } 26 | ] 27 | } 28 | -------------------------------------------------------------------------------- /site/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "skipLibCheck": true, 5 | "module": "ESNext", 6 | "moduleResolution": "bundler", 7 | "allowSyntheticDefaultImports": true 8 | }, 9 | "include": ["vite.config.ts"] 10 | } 11 | -------------------------------------------------------------------------------- /site/vite.config.ts: -------------------------------------------------------------------------------- 1 | import react from '@vitejs/plugin-react' 2 | import { defineConfig } from 'vite' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | base: './', 7 | plugins: [react()], 8 | build: { 9 | outDir: 'site-build', 10 | }, 11 | }) 12 | --------------------------------------------------------------------------------