├── .github ├── ISSUE_TEMPLATE │ └── feature_request.md └── workflows │ └── test.yml ├── .gitignore ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── eslint.config.js ├── examples ├── .gitignore ├── README.md ├── eslint.config.js ├── index.html ├── package-lock.json ├── package.json ├── public │ ├── logo.png │ └── svggles.png ├── src │ ├── App.css │ ├── App.tsx │ ├── Header.tsx │ ├── Sidebar.tsx │ ├── assets │ │ ├── design │ │ │ ├── background-scribbles.png │ │ │ └── viewbox.svg │ │ ├── example-svg │ │ │ ├── Blue.tsx │ │ │ ├── FakeCursor.tsx │ │ │ ├── Red.tsx │ │ │ ├── Yellow.tsx │ │ │ ├── arrow.svg │ │ │ ├── blue.svg │ │ │ ├── eye-interaction.svg │ │ │ ├── fake-cursor.svg │ │ │ ├── flower.svg │ │ │ ├── index.tsx │ │ │ └── yellow.svg │ │ └── fonts │ │ │ ├── SilkaMono │ │ │ └── SilkaMono-Regular.otf │ │ │ ├── Syne │ │ │ └── Syne-VariableFont_wght.ttf │ │ │ ├── TransformaMix │ │ │ └── TransformaMix_Trial-SemiBold.otf │ │ │ └── TransformaSans │ │ │ └── TransformaSans_Trial-SemiBold.otf │ ├── components │ │ ├── CodeBlock.tsx │ │ ├── ComponentLoader.tsx │ │ ├── FeaturePage.tsx │ │ ├── ParamBlock.tsx │ │ ├── SVGFormatBlock.tsx │ │ └── types.ts │ ├── example-interactions │ │ ├── eye-interaction.json │ │ ├── follow-cursor.json │ │ ├── glow-hover.json │ │ ├── hover-animate.json │ │ ├── hover │ │ │ ├── ExampleAnimateOnHover.tsx │ │ │ └── ExampleGlowOnHover.tsx │ │ ├── index.tsx │ │ ├── mouse-follow │ │ │ ├── ExampleEyeInteraction.tsx │ │ │ ├── ExampleMouseFollow.tsx │ │ │ ├── ExampleMouseRotateFullObject.tsx │ │ │ └── ExampleMouseRotateObject.tsx │ │ ├── mouse-rotate.json │ │ ├── scroll-morph.json │ │ ├── scroll-rotate.json │ │ └── scroll │ │ │ ├── ExampleMorphOnScroll.tsx │ │ │ └── ExampleScrollRotateObject.tsx │ ├── index.css │ ├── main.tsx │ ├── pages │ │ ├── CreatorHighlights.tsx │ │ ├── GettingStarted.tsx │ │ ├── SVGToReactGuide.tsx │ │ └── index.tsx │ └── vite-env.d.ts ├── tsconfig.app.json ├── tsconfig.json ├── tsconfig.node.json └── vite.config.ts ├── package.json ├── rollup.config.js ├── src ├── components │ ├── AnimatedOnHover.tsx │ ├── GlowOnHover.tsx │ ├── MorphOnScroll.tsx │ ├── MultiEyeInteraction.tsx │ ├── RotateObject.tsx │ └── SvgFollowMouse.tsx ├── index.ts └── tests │ ├── AnimatedOnHover.test.tsx │ ├── GlowOnHover.test.tsx │ ├── MorphOnScroll.test.tsx │ ├── MultiEyeInteraction.test.tsx │ ├── RotateObject.test.tsx │ └── SvgFollowMouse.test.tsx ├── tsconfig.json ├── vitest.config.ts └── vitest.setup.ts /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shantinghou/interactive-illustrations/HEAD/.github/ISSUE_TEMPLATE/feature_request.md -------------------------------------------------------------------------------- /.github/workflows/test.yml: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shantinghou/interactive-illustrations/HEAD/.github/workflows/test.yml -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shantinghou/interactive-illustrations/HEAD/.gitignore -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shantinghou/interactive-illustrations/HEAD/CONTRIBUTING.md -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shantinghou/interactive-illustrations/HEAD/LICENSE -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shantinghou/interactive-illustrations/HEAD/README.md -------------------------------------------------------------------------------- /eslint.config.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shantinghou/interactive-illustrations/HEAD/eslint.config.js -------------------------------------------------------------------------------- /examples/.gitignore: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shantinghou/interactive-illustrations/HEAD/examples/.gitignore -------------------------------------------------------------------------------- /examples/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shantinghou/interactive-illustrations/HEAD/examples/README.md -------------------------------------------------------------------------------- /examples/eslint.config.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shantinghou/interactive-illustrations/HEAD/examples/eslint.config.js -------------------------------------------------------------------------------- /examples/index.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shantinghou/interactive-illustrations/HEAD/examples/index.html -------------------------------------------------------------------------------- /examples/package-lock.json: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shantinghou/interactive-illustrations/HEAD/examples/package-lock.json -------------------------------------------------------------------------------- /examples/package.json: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shantinghou/interactive-illustrations/HEAD/examples/package.json -------------------------------------------------------------------------------- /examples/public/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shantinghou/interactive-illustrations/HEAD/examples/public/logo.png -------------------------------------------------------------------------------- /examples/public/svggles.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shantinghou/interactive-illustrations/HEAD/examples/public/svggles.png -------------------------------------------------------------------------------- /examples/src/App.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shantinghou/interactive-illustrations/HEAD/examples/src/App.css -------------------------------------------------------------------------------- /examples/src/App.tsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shantinghou/interactive-illustrations/HEAD/examples/src/App.tsx -------------------------------------------------------------------------------- /examples/src/Header.tsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shantinghou/interactive-illustrations/HEAD/examples/src/Header.tsx -------------------------------------------------------------------------------- /examples/src/Sidebar.tsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shantinghou/interactive-illustrations/HEAD/examples/src/Sidebar.tsx -------------------------------------------------------------------------------- /examples/src/assets/design/background-scribbles.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shantinghou/interactive-illustrations/HEAD/examples/src/assets/design/background-scribbles.png -------------------------------------------------------------------------------- /examples/src/assets/design/viewbox.svg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shantinghou/interactive-illustrations/HEAD/examples/src/assets/design/viewbox.svg -------------------------------------------------------------------------------- /examples/src/assets/example-svg/Blue.tsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shantinghou/interactive-illustrations/HEAD/examples/src/assets/example-svg/Blue.tsx -------------------------------------------------------------------------------- /examples/src/assets/example-svg/FakeCursor.tsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shantinghou/interactive-illustrations/HEAD/examples/src/assets/example-svg/FakeCursor.tsx -------------------------------------------------------------------------------- /examples/src/assets/example-svg/Red.tsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shantinghou/interactive-illustrations/HEAD/examples/src/assets/example-svg/Red.tsx -------------------------------------------------------------------------------- /examples/src/assets/example-svg/Yellow.tsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shantinghou/interactive-illustrations/HEAD/examples/src/assets/example-svg/Yellow.tsx -------------------------------------------------------------------------------- /examples/src/assets/example-svg/arrow.svg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shantinghou/interactive-illustrations/HEAD/examples/src/assets/example-svg/arrow.svg -------------------------------------------------------------------------------- /examples/src/assets/example-svg/blue.svg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shantinghou/interactive-illustrations/HEAD/examples/src/assets/example-svg/blue.svg -------------------------------------------------------------------------------- /examples/src/assets/example-svg/eye-interaction.svg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shantinghou/interactive-illustrations/HEAD/examples/src/assets/example-svg/eye-interaction.svg -------------------------------------------------------------------------------- /examples/src/assets/example-svg/fake-cursor.svg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shantinghou/interactive-illustrations/HEAD/examples/src/assets/example-svg/fake-cursor.svg -------------------------------------------------------------------------------- /examples/src/assets/example-svg/flower.svg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shantinghou/interactive-illustrations/HEAD/examples/src/assets/example-svg/flower.svg -------------------------------------------------------------------------------- /examples/src/assets/example-svg/index.tsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shantinghou/interactive-illustrations/HEAD/examples/src/assets/example-svg/index.tsx -------------------------------------------------------------------------------- /examples/src/assets/example-svg/yellow.svg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shantinghou/interactive-illustrations/HEAD/examples/src/assets/example-svg/yellow.svg -------------------------------------------------------------------------------- /examples/src/assets/fonts/SilkaMono/SilkaMono-Regular.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shantinghou/interactive-illustrations/HEAD/examples/src/assets/fonts/SilkaMono/SilkaMono-Regular.otf -------------------------------------------------------------------------------- /examples/src/assets/fonts/Syne/Syne-VariableFont_wght.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shantinghou/interactive-illustrations/HEAD/examples/src/assets/fonts/Syne/Syne-VariableFont_wght.ttf -------------------------------------------------------------------------------- /examples/src/assets/fonts/TransformaMix/TransformaMix_Trial-SemiBold.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shantinghou/interactive-illustrations/HEAD/examples/src/assets/fonts/TransformaMix/TransformaMix_Trial-SemiBold.otf -------------------------------------------------------------------------------- /examples/src/assets/fonts/TransformaSans/TransformaSans_Trial-SemiBold.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shantinghou/interactive-illustrations/HEAD/examples/src/assets/fonts/TransformaSans/TransformaSans_Trial-SemiBold.otf -------------------------------------------------------------------------------- /examples/src/components/CodeBlock.tsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shantinghou/interactive-illustrations/HEAD/examples/src/components/CodeBlock.tsx -------------------------------------------------------------------------------- /examples/src/components/ComponentLoader.tsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shantinghou/interactive-illustrations/HEAD/examples/src/components/ComponentLoader.tsx -------------------------------------------------------------------------------- /examples/src/components/FeaturePage.tsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shantinghou/interactive-illustrations/HEAD/examples/src/components/FeaturePage.tsx -------------------------------------------------------------------------------- /examples/src/components/ParamBlock.tsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shantinghou/interactive-illustrations/HEAD/examples/src/components/ParamBlock.tsx -------------------------------------------------------------------------------- /examples/src/components/SVGFormatBlock.tsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shantinghou/interactive-illustrations/HEAD/examples/src/components/SVGFormatBlock.tsx -------------------------------------------------------------------------------- /examples/src/components/types.ts: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shantinghou/interactive-illustrations/HEAD/examples/src/components/types.ts -------------------------------------------------------------------------------- /examples/src/example-interactions/eye-interaction.json: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shantinghou/interactive-illustrations/HEAD/examples/src/example-interactions/eye-interaction.json -------------------------------------------------------------------------------- /examples/src/example-interactions/follow-cursor.json: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shantinghou/interactive-illustrations/HEAD/examples/src/example-interactions/follow-cursor.json -------------------------------------------------------------------------------- /examples/src/example-interactions/glow-hover.json: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shantinghou/interactive-illustrations/HEAD/examples/src/example-interactions/glow-hover.json -------------------------------------------------------------------------------- /examples/src/example-interactions/hover-animate.json: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shantinghou/interactive-illustrations/HEAD/examples/src/example-interactions/hover-animate.json -------------------------------------------------------------------------------- /examples/src/example-interactions/hover/ExampleAnimateOnHover.tsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shantinghou/interactive-illustrations/HEAD/examples/src/example-interactions/hover/ExampleAnimateOnHover.tsx -------------------------------------------------------------------------------- /examples/src/example-interactions/hover/ExampleGlowOnHover.tsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shantinghou/interactive-illustrations/HEAD/examples/src/example-interactions/hover/ExampleGlowOnHover.tsx -------------------------------------------------------------------------------- /examples/src/example-interactions/index.tsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shantinghou/interactive-illustrations/HEAD/examples/src/example-interactions/index.tsx -------------------------------------------------------------------------------- /examples/src/example-interactions/mouse-follow/ExampleEyeInteraction.tsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shantinghou/interactive-illustrations/HEAD/examples/src/example-interactions/mouse-follow/ExampleEyeInteraction.tsx -------------------------------------------------------------------------------- /examples/src/example-interactions/mouse-follow/ExampleMouseFollow.tsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shantinghou/interactive-illustrations/HEAD/examples/src/example-interactions/mouse-follow/ExampleMouseFollow.tsx -------------------------------------------------------------------------------- /examples/src/example-interactions/mouse-follow/ExampleMouseRotateFullObject.tsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shantinghou/interactive-illustrations/HEAD/examples/src/example-interactions/mouse-follow/ExampleMouseRotateFullObject.tsx -------------------------------------------------------------------------------- /examples/src/example-interactions/mouse-follow/ExampleMouseRotateObject.tsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shantinghou/interactive-illustrations/HEAD/examples/src/example-interactions/mouse-follow/ExampleMouseRotateObject.tsx -------------------------------------------------------------------------------- /examples/src/example-interactions/mouse-rotate.json: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shantinghou/interactive-illustrations/HEAD/examples/src/example-interactions/mouse-rotate.json -------------------------------------------------------------------------------- /examples/src/example-interactions/scroll-morph.json: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shantinghou/interactive-illustrations/HEAD/examples/src/example-interactions/scroll-morph.json -------------------------------------------------------------------------------- /examples/src/example-interactions/scroll-rotate.json: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shantinghou/interactive-illustrations/HEAD/examples/src/example-interactions/scroll-rotate.json -------------------------------------------------------------------------------- /examples/src/example-interactions/scroll/ExampleMorphOnScroll.tsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shantinghou/interactive-illustrations/HEAD/examples/src/example-interactions/scroll/ExampleMorphOnScroll.tsx -------------------------------------------------------------------------------- /examples/src/example-interactions/scroll/ExampleScrollRotateObject.tsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shantinghou/interactive-illustrations/HEAD/examples/src/example-interactions/scroll/ExampleScrollRotateObject.tsx -------------------------------------------------------------------------------- /examples/src/index.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shantinghou/interactive-illustrations/HEAD/examples/src/index.css -------------------------------------------------------------------------------- /examples/src/main.tsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shantinghou/interactive-illustrations/HEAD/examples/src/main.tsx -------------------------------------------------------------------------------- /examples/src/pages/CreatorHighlights.tsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shantinghou/interactive-illustrations/HEAD/examples/src/pages/CreatorHighlights.tsx -------------------------------------------------------------------------------- /examples/src/pages/GettingStarted.tsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shantinghou/interactive-illustrations/HEAD/examples/src/pages/GettingStarted.tsx -------------------------------------------------------------------------------- /examples/src/pages/SVGToReactGuide.tsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shantinghou/interactive-illustrations/HEAD/examples/src/pages/SVGToReactGuide.tsx -------------------------------------------------------------------------------- /examples/src/pages/index.tsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shantinghou/interactive-illustrations/HEAD/examples/src/pages/index.tsx -------------------------------------------------------------------------------- /examples/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /examples/tsconfig.app.json: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shantinghou/interactive-illustrations/HEAD/examples/tsconfig.app.json -------------------------------------------------------------------------------- /examples/tsconfig.json: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shantinghou/interactive-illustrations/HEAD/examples/tsconfig.json -------------------------------------------------------------------------------- /examples/tsconfig.node.json: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shantinghou/interactive-illustrations/HEAD/examples/tsconfig.node.json -------------------------------------------------------------------------------- /examples/vite.config.ts: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shantinghou/interactive-illustrations/HEAD/examples/vite.config.ts -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shantinghou/interactive-illustrations/HEAD/package.json -------------------------------------------------------------------------------- /rollup.config.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shantinghou/interactive-illustrations/HEAD/rollup.config.js -------------------------------------------------------------------------------- /src/components/AnimatedOnHover.tsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shantinghou/interactive-illustrations/HEAD/src/components/AnimatedOnHover.tsx -------------------------------------------------------------------------------- /src/components/GlowOnHover.tsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shantinghou/interactive-illustrations/HEAD/src/components/GlowOnHover.tsx -------------------------------------------------------------------------------- /src/components/MorphOnScroll.tsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shantinghou/interactive-illustrations/HEAD/src/components/MorphOnScroll.tsx -------------------------------------------------------------------------------- /src/components/MultiEyeInteraction.tsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shantinghou/interactive-illustrations/HEAD/src/components/MultiEyeInteraction.tsx -------------------------------------------------------------------------------- /src/components/RotateObject.tsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shantinghou/interactive-illustrations/HEAD/src/components/RotateObject.tsx -------------------------------------------------------------------------------- /src/components/SvgFollowMouse.tsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shantinghou/interactive-illustrations/HEAD/src/components/SvgFollowMouse.tsx -------------------------------------------------------------------------------- /src/index.ts: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shantinghou/interactive-illustrations/HEAD/src/index.ts -------------------------------------------------------------------------------- /src/tests/AnimatedOnHover.test.tsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shantinghou/interactive-illustrations/HEAD/src/tests/AnimatedOnHover.test.tsx -------------------------------------------------------------------------------- /src/tests/GlowOnHover.test.tsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shantinghou/interactive-illustrations/HEAD/src/tests/GlowOnHover.test.tsx -------------------------------------------------------------------------------- /src/tests/MorphOnScroll.test.tsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shantinghou/interactive-illustrations/HEAD/src/tests/MorphOnScroll.test.tsx -------------------------------------------------------------------------------- /src/tests/MultiEyeInteraction.test.tsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shantinghou/interactive-illustrations/HEAD/src/tests/MultiEyeInteraction.test.tsx -------------------------------------------------------------------------------- /src/tests/RotateObject.test.tsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shantinghou/interactive-illustrations/HEAD/src/tests/RotateObject.test.tsx -------------------------------------------------------------------------------- /src/tests/SvgFollowMouse.test.tsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shantinghou/interactive-illustrations/HEAD/src/tests/SvgFollowMouse.test.tsx -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shantinghou/interactive-illustrations/HEAD/tsconfig.json -------------------------------------------------------------------------------- /vitest.config.ts: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shantinghou/interactive-illustrations/HEAD/vitest.config.ts -------------------------------------------------------------------------------- /vitest.setup.ts: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shantinghou/interactive-illustrations/HEAD/vitest.setup.ts --------------------------------------------------------------------------------