Integrated Security
September 12, 2024
The team at Asimov Collective recently wrapped up a new brand identity for Realm, the foundational physical security platform for critical industry.
You can find the site here.
The Stack
The site is built using our typical stack:
- React, with Next.js as our meta-framework (pages router)
- Tailwind CSS for styling
- Motion for animations
- TinaCMS for content management
Technical Highlights
3D Scene
We built out a complex 3D scene using Three.js and React Three Fiber. The scene uses a base GLTF model of mountains and a scene on top of a series of buildings. We built a complex grid shader that takes in the density as a parameter, allowing us to visualize depth. You can see the scene in action below:
Alongside the custom shader for the grid system, we also built out a system that orchestrated the highlighting the buildings one by one. This involved keeping track of the highlighted building in state, and lerping the color in a useFrame hook.
Some other stuff, that you would think would be trivial, but were actually somewhat complex:
- Highlighting visible edges of buildings using
<lineSegments />and<edgesGeometry />. - Adding camera controls within bounds for a semi-orbitable scene.
- Creating a custom
pulsatingRadialGradientshader for the circle that appears under the center building.
Expanding Menu
We leveraged motion's layout animations to create an expanding menu animation.
Layout animations can always be tricky, especially when trying to prevent distortions, but after tweaking we ended up with a nice effect.
Internationalization
This was our first project carrying out internationalization via i18next—a great tool. As a result, we moved all copy to a locales/common.json file, which had a side effect of becoming a lightweight CMS in a way.
Integrated Security
The project was a fun one to work on, and we're really proud of the result. Check out Realm here.