---
title: "Card Drawings AR"
description: "Augmented Reality Card Drawings & Spatial Shader Experience"
canonical: "https://stddev-01.web.app/work/projects/card-drawings-ar"
date_published: "2021-05-26T19:05:51+00:00"
date_modified: "2026-10-01T10:01:41+00:00"
tokens: 4216
content-signal: "ai-train=yes, search=yes, ai-input=yes"
---
> Documentation Index
> Fetch the complete documentation index at: https://stddev-01.web.app/llms.txt
> Use this file to discover all available pages before exploring further.
**Sector:** Projects
# Card Drawings AR
### Augmented Reality & Spatial Shader Experience
> Augmented Reality Card Drawings & Spatial Shader Experience
**Amidst the global isolation of 2020, Serviceplan celebrated its 50th anniversary of creativity and the launch of its climate-neutral initiative.** To honor this milestone and share the joy globally, the agency decided to replace its traditional paper holiday greetings with a sustainable, interactive digital experience. Under the banner "Closer Together," the initiative invited people to connect through a unique intersection of art and augmented reality.
**To explore what "togetherness" feels like in isolation—whether connecting with people, nature, or the innermost self—Serviceplan united nine international artists to create a diverse series of bespoke illustrations.** The agency's core concept was to create a "draw-it-yourself" AR experience, allowing users to physically trace the lines of these nine unique artworks to create and share their own personalized holiday cards. STD.DEV was brought on board to engineer this spatial AR experience and the accompanying campaign platform.
### The Technical Challenge
The project required two distinct technical feats. First, translating nine vastly different, hand-drawn illustration styles into a seamless, interactive 3D tracing experience for mobile AR. Second, developing a web platform that could visually and conceptually connect all nine isolated artworks. Because this project launched Serviceplan's climate-neutral initiative, relying on heavy, bandwidth-intensive video files to showcase the art would contradict the campaign's eco-conscious goals. The web execution needed to be visually stunning but mathematically lightweight.
### The Solution
STD.DEV developed the complete spatial AR drawing mechanic and the AR-enabled website. To elevate the digital platform beyond a static gallery, STD.DEV conceptualized and engineered a complex, scroll-driven SVG path animation. Instead of loading video transitions, the website’s background mathematically interpolated the raw vector paths of the illustrations. As the user scrolled from top to bottom, the lines of one artist's work fluidly morphed and reassembled into the next, creating an unbroken visual thread of "togetherness" powered entirely by code.
### Impact
By replacing physical paper with a procedural AR experience, "Closer Together" successfully delivered warm holiday greetings while drastically reducing climate impact. The campaign empowered users worldwide to add their own creative touch and share their digital cards using the #CloserTogether tag. STD.DEV’s SVG interpolation concept ensured the web platform remained highly performant and environmentally lightweight, perfectly aligning the project's technical architecture with its sustainable message.
**Transforming static illustrations into a unified digital ecosystem required precise vector mathematics and spatial tracking.** STD.DEV delivered the technical backbone of the campaign across two core deliverables:
### 2. Spatial AR Drawing Engine
Engineering the interactive AR filters that enabled the step-by-step "draw-it-yourself" mechanic. The spatial application guided users through tracing the diverse, hand-drawn lines of the nine global artists directly in their physical environment, allowing them to participate in the creative process and generate personalized digital holiday cards.
### 1. Campaign Website
Developing the campaign’s AR-enabled platform by treating source code as a living artistic medium. By extracting the raw vector data from all nine isolated illustrations, the custom architecture interpolated the drawing paths in real-time as the user scrolled. This approach visually reinforced the theme of continuous connection while completely eliminating the carbon and performance costs of heavy media assets.
**"Closer Together" proves that interactive technology can bridge physical distances and foster genuine human connection.** By unifying procedural web architecture with spatial AR drawing mechanics, STD.DEV transformed a static corporate holiday greeting into a participatory global canvas—empowering users around the world to leave their own creative mark.
### Credits
**Client, Creative Direction & Concept****Serviceplan Group
Spatial AR & Web Platform Engineering****STD.DEV (Daniel Kuhnlein)
Participating Artists**
Amber Vittoria, Anastacia Sholik, Anna Ginsburg, Dia Pacheco, Ikki Kobayashi, Joshua Scurville, Luciano Cian, Rinee Shirke, Rosa Kammermeier
**Ready to captivate your audience with unforgettable digital experiences?** Let’s transform your vision into extraordinary moments that inspire and engage.
[Contact Form](/node/331.md)
[Schedule a Video Call](https://calendar.app.google/CC6ekPMGq7ntCEAY7)
### Frequently Asked Questions
#### Q: How did Serviceplan replace traditional holiday greetings with a sustainable digital experience?
In cooperation with STD.DEV, Serviceplan replaced traditional paper holiday greetings with a sustainable, interactive digital experience called "Closer Together," which used augmented reality and digital illustrations from nine international artists.
#### Q: What was the core concept of the "Closer Together" initiative?
The core concept was to create a "draw-it-yourself" AR experience where users could physically trace the lines of nine unique artworks to create and share their own personalized holiday cards.
#### Q: Who was responsible for engineering the spatial AR experience and campaign platform for "Closer Together"?
STD.DEV was brought on board to engineer the spatial AR experience and the accompanying campaign platform for the "Closer Together" initiative.
#### Q: What were the two distinct technical challenges faced in the "Closer Together" project?
The technical challenges were translating nine diverse hand-drawn illustration styles into a seamless 3D tracing AR experience for mobile, and developing a web platform that connected these artworks in the most efficient way to align with the climate-neutral initiative.
#### Q: How did STD.DEV make the web platform visually engaging yet environmentally lightweight?
STD.DEV engineered a scroll-driven SVG path animation where the website's background mathematically interpolated the raw vector paths of the illustrations, fluidly morphing one artwork into the next as the user scrolled, thus eliminating the need for heavy preanimated pixel based techniques.
#### Q: How did the "Closer Together" campaign reduce its climate impact?
By replacing physical paper with a procedural AR experience, the campaign drastically reduced climate impact while still delivering holiday greetings and empowering users to share their digital creations.
#### Q: What specific technical deliverables did STD.DEV provide for the "Closer Together" campaign?
STD.DEV delivered two core components: the campaign's AR-enabled platform, which used custom architecture to interpolate drawing paths in real-time as the user scrolled, and the spatial AR drawing engine that enabled the interactive "draw-it-yourself" mechanic.
#### Q: How did the campaign website reinforce the theme of continuous connection using code?
The campaign website reinforced the theme of continuous connection by extracting raw vector data from all nine illustrations and using a custom architecture to interpolate the drawing paths in real-time as the user scrolled, eliminating the need for heavy media assets.
#### Q: What was the role of the spatial AR drawing engine in the campaign?
The spatial AR drawing engine engineered the interactive AR filters that guided users through tracing the diverse, hand-drawn lines of the nine global artists in their physical environment, allowing them to create personalized digital holiday cards.
#### Q: What was the strategic goal behind using an AR experience instead of traditional holiday cards?
The strategic goal was to celebrate Serviceplan's 50th anniversary and its climate-neutral initiative by creating a sustainable, interactive digital experience that allowed global connection and shared creativity.
#### Q: How did the project align with Serviceplan's climate-neutral initiative?
The project aligned with the climate-neutral initiative by replacing physical paper greetings with a procedural AR experience and ensuring the web platform was environmentally lightweight by eliminating heavy media assets and using code-driven animations.
#### Q: What was the purpose of uniting nine international artists for the "Closer Together" initiative?
Nine international artists were united to create a diverse series of bespoke illustrations exploring the concept of "togetherness" in isolation, which users could then trace using the AR experience.
```json
{
"@context": "https://schema.org",
"@type": "WebPage",
"headline": "Card Drawings AR",
"description": "Augmented Reality Card Drawings & Spatial Shader Experience",
"url": "https://stddev-01.web.app/work/projects/card-drawings-ar",
"inLanguage": "en",
"datePublished": "2021-05-26T19:05:51+00:00",
"dateModified": "2026-10-01T10:01:41+00:00"
}
```