Custom media created from a model trained on my own face, then prepared as the visual layer revealed by the AR target.
POCKET PORTALS 01 / IMAGE TRACKING / WEBAR
POCKET PORTALS
A compact image-tracked AR experiment that turns a printed card into an active media surface. I trained an AI system on my face, generated the motion piece, mapped that video to a tracked physical card, and added a tap interaction that redirects the augmented layer to my Instagram.
VIEW BUILD01 / PREMISE
Turning a printed card into a live digital surface.
Pocket Portals started with a simple idea: a physical object does not have to remain static just because it is printed. I wanted a card to act like a trigger, something that could reveal a moving layer when viewed through a phone and then become interactive once the augmented content appeared.
For this first version, I kept the system intentionally personal. I trained an AI model on my face, generated a stylized video from that training, and used the card itself as the image target. Once the target is recognized, the video appears locked to the card. The augmented layer can then be tapped to redirect the viewer to my Instagram, connecting a physical object, generated media and a live social destination in one lightweight browser experience.
02 / EXPERIENCE MODEL
Recognize. Attach. Animate. Redirect.
The experience is built around a short chain of actions rather than a traditional interface. The camera first recognizes the printed target. Once tracking is stable, the digital video layer is anchored over that image. The card effectively becomes a screen that only exists through the viewer's device.
The final interaction adds a second layer of utility: the media itself is clickable. Instead of ending at the augmented animation, the user can tap the tracked content and move into a live web destination. That turns image tracking from a visual novelty into a bridge between print, motion and online identity.
01 / 04
EXPERIENCE 01
TARGET / PRINT
The printed card is the physical anchor. Its visual features are compiled into the tracking target that the browser later uses to recognize position and orientation.
03 / GENERATED MEDIA
Training identity into the media layer.
The augmented content was not sourced from stock footage or a conventional shoot. I trained an AI system on my own face and used that training to generate the video that appears on the card. That made the media-generation process part of the project rather than a separate asset-production step.
The result is a useful example of how generative media can feed directly into an interactive system: identity training produces the visual content, the video is prepared for web playback, and image tracking determines where that generated content lives in physical space. The specific AI model can be documented once I lock the exact training workflow into the final case-study assets.
GENERATED / MEDIA▶ENTER
04 / IMAGE TRACKING PIPELINE
Compiling a physical image into a trackable target.
MindAR handles the image-tracking layer. The source card image is compiled into a .mind target file, which stores the data needed for the browser to recognize the image and estimate its pose. That target becomes the reference point for the augmented scene. MindAR's own compiler exports these target files for use by the image-tracking runtime.
Once the target is recognized, the AR scene can attach media to that coordinate system. I used the tracked card as the anchor for the video layer, then added interaction logic so the augmented content could respond to a tap and route the viewer to an external URL. MindAR supports browser-based image targets and is commonly paired with A-Frame for scene composition.
01 / 04
PIPELINE 01
SOURCE / CARD IMAGE
The card artwork has to contain enough distinctive visual information for reliable feature tracking. That source is what eventually gets compiled into the runtime target.
05 / TECHNICAL STACK
A small web stack connecting AI media to physical interaction.
This project is technically compact, which is part of its value. It does not need a game engine or native app. The system can be delivered as a browser-based AR experience using MindAR for natural-feature image tracking, A-Frame for scene structure, JavaScript for interaction and redirect behavior, and a compiled .mind target for recognition. MindAR's examples show static HTML delivery with A-Frame and compiled image targets, making the stack well suited to lightweight web deployment.
My earlier Pocket Portal direction also used a React / Next.js front end with Node / Express around the broader app concept, but this specific card experience is strongest when described at the runtime level: AI-generated video, MindAR image tracking, A-Frame scene composition, HTML5 video, JavaScript events and URL routing.
Natural-feature image tracking in the browser, using the physical card as the target that anchors the augmented scene.
Compiled image-target data generated from the source card and loaded by the MindAR runtime for recognition and pose tracking.
Declarative WebAR scene structure for positioning media against the tracked target without requiring a native application.
The generated video becomes a browser-delivered augmented layer that can autoplay or respond when the card enters tracking.
Tap and click behavior converts the augmented layer into an interactive object that redirects the viewer to Instagram.
06 / BUILD LOGIC
One object moving through several media states.
The build is useful to me because it collapses several disciplines into one very small object. Identity becomes generated media. The generated media becomes a web asset. The printed card becomes a tracking target. The target becomes an anchor. The anchor becomes an interactive video surface. The tap becomes a path back into a live social platform.
That modularity is also why Pocket Portals works as a series. This first version is about a portrait, motion and a social redirect. Later entries can keep the same underlying grammar while changing the target, media type, interaction, destination or physical object.
EVOLUTION 01
IDENTITY
TRAINING SOURCEThe project starts with identity data used to create the generated media layer.
07 / POCKET PORTALS SERIES
POCKET PORTALS / 01▶ENTER
Liquid Metal is the first portal, not the whole system.
I am treating Pocket Portals as a numbered experimental series. This first entry uses my face, a generated video and an Instagram redirect because it lets the entire interaction fit into one object and one clear behavior.
Future entries can change the physical target, the media response and the action that follows. The reusable idea is that a small printed object can become an address for digital behavior, with the browser acting as the layer that connects the two.