~/showcase

Component Lab

A living catalog of every building block — headers, heroes, project grids, process, social proof, features, creative bits, CTAs and footers. Grab any specimen and drop it on any page.

specimens

Header

1 — Terminalspecimen

renan@portfolio:~$

Header

2 — IDEspecimen

renan-portfolio — Visual Studio Code

Live Share: available

Header

3 — Minimalspecimen

Renan Rios

Header

4 — Magazinespecimen

issue 04interfaces / systems / aicommission

The Portfolio Review

RENAN RIOS

semantic nav · visible focus · reduced motion · monospace chrome ·

Header

5 — Dashboardspecimen

Portfolio Ops

all systems tasteful

build 99.9%latency 42msa11y AA

deploys

0/7

Header

6 — Floatingspecimen

Float layer

contact

Header

7 — Breadcrumbspecimen

Header

8 — Git Branchspecimen

main

renan-rios/portfolio

Header

9 — Compact Centerspecimen

Header

10 — Pill Navspecimen

RR

studio shell

Header

11 — Split Linespecimen

Renan

product designer · vibe coder

split signal

Header

12 — Command Linespecimen

renan-rios

portfolio

run

Hero

1 — Terminalspecimen

renan@portfolio:~/component-lab

$ whoami --verbose

Product Designer · Vibe Coder · AI Orchestrator

Designing, coding, and orchestrating AI — from concept to ship.

./open-work>

Hero

2 — IDE (Syntax Bio)specimen

hero.tsx

1const profile = {
2  name: "Renan Rios",
3  roles: ["Product Designer", "Vibe Coder", "AI Orchestrator"],
4  tagline: 
5};

Product DesignerVibe CoderAI Orchestrator

Hero

3 — Minimal Centeredspecimen

Renan Rios

Product Designer · Vibe Coder · AI Orchestrator

Designing, coding, and orchestrating AI — from concept to ship.

See how I work

Hero

4 — Magazine Splitspecimen

Portfolio 2026No. 004

Cover story

Product Designer,
Vibe Coder,
AI Orchestrator

Renan Rios — Designing, coding, and orchestrating AI — from concept to ship.

design systemsagent workflowsproduct craftship energy

Product Designer · Vibe Coder · AI Orchestrator

Hero

5 — Dashboard Widgetsspecimen

Command centeronline

Renan Rios

Product Designer · Vibe Coder · AI Orchestrator

Designing, coding, and orchestrating AI — from concept to ship.

Disciplines

Ship mode

Agent loops

Active pipeline

research → prototype → agent orchestration → ship

Hero

6 — Scroll Story (Dot Grid)specimen

scroll.story

Renan Rios

Product Designer · Vibe Coder · AI Orchestrator

Designing, coding, and orchestrating AI — from concept to ship.

Concept

find the signal

Prototype

shape the interface

Ship

orchestrate the release

Hero

7 — Matrix (ACCESS GRANTED)specimen

> system.identify()

ACCESS GRANTED

Product Designer · Vibe Coder · AI Orchestrator

Designing, coding, and orchestrating AI — from concept to ship.

Hero

8 — Git Logspecimen

$ git log --oneline --decorate

e7f3a2bfeat: launch Renan Rios portfolio

c4d1e8ffeat: orchestrate AI from concept to ship

a1b2c3dfeat: compose vibe-coded interfaces

0f0f0f0init: product design practice

HEAD → main

Renan Rios

Product Designer · Vibe Coder · AI Orchestrator

Designing, coding, and orchestrating AI — from concept to ship.

git show proof

Hero

9 — API Response (JSON)specimen

200 OKGET /api/profile/renan-riosapplication/json

01{02  "name": "Renan Rios",03  "roles": ["Product Designer", "Vibe Coder", "AI Orchestrator"],04  "tagline": "",05  "status":  20006}

Hero

10 — Bento Gridspecimen

Renan Rios

Product Designer · Vibe Coder · AI Orchestrator

systems

Design

prototypes

Code

orchestration

Designing, coding, and orchestrating AI — from concept to ship.

Hero

11 — Retro CRTspecimen

loading profile...

RENAN RIOS

Product Designer · Vibe Coder · AI Orchestrator

Designing, coding, and orchestrating AI — from concept to ship.

press any key to continue_

Hero

12 — Typewriterspecimen

// type: intro

Product Designer · Vibe Coder · AI Orchestrator

Designing, coding, and orchestrating AI — from concept to ship.

start threadread case studies

draft.txt

Projects

1 — Terminal Outputspecimen

terminal output

~/projects

drwxr-xr-x 01 renan design

./ai/design/system

Built a component library for AI-powered interfaces with adaptive theming and accessibility-first primitives.

Design

drwxr-xr-x 02 renan code

./vibe/code/editor

A browser-based code editor with AI pair programming, built with React and WebAssembly for near-native performance.

Code

drwxr-xr-x 03 renan ai

./orchestrator/platform

Designed and shipped an AI agent orchestration dashboard that manages multi-model workflows in real time.

Projects

2 — File Explorerspecimen

◇ai-design-system.tsx

Design

AI Design System

Built a component library for AI-powered interfaces with adaptive theming and accessibility-first primitives.

◇vibe-code-editor.tsx

Code

Vibe Code Editor

A browser-based code editor with AI pair programming, built with React and WebAssembly for near-native performance.

◇orchestrator-platform.tsx

Orchestrator Platform

Designed and shipped an AI agent orchestration dashboard that manages multi-model workflows in real time.

Projects

3 — Masonry Grid + Thumbnailsspecimen

AI Design System

Design

Built a component library for AI-powered interfaces with adaptive theming and accessibility-first primitives.

Vibe Code Editor

Code

A browser-based code editor with AI pair programming, built with React and WebAssembly for near-native performance.

Orchestrator Platform

Designed and shipped an AI agent orchestration dashboard that manages multi-model workflows in real time.

Projects

4 — Alternating Blocksspecimen

01Design

AI Design System

Built a component library for AI-powered interfaces with adaptive theming and accessibility-first primitives.

02Code

Vibe Code Editor

A browser-based code editor with AI pair programming, built with React and WebAssembly for near-native performance.

03AI

Orchestrator Platform

Designed and shipped an AI agent orchestration dashboard that manages multi-model workflows in real time.

Projects

5 — Dashboard Cardsspecimen

uptime

impact

velocity

●Design

AI Design System

Built a component library for AI-powered interfaces with adaptive theming and accessibility-first primitives.

●Code

Vibe Code Editor

A browser-based code editor with AI pair programming, built with React and WebAssembly for near-native performance.

●AI

Orchestrator Platform

Designed and shipped an AI agent orchestration dashboard that manages multi-model workflows in real time.

Projects

6 — Feature Panelsspecimen

Design

AI Design System

Built a component library for AI-powered interfaces with adaptive theming and accessibility-first primitives.

capability

Design system ready

Code

Vibe Code Editor

A browser-based code editor with AI pair programming, built with React and WebAssembly for near-native performance.

capability

Code system ready

Orchestrator Platform

Designed and shipped an AI agent orchestration dashboard that manages multi-model workflows in real time.

capability

AI system ready

Projects

7 — Kanban Boardspecimen

Design

AI Design System

Built a component library for AI-powered interfaces with adaptive theming and accessibility-first primitives.

Code

Vibe Code Editor

A browser-based code editor with AI pair programming, built with React and WebAssembly for near-native performance.

AI

Orchestrator Platform

Designed and shipped an AI agent orchestration dashboard that manages multi-model workflows in real time.

Projects

8 — Git Diffspecimen

diff --git a/projects/ai-design-system.tsx b/projects/ai-design-system.tsxDesign

@@ -0,0 +1,4 @@

+ export const title = "AI Design System";

+ description: "Built a component library for AI-powered interfaces with adaptive theming and accessibility-first primitives."

- status: "flat prototype"

+ status: "premium specimen"

diff --git a/projects/vibe-code-editor.tsx b/projects/vibe-code-editor.tsxCode

@@ -0,0 +1,4 @@

+ export const title = "Vibe Code Editor";

+ description: "A browser-based code editor with AI pair programming, built with React and WebAssembly for near-native performance."

- status: "flat prototype"

+ status: "premium specimen"

diff --git a/projects/orchestrator-platform.tsx b/projects/orchestrator-platform.tsxAI

@@ -0,0 +1,4 @@

+ export const title = "Orchestrator Platform";

+ description: "Designed and shipped an AI agent orchestration dashboard that manages multi-model workflows in real time."

- status: "flat prototype"

+ status: "premium specimen"

Projects

9 — Package Dependenciesspecimen

package dependencies

pnpm.lock

{
  "componentLab": {
    "ai-design-system": { "version": "1.0.0", "discipline": "Design", "accent": "var(--color-syntax-green)" },
    "vibe-code-editor": { "version": "2.0.1", "discipline": "Code", "accent": "var(--color-syntax-purple)" },
    "orchestrator-platform": { "version": "3.0.2", "discipline": "AI", "accent": "var(--color-syntax-orange)" }
  },
  "quality": ["tilt", "spotlight", "glow-card", "accessible-labels"]
}

Projects

10 — Bento Gridspecimen

01Design

AI Design System

Built a component library for AI-powered interfaces with adaptive theming and accessibility-first primitives.

02Code

Vibe Code Editor

A browser-based code editor with AI pair programming, built with React and WebAssembly for near-native performance.

03AI

Orchestrator Platform

Designed and shipped an AI agent orchestration dashboard that manages multi-model workflows in real time.

Ship cadence

A compact control tile for scanning project momentum.

review specimens →

Projects

11 — Timeline Changelogspecimen

Designrelease 2026.06

AI Design System

Built a component library for AI-powered interfaces with adaptive theming and accessibility-first primitives.

Coderelease 2026.07

Vibe Code Editor

A browser-based code editor with AI pair programming, built with React and WebAssembly for near-native performance.

AIrelease 2026.08

Orchestrator Platform

Designed and shipped an AI agent orchestration dashboard that manages multi-model workflows in real time.

Projects

12 — Filmstrip Carouselspecimen

filmstrip carousel

horizontal scroll · snap

Design

AI Design System

Built a component library for AI-powered interfaces with adaptive theming and accessibility-first primitives.

Code

Vibe Code Editor

A browser-based code editor with AI pair programming, built with React and WebAssembly for near-native performance.

Orchestrator Platform

Designed and shipped an AI agent orchestration dashboard that manages multi-model workflows in real time.

AI Design SystemVibe Code EditorOrchestrator Platform

Process

1 — Terminal Windowsspecimen

product-design.sh

Product Design

vibe-coder.sh

Vibe Coder

ai-orchestrator.sh

AI Orchestrator

Process

2 — Split Panesspecimen

dual-pane operating model

Strategy on the left, execution on the right. Every discipline keeps context visible while the build keeps moving.

discover · inspect · refine ·compose · inspect · refine ·ship · inspect · refine ·

01 · Product Design

Research-driven design grounded in user empathy. I prototype fast, validate with real users, and ship interfaces that feel invisible — because the best design stays out of the way.

02 · Vibe Coder

I write code the way musicians play — by feel, flow, and rhythm. TypeScript, React, and modern tooling become instruments for building experiences that just work.

03 · AI Orchestrator

I coordinate AI agents, models, and pipelines to solve problems no single tool can handle alone. Prompt engineering meets systems design meets product thinking.

Process

3 — Centered Cardsspecimen

Product Design

Research-driven design grounded in user empathy. I prototype fast, validate with real users, and ship interfaces that feel invisible — because the best design stays out of the way.

Vibe Coder

I write code the way musicians play — by feel, flow, and rhythm. TypeScript, React, and modern tooling become instruments for building experiences that just work.

AI Orchestrator

I coordinate AI agents, models, and pipelines to solve problems no single tool can handle alone. Prompt engineering meets systems design meets product thinking.

Process

4 — Vertical Timelinespecimen

Product Design

Research-driven design grounded in user empathy. I prototype fast, validate with real users, and ship interfaces that feel invisible — because the best design stays out of the way.

Vibe Coder

I write code the way musicians play — by feel, flow, and rhythm. TypeScript, React, and modern tooling become instruments for building experiences that just work.

AI Orchestrator

I coordinate AI agents, models, and pipelines to solve problems no single tool can handle alone. Prompt engineering meets systems design meets product thinking.

Process

5 — Metric Cardsspecimen

clarity

calibrated through product design

velocity

calibrated through vibe coder

signal

calibrated through ai orchestrator

Process

6 — Full-Width Panelsspecimen

Product Design

Research-driven design grounded in user empathy. I prototype fast, validate with real users, and ship interfaces that feel invisible — because the best design stays out of the way.

Vibe Coder

I write code the way musicians play — by feel, flow, and rhythm. TypeScript, React, and modern tooling become instruments for building experiences that just work.

AI Orchestrator

I coordinate AI agents, models, and pipelines to solve problems no single tool can handle alone. Prompt engineering meets systems design meets product thinking.

Process

7 — Flowchart Arrowsspecimen

Product Design

discover → Research-driven design grounded in user empathy. I prototype fast, validate with real users, and ship interfaces that feel invisible — because the best design stays out of the way.

Vibe Coder

compose → I write code the way musicians play — by feel, flow, and rhythm. TypeScript, React, and modern tooling become instruments for building experiences that just work.

AI Orchestrator

ship → I coordinate AI agents, models, and pipelines to solve problems no single tool can handle alone. Prompt engineering meets systems design meets product thinking.

Process

8 — npm install Stepsspecimen

terminalnpm i process-system

Process

9 — Git Branch Diagramspecimen

branching from insight to release

feature/product-design

Research-driven design grounded in user empathy. I prototype fast, validate with real users, and ship interfaces that feel invisible — because the best design stays out of the way.

feature/vibe-coder

I write code the way musicians play — by feel, flow, and rhythm. TypeScript, React, and modern tooling become instruments for building experiences that just work.

feature/ai-orchestrator

I coordinate AI agents, models, and pipelines to solve problems no single tool can handle alone. Prompt engineering meets systems design meets product thinking.

Process

10 — Accordion Panelsspecimen

Research-driven design grounded in user empathy. I prototype fast, validate with real users, and ship interfaces that feel invisible — because the best design stays out of the way.

I write code the way musicians play — by feel, flow, and rhythm. TypeScript, React, and modern tooling become instruments for building experiences that just work.

I coordinate AI agents, models, and pipelines to solve problems no single tool can handle alone. Prompt engineering meets systems design meets product thinking.

Process

11 — Tab Panelsspecimen

Product Design

Research-driven design grounded in user empathy. I prototype fast, validate with real users, and ship interfaces that feel invisible — because the best design stays out of the way.

active module

Process

12 — Progress Stepperspecimen

current step

Product Design

Research-driven design grounded in user empathy. I prototype fast, validate with real users, and ship interfaces that feel invisible — because the best design stays out of the way.

Social Proof

1 — Code Commentsspecimen

reviews/tokiko-myazato.ts

comment

// We have received wonderful and very positive feedback on Renan's work in the SCA squads. Especially impressed by Renan's innovative designs, initiatives he has taken and work with the customer validation team. I'd like to take this opportunity to say 'Well done' to Renan.

// verified by Tokiko Myazato · UX Manager

reviews/emer-kenna.ts

comment

// Renan quietly goes about his business, but underneath the quiet unassuming Brazilian exterior he delivers high quality designs, even though his hands are tied and his options are limited. He always pushes the boundaries he is given to get a better design with more attitude, never says no and he has the patience of a saint to be able to work with us.

// verified by Emer Kenna · Implementation Manager

Social Proof

2 — Blockquotesspecimen

Featured review
“We have received wonderful and very positive feedback on Renan's work in the SCA squads. Especially impressed by Renan's innovative designs, initiatives he has taken and work with the customer validation team. I'd like to take this opportunity to say 'Well done' to Renan.”
TMTokiko MyazatoUX Manager

Featured review
“Renan quietly goes about his business, but underneath the quiet unassuming Brazilian exterior he delivers high quality designs, even though his hands are tied and his options are limited. He always pushes the boundaries he is given to get a better design with more attitude, never says no and he has the patience of a saint to be able to work with us.”
EKEmer KennaImplementation Manager

Social Proof

3 — Centered Dividerspecimen

social proof bus

“We have received wonderful and very positive feedback on Renan's work in the SCA squads. Especially impressed by Renan's innovative designs, initiatives he has taken and work with the customer validation team. I'd like to take this opportunity to say 'Well done' to Renan.”
Tokiko Myazato · UX Manager

TechCorpAI LabsDesignStudio

Social Proof

4 — Pull Quotesspecimen

We have received wonderful and very positive feedback on Renan's work in the SCA squads. Especially impressed by Renan's innovative designs, init…
TMTokiko MyazatoUX Manager

Renan quietly goes about his business, but underneath the quiet unassuming Brazilian exterior he delivers high quality designs, even though his h…
EKEmer KennaImplementation Manager

Social Proof

5 — Sidebar Layoutspecimen

TM
“We have received wonderful and very positive feedback on Renan's work in the SCA squads. Especially impressed by Renan's innovative designs, initiatives he has taken and work with the customer validation team. I'd like to take this opportunity to say 'Well done' to Renan.”
Tokiko Myazato · UX Manager

EK
“Renan quietly goes about his business, but underneath the quiet unassuming Brazilian exterior he delivers high quality designs, even though his hands are tied and his options are limited. He always pushes the boundaries he is given to get a better design with more attitude, never says no and he has the patience of a saint to be able to work with us.”
Emer Kenna · Implementation Manager

Social Proof

6 — Immersive Overlayspecimen

overlay.proof
“Renan quietly goes about his business, but underneath the quiet unassuming Brazilian exterior he delivers high quality designs, even though his hands are tied and his options are limited. He always pushes the boundaries he is given to get a better design with more attitude, never says no and he has the patience of a saint to be able to work with us.”
EKEmer KennaImplementation Manager

Social Proof

7 — Chat Bubblesspecimen

#voice-of-customer

online

We have received wonderful and very positive feedback on Renan's work in the SCA squads. Especially impressed by Renan's innovative designs, initiatives he has taken and work with the customer validation team. I'd like to take this opportunity to say 'Well done' to Renan.

Tokiko Myazato · UX Manager

Renan quietly goes about his business, but underneath the quiet unassuming Brazilian exterior he delivers high quality designs, even though his hands are tied and his options are limited. He always pushes the boundaries he is given to get a better design with more attitude, never says no and he has the patience of a saint to be able to work with us.

Emer Kenna · Implementation Manager

Social Proof

8 — Star Ratingsspecimen

★★★★★

5.0 signal

“We have received wonderful and very positive feedback on Renan's work in the SCA squads. Especially impressed by Renan's innovative designs, initiatives he has taken and work with the customer validation team. I'd like to take this opportunity to say 'Well done' to Renan.”
TMTokiko MyazatoUX Manager

★★★★★

5.0 signal

“Renan quietly goes about his business, but underneath the quiet unassuming Brazilian exterior he delivers high quality designs, even though his hands are tied and his options are limited. He always pushes the boundaries he is given to get a better design with more attitude, never says no and he has the patience of a saint to be able to work with us.”
EKEmer KennaImplementation Manager

Social Proof

9 — Tweet Cardsspecimen

Tokiko Myazato

@tokikomyazato

✓

Emer Kenna

@emerkenna

✓

Social Proof

10 — Terminal stdoutspecimen

[ok] We have received wonderful and very positive feedback on Renan's work in the SCA squads. Especially impressed by Renan's innovative…
     — Tokiko Myazato <UX Manager>
[ok] Renan quietly goes about his business, but underneath the quiet unassuming Brazilian exterior he delivers high quality designs, even…
     — Emer Kenna <Implementation Manager>

replay proof

Social Proof

11 — PR Review Commentsspecimen

Tokiko Myazato

approved changes in social-proof.tsx

approved

+ customer_signal: strong

+ craft_level: premium

+ trust_score: 100

We have received wonderful and very positive feedback on Renan's work in the SCA squads. Especially impressed by Renan's innovative designs, initiatives he has taken and work with the customer validation team. I'd like to take this opportunity to say 'Well done' to Renan.
UX Manager

Emer Kenna

approved changes in social-proof.tsx

approved

+ customer_signal: strong

+ craft_level: premium

+ trust_score: 100

Renan quietly goes about his business, but underneath the quiet unassuming Brazilian exterior he delivers high quality designs, even though his hands are tied and his options are limited. He always pushes the boundaries he is given to get a better design with more attitude, never says no and he has the patience of a saint to be able to work with us.
Implementation Manager

Social Proof

12 — Notification Toastsspecimen

toast.stack.received

Live customer signal queue

Tokiko Myazato

now

We have received wonderful and very positive feedback on Renan's work in the SCA squads. Especially impressed by Ren…

Emer Kenna

now

Renan quietly goes about his business, but underneath the quiet unassuming Brazilian exterior he delivers high quali…

Features

1 — Icon Gridspecimen

feat.01

Product Design

Research-driven, prototype-fast, ship invisible interfaces.

feat.02

Vibe Coding

TypeScript & React by feel, flow and rhythm.

feat.03

AI Orchestration

Coordinating agents, models and pipelines end to end.

feat.04

Design Systems

Accessible, token-driven component libraries at scale.

feat.05

Prototyping

High-fidelity, interactive proofs that validate fast.

feat.06

Accessibility

WCAG-grade experiences for everyone.

Features

2 — Terminal Listspecimen

features.sh

Research-driven, prototype-fast, ship invisible interfaces.

TypeScript & React by feel, flow and rhythm.

Coordinating agents, models and pipelines end to end.

Accessible, token-driven component libraries at scale.

High-fidelity, interactive proofs that validate fast.

WCAG-grade experiences for everyone.

Features

3 — Split Cardsspecimen

primary module

Product Design

Research-driven, prototype-fast, ship invisible interfaces.

researchprototypeship

Vibe Coding

TypeScript & React by feel, flow and rhythm.

AI Orchestration

Coordinating agents, models and pipelines end to end.

Design Systems

Accessible, token-driven component libraries at scale.

Features

4 — JSON Objectspecimen

features.config.json

{
  "componentLab": {
    "category": "Features",
    "specimens": [
      { "name": "Product Design", "accent": "accent-blue" },
      { "name": "Vibe Coding", "accent": "syntax-green" },
      { "name": "AI Orchestration", "accent": "syntax-purple" },
      { "name": "Design Systems", "accent": "syntax-cyan" },
      { "name": "Prototyping", "accent": "syntax-orange" },
      { "name": "Accessibility", "accent": "syntax-yellow" }
    ]
  }
}

Features

5 — Bordered Panelsspecimen

Product Design

Research-driven, prototype-fast, ship invisible interfaces.

Vibe Coding

TypeScript & React by feel, flow and rhythm.

AI Orchestration

Coordinating agents, models and pipelines end to end.

Design Systems

Accessible, token-driven component libraries at scale.

Prototyping

High-fidelity, interactive proofs that validate fast.

Accessibility

WCAG-grade experiences for everyone.

Features

6 — Alternating Rowsspecimen

Product Design

Research-driven, prototype-fast, ship invisible interfaces.

row 1

Vibe Coding

TypeScript & React by feel, flow and rhythm.

row 2

AI Orchestration

Coordinating agents, models and pipelines end to end.

row 3

Design Systems

Accessible, token-driven component libraries at scale.

row 4

Prototyping

High-fidelity, interactive proofs that validate fast.

row 5

Accessibility

WCAG-grade experiences for everyone.

row 6

Features

7 — npm installspecimen

package manager

installing premium feature specimens

✓added product design88ms

✓added vibe coding176ms

✓added ai orchestration264ms

✓added design systems352ms

postinstall

Features

8 — Tab Panelsspecimen

Product Design

Research-driven, prototype-fast, ship invisible interfaces.

Focused tabs expose state, preserve keyboard flow and keep the IDE metaphor crisp.

Features

9 — Dot Grid Cardsspecimen

Product Design

Research-driven, prototype-fast, ship invisible interfaces.

Vibe Coding

TypeScript & React by feel, flow and rhythm.

AI Orchestration

Coordinating agents, models and pipelines end to end.

Design Systems

Accessible, token-driven component libraries at scale.

Prototyping

High-fidelity, interactive proofs that validate fast.

Accessibility

WCAG-grade experiences for everyone.

Features

10 — Metric Cardsspecimen

prototype velocity

agent handoffs

a11y coverage

token systems

Features

11 — Code Commentsspecimen

FeatureNotes.ts

Documented like code.

Readable comments, sharp hierarchy and syntax energy for scanning.

// Research-driven, prototype-fast, ship invisible interfaces.
export const ProductDesign = "ready";
// TypeScript & React by feel, flow and rhythm.
export const VibeCoding = "ready";
// Coordinating agents, models and pipelines end to end.
export const AIOrchestration = "ready";
// Accessible, token-driven component libraries at scale.
export const DesignSystems = "ready";
// High-fidelity, interactive proofs that validate fast.
export const Prototyping = "ready";
// WCAG-grade experiences for everyone.
export const Accessibility = "ready";

Features

12 — Bento Gridspecimen

bento core

A premium IDE surface where systems thinking, craft and agentic workflows snap together.

Vibe Coding

TypeScript & React by feel, flow and rhythm.

AI Orchestration

Coordinating agents, models and pipelines end to end.

Design Systems

Accessible, token-driven component libraries at scale.

Prototyping

High-fidelity, interactive proofs that validate fast.

Accessibility

WCAG-grade experiences for everyone.

Product Design Vibe Coding AI Orchestration Design Systems Prototyping Accessibility

Creativity

1 — Color Swatch Wallspecimen

palette.inspect()

Interactive syntax swatch wall

hover tokens → reveal intent

Creativity

2 — Morse Codespecimen

Signal poems

Short bursts from design, code, and AI translated into a tiny transmission console.

Pixel Dreamscapes

Generative Art

Neon Brutalism

UI Experiment

Liquid Typography

Motion Type

Data Sculptures

Visual Systems

Glitch Portraits

Identity Lab

Sound Palettes

Synesthesia UI

Creativity

3 — Stacked Tape Labelsspecimen

Studio tape archive

LABELS.DAT

2026

Pixel Dreamscapes

Generative Art

2025

Neon Brutalism

UI Experiment

2026

Liquid Typography

Motion Type

2025

Data Sculptures

Visual Systems

2026

Glitch Portraits

Identity Lab

2025

Sound Palettes

Synesthesia UI

Creativity

4 — Redacted Dossierspecimen

classified creative division

Dossier RR-404

clearance: hover

file_01

2026

Subject maintains unusual fluency between visual systems, coded prototypes, and AI-assisted rituals.

Pixel Dreamscapes

Generative Art

dream.render()

file_02

2025

Subject maintains unusual fluency between visual systems, coded prototypes, and AI-assisted rituals.

Neon Brutalism

UI Experiment

layout.breakGrid()

file_03

2026

Subject maintains unusual fluency between visual systems, coded prototypes, and AI-assisted rituals.

Liquid Typography

Motion Type

glyph.morph()

file_04

2025

Subject maintains unusual fluency between visual systems, coded prototypes, and AI-assisted rituals.

Data Sculptures

Visual Systems

signal.shape()

file_05

2026

Subject maintains unusual fluency between visual systems, coded prototypes, and AI-assisted rituals.

Glitch Portraits

Identity Lab

face.corrupt()

file_06

2025

Subject maintains unusual fluency between visual systems, coded prototypes, and AI-assisted rituals.

Sound Palettes

Synesthesia UI

tone.sample()

Creativity

5 — Polaroid Stackspecimen

Polaroids from the lab

AI Design System

Design specimen

Vibe Code Editor

Code specimen

Orchestrator Platform

AI specimen

Creativity

6 — Waveform Barsspecimen

reduced motion safe

Creative equalizer

0 hz

Creativity

7 — Concentric Ringsspecimen

CREATE

Orbit map

Pixel DreamscapesGenerative Art

Neon BrutalismUI Experiment

Liquid TypographyMotion Type

Data SculpturesVisual Systems

Glitch PortraitsIdentity Lab

Sound PalettesSynesthesia UI

Creativity

8 — Terminal Matrix Rainspecimen

creativity.matrix — zsh

λ{デザザ1ンRR

ア3}λ{0デザ1

ザλ31Rザ0アλ

00}ザAIAIデR3

3ン{λ0}1ザAI

}AI0{デ3AI1ン

011λAIアアザ3

3{R}01λデAI

ンλア1}ザ{アデ

31デデ0アンンAI

R{}3λ1デ0ザ

}R0ンデλAI}ン

Creativity

9 — Museum Exhibit Cardsspecimen

Museum of shipped experiments

gallery view

Pixel Dreamscapes

Generative Art

acquired2026

Neon Brutalism

UI Experiment

acquired2025

Liquid Typography

Motion Type

acquired2026

Data Sculptures

Visual Systems

acquired2025

Glitch Portraits

Identity Lab

acquired2026

Sound Palettes

Synesthesia UI

acquired2025

Creativity

10 — Ticker Tapespecimen

Live creative ticker

design systemsagentic UXpixel craftvibe codingAI orchestrationdark IDEsyntax glowprototype ritualshuman signalcreative toolingresearch loopsship fast

dream.render()Generative Artlayout.breakGrid()UI Experimentglyph.morph()Motion Typesignal.shape()Visual Systemsface.corrupt()Identity Labtone.sample()Synesthesia UI

Creativity

11 — Layered Depth Cardsspecimen

depth.layer[1]

Pixel Dreamscapes

Generative Art with a hover-parallax shell and glare mapped to pointer position.

dream.render()

depth.layer[2]

Neon Brutalism

UI Experiment with a hover-parallax shell and glare mapped to pointer position.

layout.breakGrid()

depth.layer[3]

Liquid Typography

Motion Type with a hover-parallax shell and glare mapped to pointer position.

glyph.morph()

Creativity

12 — Blueprint Gridspecimen

spec_blueprint.v12

Technical creativity grid

token map

Annotation pinned to the IDE canvas with measurable spacing, contrast, and interaction intent.

interaction seam

Annotation pinned to the IDE canvas with measurable spacing, contrast, and interaction intent.

semantic layer

Annotation pinned to the IDE canvas with measurable spacing, contrast, and interaction intent.

agent handoff

Annotation pinned to the IDE canvas with measurable spacing, contrast, and interaction intent.

pixel grid

Annotation pinned to the IDE canvas with measurable spacing, contrast, and interaction intent.

contrast rail

Annotation pinned to the IDE canvas with measurable spacing, contrast, and interaction intent.

CTA

1 — Command Promptspecimen

interactive shell

Ready to collaborate?

Run the contact command and open a focused thread for product design, front-end systems, or AI tooling.

--priority collaborative --mode async

renan@portfolio:~/contact

resolving availability...

status: conversation channel ready

CTA

2 — Command Palettespecimen

⌘⇧PCommand Palette

Open project briefing templaterecent

Review portfolio case studiesrecent

Schedule a collaboration syncrecent

CTA

3 — Full-Width Barspecimen

availability monitor: open to sharp conversations

Let's build something useful.

A compact, full-width IDE status bar for collaboration requests, concept spikes, and prototype reviews.

200ms response UI

design systemsAI workflowsfront-end craftproduct strategy

CTA

4 — Centered Minimalspecimen

minimal prompt

Start a conversation.

No form overload. Just a clean signal that you want to explore a collaboration with care and momentum.

CTA

5 — Floating Cardspecimen

Ready to collaborate?

A lifted glow-card CTA with enough presence to feel premium without leaving the IDE atmosphere.

CTA

6 — Immersivespecimen

immersive launch surface

Let's build something luminous.

Product taste, production code, and experimental AI workflows—composed like a premium developer environment.

signals

handoff

latency

CTA

7 — Chat Promptspecimen

Hey — ready to collaborate? Send over the problem, constraints, and what success should feel like.

CTA

8 — Email Composespecimen

New Message

To:hello@renanrios.dev

Subject:Ready to collaborate?

Hi Renan,

I have a project that needs sharp product thinking, polished interaction design, and production-grade front-end execution.

draft saved

CTA

9 — Split Buttonsspecimen

choose route

What can I help with?

Start with a loose idea or send a concise brief. Both routes lead to a thoughtful conversation.

CTA

10 — Gradient Bannerspecimen

premium gradient banner

Ship the kind of interface people remember.

A high-energy contact banner for decisive project moments: crisp ask, elevated surface, unmistakable action.

CTA

11 — Single Linespecimen

Interested in working together?

inline prompt · focused reply · clean next step

CTA

12 — Terminal Windowspecimen

terminal — contact.sh

shell ready

$ echo "Ready to collaborate?"

Ready to collaborate?

$ ./start-conversation --with renan ▋

Footer

1 — Simplespecimen

Footer

2 — IDEspecimen

Footer

3 — Centeredspecimen

Footer

4 — Multi-Columnspecimen

Footer

5 — Terminalspecimen

Footer

6 — Status Barspecimen

// end of catalog — 102 specimens · 9 categories

Back to home.tsx

Header

Header

Header

Header

Header

Header

Header

Header

Header

Header

Header

Header

Hero

Hero

Renan Rios

Hero

Renan Rios

Hero

Product Designer,Vibe Coder,AI Orchestrator

Hero

Renan Rios

Hero

Renan Rios

Hero

Hero

Renan Rios

Hero

Renan Rios

Hero

Renan Rios

Hero

RENAN RIOS

Hero

Projects

terminal output

./ai/design/system

./vibe/code/editor

./orchestrator/platform

Projects

AI Design System

Vibe Code Editor

Orchestrator Platform

Projects

AI Design System

Vibe Code Editor

Orchestrator Platform

Projects

AI Design System

Vibe Code Editor

Orchestrator Platform

Projects

uptime

impact

velocity

AI Design System

Vibe Code Editor

Orchestrator Platform

Projects

AI Design System

capability

Vibe Code Editor

capability

Orchestrator Platform

capability

Projects

Design

AI Design System

Code

Vibe Code Editor

AI

Orchestrator Platform

Projects

Projects

package dependencies

Projects

AI Design System

Vibe Code Editor

Orchestrator Platform

Ship cadence

Projects

Product Designer,
Vibe Coder,
AI Orchestrator