A website for a hair salon in Zurich Seefeld
Employed libraries include:
- React -> front-end JavaScript library
- Next.js -> web development framework for react
- Tailwind -> utility-first CSS framework
- next-i18next -> i18next and react-i18next under the hood
- Zustand -> state-management solution for react
- Framer Motion -> animation library for react
- Lenis -> smooth scroll solution
- react-three-fiber -> react renderer for Three.js
- custom WebGL frag shader
- sporadic use of pure CSS for non-trivial animations
- tracks DOM elements and draws Three.js objects in their place using r3f-scroll-rig
- Opinionated lint config:
- no semicolons
- jsx: single attribute per line
- portal element: fix faux-3d effect on pointer move
- footer element: mobile browser navigation bars scrolling issue
- performance improvements
- refactor frag shader
This application requires Node.js v16.13+.
git clone https://github.com/gnovotny/anahair.git
cd anahair
yarn install
yarn dev- Alternative design variant (early prototype): https://anahair-proto-2023-alt-design.vercel.app/
- Modded version of r3f-scroll-rig included in the source code
This project was developed – and is curated and maintained – by:
- You are free to use this code but please don't just copy it blindly
- Remove all personal information and commercial fonts
- Crediting the author is appreciated
- Be kind and help others learn