Atalanta Tech

Platform website for a mathematical artificial intelligence company

Credits:

Alright Studio - Project lead, design, hosting and handover

Links:

Website

Highlights:

Procedural grid system for page transition animations

Every time you change pages, a unique grid pattern grows from the bottom to top of the screen.

There were plenty of quirks here, I’ll only describe the final constraints that the system adheres to:

1: All walls must be reached; a filled corner cell counts as both walls.
2: No adjacent cells can be filled at the same time.
3: We need roughly 30-70% of cells filled to get a good visual effect.

The result is a unique pattern every time, that grows organically and fills the screen in visually consistent manner:

Procedural grid pattern of filled cells growing from the bottom of the screen, used for Atalanta Tech’s page-transition animation

A second example of the procedural grid pattern used in Atalanta Tech’s page transitions, with a different arrangement of filled cells

Story:

I’ve always admired Alright Studio’s work so when this build came up I was stoked to have the chance to work with them. The build was for Atalanta - a company building provably correct mathematical analysis with artificial intelligence.

The design was extremely tidy, with a clear direction and an even clearer Figma file - which is all a humble developer can ask for.

Process and Tech:

CMS

I started by building out the CMS. For this build Alright opted for a custom CMS structure using Sanity.io.

This allows the Atalanta team to manage their own content post launch.

Frontend

I went with Astro for the frontend as it’s always my preference for simple, content focused sites.

We statically generate the entire site - ensuring fastest possible load times, and SEO coverage. For type generation and data queries I used GraphQL (see here for why).

For styling, all we need is CSS - no pre-processors, no post-processors, no tailwind, just modern organised CSS.

Images

Images are highly optimised using Sanity’s image pipeline, webp format, and lazy loading to ensure fast load times without sacrificing quality.

Video

Videos are hosted and streamed using Mux, which takes care of encoding and delivery, ensuring smooth playback across devices and network conditions.

Repo

The entire codebase lives in a single pnpm monorepo, clean, tidy and shared dependencies between the frontend and CMS.

Hosting

Alright Studio handled the hosting and handover for this site.

Next project (Matt Cherubino)