{"id":22542653,"url":"https://github.com/devonchurch/macadamia-nuts","last_synced_at":"2025-09-07T04:35:10.459Z","repository":{"id":97157619,"uuid":"244060397","full_name":"devonChurch/macadamia-nuts","owner":"devonChurch","description":"An experiment to simulate 3D aesthetics","archived":false,"fork":false,"pushed_at":"2024-04-23T02:15:24.000Z","size":1074,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-30T06:07:17.141Z","etag":null,"topics":["3d","3d-reconstruction","experimental","react","reactjs","typescript"],"latest_commit_sha":null,"homepage":"https://devonchurch.github.io/macadamia-nuts/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/devonChurch.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-03-01T00:05:22.000Z","updated_at":"2020-04-14T08:08:33.000Z","dependencies_parsed_at":null,"dependency_job_id":"502a1255-b636-4a37-a8ad-3803d3b172e9","html_url":"https://github.com/devonChurch/macadamia-nuts","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/devonChurch/macadamia-nuts","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devonChurch%2Fmacadamia-nuts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devonChurch%2Fmacadamia-nuts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devonChurch%2Fmacadamia-nuts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devonChurch%2Fmacadamia-nuts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/devonChurch","download_url":"https://codeload.github.com/devonChurch/macadamia-nuts/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devonChurch%2Fmacadamia-nuts/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273997064,"owners_count":25204473,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-07T02:00:09.463Z","response_time":67,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["3d","3d-reconstruction","experimental","react","reactjs","typescript"],"created_at":"2024-12-07T13:11:53.458Z","updated_at":"2025-09-07T04:35:10.432Z","avatar_url":"https://github.com/devonChurch.png","language":"TypeScript","readme":"# Macadamia Nuts 🐿 🌰 😋\n\n[![code style prettier](https://img.shields.io/badge/code_style-prettier-FF69A4.svg)](https://prettier.io/) [![commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/) [![typescript](https://user-images.githubusercontent.com/15273233/40872275-a61d4660-669f-11e8-8edf-860f1947759f.png)](https://www.typescriptlang.org/)\n\n## What 👋\n\nA [Google Chrome](https://www.google.com/chrome/) experiment to simulate _3D_ aesthetics within a browser's traditional DOM environment.\n\n## Why 🤷‍♀️\n\nThis is a fun investigation into some lesser-used browser features that when composed with simple math sequences can yield visually interesting results.\n\n## Demo 🕹\n\n### ➡️ **[You can try the interactive demo here!](https://devonchurch.github.io/macadamia-nuts/)** ⬅️\n\n---\n\n![macadamia-nuts-demo](https://user-images.githubusercontent.com/15273233/79106113-f8895300-7dc5-11ea-9225-5f9f5fed45c5.gif)\n\n## How 💡\n\nThe _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).\n\n### [CSS Perspective](https://developer.mozilla.org/en-US/docs/Web/CSS/perspective)\n\nAllows the interactive manipulation of our `\u003csvg /\u003e` 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 `\u003csvg /\u003e` icon is always legible.\n\n```scss\n.perspective {\n  perspective: 80rem;\n\n  .icon {\n    transform: rotateY(...) rotateX(...);\n  }\n}\n```\n\n### [CSS Filters](https://developer.mozilla.org/en-US/docs/Web/CSS/filter)\n\nThe solution for giving the `\u003csvg /\u003e` 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.\n\n```scss\n// prettier-ignore\n.icon {\n  filter: \n    drop-shadow(...) \n    drop-shadow(...) \n    drop-shadow(...) \n    drop-shadow(...)\n    drop-shadow(...) \n    drop-shadow(...) \n    drop-shadow(...) \n    drop-shadow(...)\n    drop-shadow(...) \n    drop-shadow(...);\n}\n```\n\n### [CSS Blend Modes](https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode)\n\nCreated 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.\n\nThe lights focus is based on the users' pointer position, effectively lighting the part of the `\u003csvg /\u003e` icon that is closest to the users in the _z-axis_.\n\n```scss\n.lighting {\n  background: radial-gradient(...);\n  mix-blend-mode: multiply;\n}\n```\n\n## Installation 🤖\n\n- Clone this repository\n\n  ```\n  git clone https://github.com/devonChurch/macadamia-nuts.git \u0026\u0026 cd macadamia-nuts\n  ```\n\n- Install project dependencies\n\n  ```\n  nvm use \u0026\u0026 npm i\n  ```\n\n- Start a development server on [Port 3000](http://localhost:3000/)\n\n  ```\n  npm start\n  ```\n\n## Deployment 🏁\n\n- Create a _Production_ build\n\n  ```\n  nvm run build\n  ```\n\n- Deploy the application to `gh-pages`\n\n  ```\n  nvm run deploy\n  ```\n\n## License 📜\n\nMIT\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevonchurch%2Fmacadamia-nuts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdevonchurch%2Fmacadamia-nuts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevonchurch%2Fmacadamia-nuts/lists"}