The Singularity

A Super Bowl campaign site has two jobs. It has to show visitors the ad, and it has to send them to Squarespace to build a site of their own. Squarespace announced the campaign on February 9, 2023, the year of the company's 20th anniversary. The spot aired between the first and second quarters of the Super Bowl on February 12, and Squarespace released a limited-edition Singularity template at the same time. This site ties both jobs to the same joke. The ad says Squarespace is a website that makes websites, so the site has Adam make websites on the spot, one at a time, and every one Adam makes is a template visitors can actually use.

Visitors land on a single page with four sections, about four and a half screens long on a 1920 pixel wide desktop screen. The first section is the opening screen, where a 15 second cut from the ad loops behind the title and the WATCH THE BIG GAME AD button in the middle opens the full ad. The second section introduces the limited Singularity template. The third is a large crowd of Adams under the title MAKE A WEBSITE WITH THE WEBSITE THAT MAKES WEBSITES, with a free trial button. The fourth, DISCOVER MORE, is a row of draggable video cards holding the teaser, a behind-the-scenes film and three short spots. Three other buttons on the page lead to Squarespace's template library, the demo site of the Singularity template and the free trial home page.

The real star of the site is that round badge in the bottom right corner, which stays in the corner of the screen as visitors scroll. The text around the badge reads MAKE A WEBSITE WITH ADAM. When a visitor clicks the badge, or holds the mouse button down anywhere on the page for about a second, Adam's head grows to fill the whole screen. With every click Adam says "website" or "websites", and a template flies out of Adam's mouth and settles to one side of the head. The site holds the demo sites of 27 Squarespace templates, and each card is a screenshot of one of them. When the cursor rests on a card, START WITH THIS TEMPLATE appears on it, and a click opens that template's demo site in a new tab.

The toy escalates the same way the ad's story does. On the fifth click Adam splits into two, one asking "Are you a website?" and the other answering "I'm a website". One more click makes three Adams, and all three start producing templates. On the tenth click ten templates burst out at once and a vortex pulls the whole picture in. When the picture comes back, only one Adam is left and the cycle starts again. If the visitor stops for three seconds, Adam says "click me" without being asked, and after two such reminders Adam starts producing templates alone. Every line also appears as a white caption in quotation marks across Adam's chest, so visitors with the sound off still understand what is being said.

The layout uses only black and white, and every bit of color comes from imagery, namely the footage from the ad, Adam's skin and the template screenshots. The background is pure black #000000, and the text and buttons are white #FFFFFF. The layout therefore steps behind the pictures, and the first thing visitors see is always the desert and the crowd from the ad, or Adam's face. The cost is that the page has few ways to set up a hierarchy, and the sections are told apart only by the size of the titles and the brightness of the images.

The type comes in two kinds, each with one job. Titles use the Semibold weight of Rama Gothic E, a narrow typeface from Dharma Type with no decorative strokes at the ends of its letters, set in capitals at 50 pixels on desktop and 37.5 pixels on phones. The title line height is only 1.1 times the font size, so the lines sit tightly stacked like the title on a film poster. Body text, buttons and the footer use Clarkson Medium from Optimo, with body text at 12.5 pixels and a 1.6 line height, so the titles are about four times the body size. The THE SINGULARITY logo on the opening screen is not set in a font. It is an image, and its lowercase i sits a notch lower than the other letters, which makes it easy to recognize.

All text buttons on the page share one look, a white rectangle with black capitals. On desktop they are 50 pixels tall, and the big button on the opening screen is 59 pixels tall with a play triangle in front. When the cursor moves over a button, it turns black with white text. The side margins follow the screen width and grow from 20 pixels to 127 pixels between 768 and 1440 pixels wide. Only the template section uses two columns, with the text on the left and two template screenshots overlapping on the right, while the other three sections are centered.

The 3D imagery follows the ad's art direction and looks like portraits shot in the dark. The full-screen Adam has light on one side of the face while the other side falls into black, and the suit merges into the background, which makes the colorful template screenshots stand out. The crowd section copies the same Adam hundreds of times, sharp in the front rows and darker further back until the figures vanish into black, with the left and right edges darkening as well. The rim of the round badge is a ragged edge that wobbles like ink, and the text around it turns. The badge always stays in a corner of the screen, so visitors can find it in every section.

On phones the same rules turn into a vertical layout. Only the Squarespace symbol stays in the top left corner, the round badge moves to the top right, and the MAKE A WEBSITE button that sat top right is no longer shown. The screenshots in the template section move below the text, and the DISCOVER MORE video cards change from a horizontal row into a vertical list. The full-screen Adam sits further from the camera, so visitors see the whole upper body, and the templates land in the empty space above the head and in front of the chest.

The opening joins the loading screen to the real opening screen. When the site opens, the black screen first shows the white title, a small spinner and the loading progress. Once loading finishes, this layer fades out in a third of a second, and the title underneath is already drawn in the same place, so visitors cannot tell that one layer replaced another. Then the background video opens up and down from a horizontal line across the middle, fast at first and slower at the end, and takes about three and a half seconds to fill the screen. The WATCH THE BIG GAME AD button starts at the same moment, rising from 30 pixels below while it grows taller. EXPLORE THE SINGULARITY at the bottom appears more than two seconds later and fades out as soon as the visitor starts scrolling.

The site takes over the page's scrolling itself. When a visitor turns the wheel, the page does not jump straight to its target. Each frame it covers a tenth of the remaining distance, so the page keeps gliding for more than a second after the wheel stops. On the opening screen the video moves up more slowly than the text, and in the template section the two screenshots drift in opposite directions while each also floats gently up and down. In the crowd section, scrolling lowers the camera from above the crowd, and the crowd itself keeps sliding sideways as if it were marching. When the visitor reaches DISCOVER MORE, the cards rise one after another, each 0.12 seconds behind the previous one, and every drag moves the row by one card. Scrolling from top to bottom and back up again holds steady at 60 frames per second.

The round badge has its own way of moving. It normally rests in the bottom right corner, and when the cursor comes within a fifth of the screen width, it leaves the corner and follows the cursor with a slight delay, drifting back when the cursor moves away. The faster the visitor scrolls, the further the badge lags behind vertically, and the text around it turns with the scroll. When the cursor is over the badge, its ragged rim wobbles harder.

Opening Adam is the main transition of the whole site, and it looks different depending on how the visitor gets in. After a click on the badge, the circle grows from the corner toward full screen, fast at first and then slower. It reaches half size at about 0.6 seconds and nearly full screen at 1.2 seconds, and comes to rest at about two seconds. When the visitor holds the mouse button down on the page, a white arc runs clockwise around the badge's rim to show how much longer to hold. At the same time the whole page twists into a vortex around the cursor, with the title and buttons stretched and pulled in, and after about a second of holding Adam grows to full screen. A click on WATCH THE BIG GAME AD brings up the same vortex, except that this time the player opens as a circle from the cursor and expands to fill the window within 1.5 seconds. One turn of the scroll wheel sends Adam back to the corner, and the head is mostly closed within 0.4 seconds, much faster than it opens.

The full-screen Adam keeps moving even when the visitor does nothing. Adam's head nods slightly with each breath, the eyes flick now and then, and the hair sways as if in a light wind. Adam's face turns toward the cursor, and a light that follows the cursor brightens the side of the face nearest to it, growing brighter the faster the cursor moves. On a click, Adam's mouth opens first, and about 0.3 seconds later the template comes out. The screenshot starts out bulging and rippling, and over a little more than two seconds it flies to one side while flattening out. Once in place, it keeps drifting slowly toward the visitor and fades out by itself after eight seconds.

The split is the most exaggerated move in the toy. Adam's face first stretches sideways, as if two hands were pulling it apart, and half a second later it tears into two people, the two heads springing apart, one asking first and the other answering a second later. When the third Adam appears, the first two step aside and the new one splits off from the middle. The first two each say "Another one", and the new one says "I'm a website".

The last move of the toy is a vortex that swallows the whole picture. At that point ten templates pour out of the mouth within two seconds, and the whole picture spins faster and faster for three seconds. The lower half of the picture darkens first and everything is drawn toward the top of the screen, then the picture turns slowly back over eight seconds with only one Adam left. From one Adam talking and producing templates, to three Adams talking together, to the final vortex, the picture holds 60 frames per second throughout.

When the cursor moves onto one of the templates that flew out, every screenshot stops drifting forward. The one under the cursor darkens by seventy percent, START WITH THIS TEMPLATE rises from behind it, and the screenshot itself gives a small bounce. At the same moment, one side of Adam's face is lit from that screenshot, as if the screenshot were glowing. On phones the badge stays fixed in the top right corner and no longer follows the finger. One tap on the badge opens Adam, and every tap after that drops a template into the grid above Adam's head and in front of the chest. When visitors swipe on a phone, the page follows the finger almost directly instead of gliding into place the way it does on desktop.

The site is built on Hydra, Active Theory's own web framework, and the whole page is drawn into a single WebGL2 canvas, so even the titles, body text and buttons are not HTML text. Text is drawn from MSDF font atlases, one for Rama Gothic E and one for Clarkson, and the buttons, videos and template screenshots are all flat quads in the canvas. Each frame, the page is first drawn as a whole into a render target, then a full-screen post-processing shader reads it back and adds the vortex, the darkening at the top and bottom edges and a fine grain. The round badge is not part of that render target. It is drawn on its own on top, after post-processing, so it stays perfectly round while the page twists into a vortex. Adam's 3D scene and the crowd each render into their own render target first and are then used as images on the badge and in the crowd section. So that screen readers and the keyboard can use the page, the framework keeps an invisible DOM under the canvas, whose headings and links match the content in the canvas one for one.

Adam's head uses portrait textures seen from the front, which the shader projects onto a head mesh from the front, so the head only works when seen from the front, and the site only lets Adam turn a little. The mesh is a skinned model with bones, and the bone data lives in a texture. The face uses four 2048 pixel square front-facing textures. They are a base color map with the shading already in it, an evenly lit diffuse map, a normal map that records which way each point faces, and a mask. The mask's red, green and blue channels mark the outline of the head, the hair and the eyes. The base color, diffuse and normal maps are downloaded as KTX2 and decompressed in the browser by the Basis Universal transcoder.

The shader uses these textures to relight Adam's face. The light that follows the cursor adds the color of the diffuse map onto the base color along the directions stored in the normal map, so wherever the cursor passes, the face looks as if it were really lit. The hair area offsets its texture coordinates along a flow map to suggest wind, and the eye area's texture coordinates jump every so often to make the small flicks of the eyes. The highlight in the eyes comes from a separate matcap, a small image of a lit sphere mapped onto the eyes by their direction. The developers left comments in the shader that read "subtle wind blowing through hair" and that place the eye flicks in the vertex shader "for better performance".

Every line Adam says is a recording paired with a facial animation. The site gives Adam 13 lines, each with an animation file of only 2 to 5 KB that records the mouth shapes and expression for that line. Each animation can also be shifted earlier or later against its sound so the mouth lines up with the voice, and the caption text comes from the site's content data. When Adam splits into two or three, the new Adams copy the original mesh, skeletal animations and recordings, so nothing is downloaded again. The stretching and tearing of the split happen in the vertex shader, where one variable controls the overall sideways stretch and two more control a one-sided stretch to the left or to the right, before an elastic ease brings the face back.

The templates that fly out come from a prebuilt pool of 30 cards, which take their images from the 27 templates in the content data in a shuffled order, so the order is different on every visit. The ripple of a card in flight is also done in the vertex shader, where one variable falls from 1 to 0 and the card flattens out from a bulge. When the cursor rests on a card, the code passes the card's position to the face shader as the light shining from the card's direction.

The crowd section draws 805 Adams with a single instanced draw. Each Adam is a flat card that always faces the camera, in 35 rows of 23, with every other row shifted by half a place and every card nudged a little at random so the rows do not look too regular. All the cards share one 2048 by 1024 atlas that holds five full-body Adams in slightly different poses side by side, and each card picks one of them by its index. The atlas comes with a normal map in the same layout, so the light that follows the cursor can light up the Adams near the cursor, growing brighter the faster the cursor moves. The whole crowd renders into its own render target and only while the section is on screen, and devices with weaker graphics get a still image of the crowd instead.

The whole setup is tiered by graphics card. The code first rates the visitor's GPU and then decides the canvas resolution multiplier, the frame rate cap, and whether to draw the cursor-driven fluid, the 3D crowd and the face scene at full resolution. On a computer with an upper mid-range graphics card, the page renders at 1.5 times resolution with neither multisample anti-aliasing nor FXAA, so edges are smoothed only by that 1.5 times supersampling. The framework ships bloom code and shaders that this site never uses. The post-processing shader also contains a block that bends the picture with scroll speed, but its result is overwritten before it is used, so the picture never bends while scrolling.

On first load the site's own files come to about 10 MB, and the largest is the 4.7 MB looping video on the opening screen, which is buffered in full. Phones get a 1.2 MB portrait video at 512 by 1024 instead, and visitors with reduced motion turned on only download a still frame. Adam's model, animations, textures and voice lines all download on first load, so opening the badge involves almost no waiting. Scrolling from top to bottom and back up again triggers no further downloads. The opening video only uploads new frames to the GPU while it is on screen, so that cost stops once the visitor scrolls past it. The first content appears on screen at about 0.4 to 0.5 seconds, the title is already up at about 0.8 seconds, the video fills the background at about 4.5 seconds, and the page barely shifts while loading.

The invisible DOM under the canvas lets screen readers read the page's headings and every link, and the Tab key reaches WATCH THE BIG GAME AD, the five videos and the footer links in turn. However, when keyboard focus lands on a link, the canvas does not scroll to it, so with focus on the video cards near the bottom of the page the screen still shows the opening section. The round badge is not in the Tab order at all, so keyboard-only visitors cannot open Adam and never reach the site's main feature. With reduced motion turned on, only the opening video is replaced by a still frame, while the vortex, the crowd and Adam's movements all play as usual.

The Singularity first won FWA of the Day on February 28, 2023, with 84 points, and then Awwwards Site of the Day and the Developer Award on March 17. The FWA files it under animation, experimental and promotional. The campaign as a whole won a Yellow Pencil, a Graphite Pencil and a Wood Pencil at D&AD in 2023, and the D&AD entry lists Active Theory as the design agency. The site itself was a 2024 Webby Honoree for Best Visual Design in the websites category.

Among the four Awwwards categories, Creativity scored highest at 8.03, which may reflect how the site turns the ad's joke into an Adam who talks and splits. Usability scored lowest at 7.28, and that matches what the earlier chapters describe, since the main feature hides in a corner badge and a press-and-hold gesture and the keyboard cannot open it. The developer jury gave 7.78, with Animations highest at 8.80 and Markup lowest at 6.80. The whole page is drawn with WebGL and its HTML structure is only the invisible DOM, which may have pulled the Markup score down.

The records in the table are totals as of October 29, 2026. Squarespace's in-house creative team and Active Theory made the site together. On the Squarespace side, the Webby entry lists Chief Creative Officer David Lee, Creative Director Mathieu Zarbatany and the design team. On the Active Theory side, it lists Creative Director Andy Thelander, Interactive Director Luigi De Rosa, 3D Lead Michael Sungalia, Lead 3D Developer Pete Feltham and others. The ad was directed by Aoife McArdle with Smuggler as the production company, and the loop on the site's opening screen is cut from it.