https://github.com/devonchurch/macadamia-nuts
An experiment to simulate 3D aesthetics
https://github.com/devonchurch/macadamia-nuts
3d 3d-reconstruction experimental react reactjs typescript
Last synced: 7 months ago
JSON representation
An experiment to simulate 3D aesthetics
- Host: GitHub
- URL: https://github.com/devonchurch/macadamia-nuts
- Owner: devonChurch
- License: mit
- Created: 2020-03-01T00:05:22.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2024-04-23T02:15:24.000Z (almost 2 years ago)
- Last Synced: 2025-06-30T06:07:17.141Z (9 months ago)
- Topics: 3d, 3d-reconstruction, experimental, react, reactjs, typescript
- Language: TypeScript
- Homepage: https://devonchurch.github.io/macadamia-nuts/
- Size: 1.02 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Macadamia Nuts 🐿 🌰 😋
[](https://prettier.io/) [](http://commitizen.github.io/cz-cli/) [](https://www.typescriptlang.org/)
## What 👋
A [Google Chrome](https://www.google.com/chrome/) experiment to simulate _3D_ aesthetics within a browser's traditional DOM environment.
## Why 🤷♀️
This is a fun investigation into some lesser-used browser features that when composed with simple math sequences can yield visually interesting results.
## Demo 🕹
### ➡️ **[You can try the interactive demo here!](https://devonchurch.github.io/macadamia-nuts/)** ⬅️
---
## How 💡
The _3D_ system is built around [CSS Perspective](https://developer.mozilla.org/en-US/docs/Web/CSS/perspective), [CSS Filters](https://developer.mozilla.org/en-US/docs/Web/CSS/filter) and [CSS Blend Modes](https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode).
### [CSS Perspective](https://developer.mozilla.org/en-US/docs/Web/CSS/perspective)
Allows the interactive manipulation of our `` icons on the _**z-axis**_. This is the foundation for creating the _3D_ _"feel"_. The perspective offset is based on the users' pointer position and has a _min_/_max_ threshold to ensure the `` icon is always legible.
```scss
.perspective {
perspective: 80rem;
.icon {
transform: rotateY(...) rotateX(...);
}
}
```
### [CSS Filters](https://developer.mozilla.org/en-US/docs/Web/CSS/filter)
The solution for giving the `` icon depth. Specifically using `filter: drop-shadow(...)` to layer up a convincing _**z-axis**_ surface. Using [Styled Components](https://styled-components.com/) allowed the multiple `drop-shadow` layers to be rendered at run time with an incrementing offset.
```scss
// prettier-ignore
.icon {
filter:
drop-shadow(...)
drop-shadow(...)
drop-shadow(...)
drop-shadow(...)
drop-shadow(...)
drop-shadow(...)
drop-shadow(...)
drop-shadow(...)
drop-shadow(...)
drop-shadow(...);
}
```
### [CSS Blend Modes](https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode)
Created a lighting solution that would _blend_ into a scene dynamically against the various different icon color pallets. I opted for a `multiply` function to bring our the _dark_ and _light_ areas with realistic intensities.
The lights focus is based on the users' pointer position, effectively lighting the part of the `` icon that is closest to the users in the _z-axis_.
```scss
.lighting {
background: radial-gradient(...);
mix-blend-mode: multiply;
}
```
## Installation 🤖
- Clone this repository
```
git clone https://github.com/devonChurch/macadamia-nuts.git && cd macadamia-nuts
```
- Install project dependencies
```
nvm use && npm i
```
- Start a development server on [Port 3000](http://localhost:3000/)
```
npm start
```
## Deployment 🏁
- Create a _Production_ build
```
nvm run build
```
- Deploy the application to `gh-pages`
```
nvm run deploy
```
## License 📜
MIT