Integrated Security (Realm Tech Overview)

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 pulsatingRadialGradient shader for the circle that appears under the center building.

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.