Citations

How this portfolio was built, what AI touched, and what stayed fully mine

Every decision on this site has a origin. This page documents where AI was present in the work, where it wasn't, and what that distinction means for how I think about craft, authorship, and transparency in design practice. I'm not interested in hiding the assist or overstating the hand. I'm interested in modeling what honest attribution looks like when the tools are this embedded in the process.

Carousel Element

How this carousel was built

How this carousel was built

Sketched by hand, refined through code, until it finally clicked
Sketched by hand, refined through code, until it finally clicked

It started with a rough sketch, just enough to hold the idea before it dissolved. From there it moved into Framer as a custom TSX component, loaded directly into the canvas as a code element and iterated through 48 back-and-forth exchanges until the physics felt right and the interaction stopped calling attention to itself.

The customization runs deep. Every spring value, drag threshold, and transition curve is exposed through the Framer properties panel so the component behaves like a native element rather than something bolted on from outside the system.

What took the longest was getting the fluidity right. The carousel needed to feel inevitable, like the next card was always already on its way. That quality doesn't come from a single decision. It accumulates through small corrections made across a lot of iterations until the thing finally lands and you stop noticing the mechanism entirely.

It started with a rough sketch, just enough to hold the idea before it dissolved. From there it moved into Framer as a custom TSX component, loaded directly into the canvas as a code element and iterated through 48 back-and-forth exchanges until the physics felt right and the interaction stopped calling attention to itself.

The customization runs deep. Every spring value, drag threshold, and transition curve is exposed through the Framer properties panel so the component behaves like a native element rather than something bolted on from outside the system.

What took the longest was getting the fluidity right. The carousel needed to feel inevitable, like the next card was always already on its way. That quality doesn't come from a single decision. It accumulates through small corrections made across a lot of iterations until the thing finally lands and you stop noticing the mechanism entirely.

Live example — FluidCarousel3D
FluidCarousel3D component
Framer TSX · Custom code element · tylerhartrich.com
Co-created
Model: claude-sonnet-4Iterations: 48Human edits: Spring values, drag thresholds, color card modePrompt constraints: Fluid physics, Framer properties panel
*Started as a hand sketch. Iterated through 48 exchanges until the transition physics felt inevitable.
Ask Me Anything

Ask me a real question.

I've answered the easy ones below. The interesting ones are yours to ask.

Questions my Design colleagues have asked me.

More than I should probably admit. There's something I genuinely like about the ritual of a week starting together, but only if the meeting has a spine. Rambling check-ins are a different story.

Systems thinking in situations where most people just see chaos. I can hold a lot of complexity and still find the thing that actually matters.

People, always, but people who care deeply about pixels. The craft is how I earn the trust to influence the bigger stuff.

I tell them I make things easier and clearer for people who are confused. They nod politely. I've stopped trying to do better than that.

Sideways, like most people obsessed with it. Came in through interaction design, stayed for the systems. Sixteen years later, I make practices instead of just screens.

Ask Me Anything

Ask me a real question.

I've answered the easy ones below. The interesting ones are yours to ask.

Questions my Design colleagues have asked me.

More than I should probably admit. There's something I genuinely like about the ritual of a week starting together, but only if the meeting has a spine. Rambling check-ins are a different story.

Systems thinking in situations where most people just see chaos. I can hold a lot of complexity and still find the thing that actually matters.

People, always, but people who care deeply about pixels. The craft is how I earn the trust to influence the bigger stuff.

I tell them I make things easier and clearer for people who are confused. They nod politely. I've stopped trying to do better than that.

Sideways, like most people obsessed with it. Came in through interaction design, stayed for the systems. Sixteen years later, I make practices instead of just screens.

Ask Me Anything

Ask me a real question.

I've answered the easy ones below. The interesting ones are yours to ask.

Questions my Design colleagues have asked me.

More than I should probably admit. There's something I genuinely like about the ritual of a week starting together, but only if the meeting has a spine. Rambling check-ins are a different story.

Systems thinking in situations where most people just see chaos. I can hold a lot of complexity and still find the thing that actually matters.

People, always, but people who care deeply about pixels. The craft is how I earn the trust to influence the bigger stuff.

I tell them I make things easier and clearer for people who are confused. They nod politely. I've stopped trying to do better than that.

Sideways, like most people obsessed with it. Came in through interaction design, stayed for the systems. Sixteen years later, I make practices instead of just screens.

Carousel Element

How Ask Me Anything was built

How Ask Me Anything was built

Seeded by hand, shaped through conversation, designed to answer like a person
Seeded by hand, shaped through conversation, designed to answer like a person

The idea was simple enough: give people visiting the portfolio a way to ask real questions and get answers that actually sounded like me. The hard part was making it feel that way. It started not with code but with content, feeding the answer engine the kinds of responses I would give in person, calibrating the range of what it could handle versus what should stay in a real conversation and route to email instead.

The build happened in Claude Code. The component went through extensive back-and-forth iteration before it landed, covering dark mode, preloaded question chips, prompt tuning, and the logic for knowing when a question deserved a direct answer and when it deserved a follow-up. Like the carousel it lives as a custom TSX file loaded directly into Framer as a code element.

What took the most time wasn't the code. It was the answer architecture: deciding which questions to anticipate, how to phrase the seeds so responses felt considered rather than generated, and where to draw the line between what the component could hold and what needed a human on the other end of it. That boundary is still the most intentional part of the whole thing.

The idea was simple enough: give people visiting the portfolio a way to ask real questions and get answers that actually sounded like me. The hard part was making it feel that way. It started not with code but with content, feeding the answer engine the kinds of responses I would give in person, calibrating the range of what it could handle versus what should stay in a real conversation and route to email instead.

The build happened in Claude Code. The component went through extensive back-and-forth iteration before it landed, covering dark mode, preloaded question chips, prompt tuning, and the logic for knowing when a question deserved a direct answer and when it deserved a follow-up. Like the carousel it lives as a custom TSX file loaded directly into Framer as a code element.

What took the most time wasn't the code. It was the answer architecture: deciding which questions to anticipate, how to phrase the seeds so responses felt considered rather than generated, and where to draw the line between what the component could hold and what needed a human on the other end of it. That boundary is still the most intentional part of the whole thing.

Live example — AskTyler
AskTyler interactive component
Framer TSX · Custom code element · Local phrase-matcher · tylerhartrich.com
Co-created
Model: claude-sonnet-4Answer Keys: 167Human edits: answer architecture, dark mode, question chips, email routing logicPrompt constraints: respond like a person, route ambiguous questions to follow-up
*Built in Claude Code. The human contribution was the answer architecture: deciding which questions to anticipate, how to seed responses so they felt considered rather than generated, and where to draw the line between what the component holds and what needs a person on the other end.

I'm always open to meaningful conversations

I’m here for it. Whether you have a question, an idea, or just want to connect, reach out and let’s build a conversation.

Connect on LinkedIn

Smiling young women and man in a conversation.
A woman and a man working side-by-side at an open workspace together.
A women at a whiteboard ideating with another person from a team.
Close-up of a dark green leaf showing its textured surface and central vein against a muted background.
Close-up of a dark green leaf showing its textured surface and central vein against a muted background.
Three designers working on a whiteboard wall.
A women making a clear statement in a learning environment.
Two learners and an instructor engaging in a conversation.
Two women smiling working side-by-side.

I'm always open to meaningful conversations

I’m here for it. Whether you have a question, an idea, or just want to connect, reach out and let’s build a conversation.

Connect on LinkedIn

Smiling young women and man in a conversation.
A woman and a man working side-by-side at an open workspace together.
A women at a whiteboard ideating with another person from a team.
Close-up of a dark green leaf showing its textured surface and central vein against a muted background.
Close-up of a dark green leaf showing its textured surface and central vein against a muted background.
Three designers working on a whiteboard wall.
A women making a clear statement in a learning environment.
Two learners and an instructor engaging in a conversation.
Two women smiling working side-by-side.

I'm always open to meaningful conversations

I’m here for it. Whether you have a question, an idea, or just want to connect, reach out and let’s build a conversation.

Connect on LinkedIn

Smiling young women and man in a conversation.
A woman and a man working side-by-side at an open workspace together.
A women at a whiteboard ideating with another person from a team.
Close-up of a dark green leaf showing its textured surface and central vein against a muted background.
Close-up of a dark green leaf showing its textured surface and central vein against a muted background.
Three designers working on a whiteboard wall.
A women making a clear statement in a learning environment.
Two learners and an instructor engaging in a conversation.
Two women smiling working side-by-side.