visions laboratory

Visions Laboratory is a human-led, AI-assisted creative technology laboratory exploring writing, worlds, spatial experiences, software, image-making, and experimental instruments. After the initial launch teaser, the project evolved into a full editorial landing page introducing the laboratory’s identity, manifesto, selected work, mission, vision, values, and contact pathway.

The branding was refined into a cleaner and more sophisticated visual system built around a technical drawing language: black-on-cream typography, cobalt blue accents, graph-paper grids, blueprint-style annotations, thin rules, numbered rows, technical captions, and a logo designed to feel like a precision drawing rather than a conventional studio mark.

The landing page is structured as a scroll-snapping editorial experience. It opens with an animated technical plate of Michelangelo’s David, followed by the laboratory manifesto, a selected work index, mission and vision statements, values, and a footer colophon with the animated eye logo. I created the mission, vision, values, and manifesto, shaping the voice around authorship, craft, curation, discovery, purpose, and trust.

A central part of the new visual system is the animated David bust. I used GPT Image to generate a technical drawing interpretation of Michelangelo’s David, then converted and refined it into a vector SVG. From there, I used Claude and GSAP to animate the drawing so the silhouette, structural strokes, detail lines, and fills resolve progressively on screen.

The logo was also rebuilt as an animated technical object. Its SVG elements are animated with GSAP through dashed tracers, solid strokes, iris movement, hatch lines, shadow bands, and a final resolved mark, creating a motion language that feels closer to an engineered diagram than a decorative reveal.

The site is fully responsive across desktop, tablet, and mobile. The desktop experience uses full-screen scroll snapping and hover-led editorial interactions, while mobile translates those behaviours into touch-friendly interactions: proximity snapping, collapsed grids, tap-open definition cards, simplified navigation cues, and scaled SVG compositions to keep the experience readable and usable across devices.

The selected work section is still under construction, but already establishes the laboratory’s range through an index-style taxonomy: text, worlds, spatial work, instruments, programs, and image. Each category is treated like a technical or dictionary entry, reinforcing the laboratory language while keeping the page flexible for future projects.

V1

Launch teaser

Visions Laboratory is a creative technology laboratory exploring immersive storytelling and interactive experiences for brands, culture, and future-facing media. This is the brand identity and launch teaser site, built from scratch: naming, logo design, colour direction, typography, motion language, and the first public-facing landing page.

The logo came out of a hybrid process: sketching on iPad, using AI tools to generate visual references and speed up early concept exploration, then refining directions in Figma and Canva. I wanted the identity to feel cinematic, experimental and slightly strange while still working as a polished studio brand.

SWIPE FOR MORE →

On the technical side, the centrepiece is a cinematic SVG path morph animation built with GSAP, where separate logo elements animate and merge into the final mark. The wordmark uses a responsive gooey effect. The full site was built in React and Vite, deployed to Vercel.

TECHNICAL DETAILS

Current landing page: Brand identity refinement, creative direction, technical drawing visual system, manifesto writing, mission and values development, selected work taxonomy, GPT Image, SVG/vector refinement, Claude-assisted development, React, Vite, GSAP, inline SVG animation, SVG draw-on animation, IntersectionObserver, responsive scroll-snap layout, mobile-first interaction adaptations, touch-friendly accordion states, responsive editorial grids, custom typography, Vercel deployment.

V1 launch teaser: Brand identity, creative direction, logo design, colour palette, typography, iPad sketching, AI-assisted design exploration, Figma, Canva, React, Vite, GSAP, SVG path morph animation, gooey effect, domain setup, Vercel deployment.