Skip to work
Available for select projects — 2026

GPI6 —

Motion Designer

One person. Four disciplines. Digital experiences where motion, design, code and security are engineered together — never bolted on.

01The story

Most people pick a lane. GPI6 built an interchange — every discipline feeding the others until the seams disappeared.

“A designer who codes.
An engineer who animates.
A builder who thinks like an attacker.”

Every project runs the full pipeline through one pair of hands — storyboard to design system, design system to production code, production code to hardened deployment. Nothing lost in translation, because there is no translation.

7+
Years creating
60+
Projects shipped
4
Disciplines, one head
  1. 201901 / 05

    First frame

    Opened After Effects to animate a friend's logo. Stayed up until 4am moving keyframes one pixel at a time. Never really closed it since.

  2. 202102 / 05

    Design becomes system

    Fell into UI/UX through motion — realised the best animations start in the design file. Shipped first client interfaces and a personal design language.

  3. 202203 / 05

    Code closes the loop

    Tired of handing off ideas, learned to build them. TypeScript, React, Node — suddenly the whole pipeline from concept to production lived in one head.

  4. 202404 / 05

    Breaking things, politely

    Cybersecurity started as curiosity about how things fail. Now it shapes how everything gets built — CTFs on weekends, hardened stacks on weekdays.

  5. NOW05 / 05

    All four, at once

    Motion, interface, engineering and security — not four skills, one practice. Every project ships with all of them in the room.

02Capabilities

Hover a discipline to isolate its stars. Every node is a tool used in production — no padding, no progress bars.

MotionDesignDevelopmentSecurity

Motion

Choreographing pixels — title sequences, logo stings and interface motion with intent behind every curve.

  • After Effects
  • Lottie
  • Rive
  • Premiere

Design

Interfaces that feel inevitable. Systems-first thinking, obsessive typography, zero decoration without purpose.

  • Figma
  • Design Tokens
  • Prototyping
  • A11y

Development

Full-stack engineering with a designer's eye — typed end to end, fast by default, built to be maintained.

  • TypeScript
  • Next.js
  • Node.js
  • PostgreSQL

Security

Thinking like an attacker to build like a defender. Recon, hardening and the occasional CTF podium.

  • Burp Suite
  • Nmap
  • OWASP
  • Wireshark
03Selected work

Design, motion, engineering and security — shipped together. A selection of the work that proves it.

pulse.gpi6.com
development2025

PULSE

Realtime analytics, rendered like a film.

A streaming analytics platform where every metric animates in from live WebSocket data. Designed the interface system, engineered the data layer, and choreographed 60fps chart transitions that make dashboards feel cinematic.

  • Next.js
  • TypeScript
  • WebSockets
  • D3
  • PostgreSQL
Live events / min
1.2M
Frame budget
16ms
Lighthouse
99
Play
motion2025

AETHER

A brand identity that never stops moving.

Full motion identity for an AI startup — logo sting, kinetic type system, product launch film and a component library of micro-interactions the engineering team ships with. After Effects to Lottie to production, one continuous pipeline.

  • After Effects
  • Lottie
  • Kinetic Type
  • Brand System
Deliverables
40+
Launch film
90s
Views week one
2.4M
sentinel — zsh

❯ sentinel scan --target acme.io --deep

▸ resolving 1,204 subdomains…

▸ fingerprinting services (443/tcp, 22/tcp)

✓ graph built — 50,318 assets, 3 critical paths

❯ sentinel watch --alerts slack

security2024

SENTINEL

Security tooling people actually enjoy using.

An attack-surface monitor that maps an organisation's exposed infrastructure as a living network graph. Built the scanning pipeline, designed the graph interface, and proved that security software doesn't have to look hostile.

  • Node.js
  • Graph Viz
  • Recon
  • OSINT
  • Redis
Assets mapped
50K+
Scan latency
<3s
False positives
0.2%
Play
design2024

NOCTURNE

An audio player designed for the dark.

A concept music experience where the interface breathes with the track — waveform-reactive gradients, gesture-driven navigation and typography that dances to the beat. Design, motion and code by one pair of hands.

  • UI/UX
  • Web Audio API
  • Framer Motion
  • PWA
Awwwards
Honors
Interactions
120+
Install rate
38%
04After Effects

A reel of stings, loops and studies. Hover any shot to roll the preview — every pixel below is generated live, no video files.

VELOCITY

Kinetic Typography

IDLE
00:0000:24 · 60fps

BLOOM

Logo Sting

IDLE
00:0000:06 · 60fps

FLUX

Shape Morph Loop

IDLE
00:0000:12 · 30fps

INTERFACE 04

UI Motion Study

IDLE
00:0000:18 · 60fps

TIDE

Generative Waves

IDLE
00:0001:00 · 30fps

SIGNAL

Grid Reveal

IDLE
00:0000:09 · 60fps
05Full stack

Not demos — production systems with types at every boundary, motion in every interaction and performance budgets enforced in CI.

gpi6.config.ts
1const gpi6: Engineer = {
2stack: ['next', 'ts', 'node', 'pg'],
3principles: {
4typed: true, // end to end
5animated: true, // 60fps or nothing
6hardened: true, // security by default
7},
8ship: () => 'fast, then faster',
9};
01

Interface

Next.js App Router · React Server Components · Tailwind · Framer Motion

02

API & Services

Node.js · tRPC / REST · WebSockets · edge functions

03

Data

PostgreSQL · Prisma · Redis · typed end to end

04

Delivery

CI/CD · observability · security headers · 95+ Lighthouse budgets

06Cybersecurity

Security treated like design — deliberate, elegant, mostly unseen. This is the discipline that makes the other three trustworthy.

live topology · 26 nodes
all systems nominal
gpi6 — lab session

Think in attack paths

Every feature gets threat-modeled before it gets styled. The attacker's map is drawn first, then erased line by line.

Secure by default

CSP, strict headers, least privilege, typed inputs at every boundary. Security as architecture, not as an audit afterthought.

Break to understand

CTF weekends and lab targets keep the offensive instincts sharp — you can't defend a system you've never taken apart.

120+
CTF challenges solved
15
Responsible disclosures
0
Breaches on watch
07 — One more thing


A product that needs motion in its bones? An interface that has to feel expensive? A stack that must survive contact with the internet? Same person, one email.