Anahair

Description

A website for a hair salon in Zurich Seefeld

Composition

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

Features

• 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

TODO

• portal element: fix faux-3d effect on pointer move
• footer element: mobile browser navigation bars scrolling issue
• performance improvements
• refactor frag shader

Running Locally

This application requires Node.js v16.13+.

git clone https://github.com/gnovotny/anahair.git
cd anahair
yarn install
yarn dev

Related

• Alternative design variant (early prototype): https://anahair-proto-2023-alt-design.vercel.app/

Acknowledgements

• Modded version of r3f-scroll-rig included in the source code

Authors

This project was developed – and is curated and maintained – by:

• gnovotny – Website

License

The MIT License

1. You are free to use this code but please don't just copy it blindly
2. Remove all personal information and commercial fonts
3. Crediting the author is appreciated
4. Be kind and help others learn