# Tomjohnville

This site · Since Sept 2026

I thought about the best way to show how this site was made... but didn't like the ideas I had. So here's how it was literally made. Not every prompt, image, and piece of work -- but enough to show how this started, what I tried, what I got rid of, and how I landed here.

## A globe

> I'm not loving the website, and it's also missing a lot of the accurate detail. Plus I'd like to bring the articles that are linked from my site into my sive vs them being on medium and other locations. Let's make a plan for some of this

For the website, I’d tackle this in four stages: get the content right; choose a stronger design direction; bring your writing home.

![My personal site remade in v0, with DialKit controls](https://www.tomjohn.design/videos/tomjohn-design/personal-site-v0.mp4 "I'm not loving the website, and it's also missing a lot of the accurate detail. Plus I'd like to bring the articles that are linked from my site into my sive vs them being on medium and other locations. Let's make a pla…")

> okay I want to totally change it to be something personal. What I'm pictuing is a mini globe-ish style presentation, with a styleized earth, made in 3js, and there's a truck and a camper that's on it and it shows my travel journey. You could control the truck by clicking aorund and that mechanism would reveal some of my work, but would very much shift from a "portfolio" site to something that's just about me, and my work is second. It would be a playgound

Updated Paper: black background, centered reference globe, and “Tom Johnson” at the top center.

> A stylized earth, in a dithered black and while style, not literal and really only based on north america as that's where I am

> first let's explore ideas in Paper. In here: (link)

> Let's try this as the starting point. (link)

![A wireframe globe of North America](https://www.tomjohn.design/images/content/tomjohnville/progress/globe-wireframe.webp "Let's try this as the starting point.")

> wow I do not like those.
>
> it should be dark mode only, no text. this is not a landing page. just a globe in the middle of the screen and my name in the top middle. do not try to stylize it

![A Paper board pairing a dotted globe with my writing](https://www.tomjohn.design/images/content/tomjohnville/progress/notes-from-the-road.webp "wow I do not like those. it should be dark mode only, no text. this is not a landing page. just a globe in the middle of the screen and my name in the top middle. do not try to stylize it")

> I also like this style a lot

> add it to paper

Added to Paper, beside the original: a static capture of the Yoa3D globe facing North America, with only your name above it.

![A glowing globe with tuning controls](https://www.tomjohn.design/images/content/tomjohnville/progress/globe-glow.webp "add it to paper")

> For the first one, I'd like to make it so that the north america part is much more skewed and focused. I don't want the literal shape of the earth, but more like a north america map projected onto a sphere. this will not be literal

Updated the first globe in Paper.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/a269ce5e-0.webp "For the first one, I'd like to make it so that the north america part is much more skewed and focused. I don't want the literal shape of the earth, but more like a north america map projected onto a sphere. this will no…")

## Sprites, a truck and a camper

> Look at the Pilgrimage project that I have locally, specifically the asset pipeline.

I’ve inspected Pilgrimage’s local asset pipeline in the oslo workspace and compared relevant changes against local origin/main.

> okay, I want to generate an asset and isometric space for my site. it would not be the same as what's on pilgrimage, but would be a sprite of me, based on my avatar. also there would be spruites of my truck, my camper and other things that are relevant to my work. the site would be an isometric scene, black floor with very subtle tile grid, and there would be a character on the screen (me) , you'd be able to click on a spot on the screen and the charater would walk around. The floor of the scene would have cards that are isometric and show my work. I'd generate 3d assets for each piece that's on my site. I just pushed a PR that has all of the content from my site as markdown files vs external links.
>
> First, let's talk through this idea

I like the idea of making the site a small, explorable world of your work and life.

> let's just make a test environment. I want it to have the same pixelation that I have with pilgrimage, but this would not be a midieval theme at all, this would be a modern site with more of my dither look. I want it to be minimal.

The test environment is ready: Open the isometric scene.

> One difference here is that my characters and those on my site would need to have some more detail than the ones in pilgrimage, so let's cut the pixel scale by half

> That looks nothing like the assets generated in pilgerimage. You need to use the same tooling there. What is this?

You’re right. I used hand-drawn canvas approximations instead of Pilgrimage’s actual rig, baker, and rendering pipeline.

> If we need to fork pilgrimage, then do so. It's been refined to work exactly well for this. It's a 3js scene, it's got all of the pipeline, rigging, and bones for this to work, the issue is that it's style and gameplay are irrelevant and 95% of it is for the game. I just want to use the pieces that matter for this.

> There's a different tab working on the assets, but the truck should be a 2023 f450, white. The camper is a 2026 brinkly G3970.  Look up both and make the models match those as closely as possible while maintaining the correct look and feel for the site. I want the camper to be slides in when it's on the page, but I want you to be able to click on it and the 3 slides come out and yo usee the full layout. Make sure it and the truck are the proper scale relative to the character, as I want to be able to "walk" into both and drive themaround the scene

Softened the wood floor: removed the strong seam lines, reduced plank contrast, and added faint warm oak grain.

> use realistic skin tones for my character, we don't have to go full greyscale. Also make me wearing blue denim jeans and a black t-shirt.

> I want the same character selection highlight as what's in pilgrimage, and for the character to move with a right click vs a left click.

> I want to be able to zoom in and out of the scene with my mousewheel

Added mousewheel zoom to the scene: scroll up to zoom in, down to zoom out.

> I have 2 queen bed platforms in the back of my brinkley vs the 2 couches on the happijack. note that those move up and down

> get rid of the content on the corners of the screen

> add back the isometric grid

> double the pace of the scene so the character walks faster

> when I right click it should highlight the square cell that I'm walking to and blink 2x

> my character looks like he has something on his hair, like another pair of sunglasses or something. get rid of that, just give me a bit of a styled hair, like this  . keep the main sunglasses on though

Removed the extra dark tufts and replaced them with a subtle side-swept hairstyle based on your photo.

> I want the truck to be parked in front of the camper, but not hooked up.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/24ea44cf-1.webp "I want the truck to be parked in front of the camper, but not hooked up.")

> similar to pilgrimage, the camper model should show the backl walls that are opposite from the viewer when it's selected and have an edge highlight. Also, you have some of the layout mirrored incorrectly. The master bed and kitchen should be o nthe other side of the camper. I can include more photos.        I also have a video, can you use that for reference?

> make q and e rotate the camera

Done—he now stops at the center of the selected grid cell and faces the viewer.

> when the character moves, make him face the viewer when the walking is done

> I want an easing on the rotation, same speed as pilgrimage

> I also want him to be centered in the grid cell he's send tto

> also add the windows, update some of the colors, add some of the exterior curves. also the roof looks like this   (this is from the back facing forward) 3 ACs, 4 solar panels, and some misc other things

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/c00d3c03-1.webp "also add the windows, update some of the colors, add some of the exterior curves. also the roof looks like this (this is from the back facing forward) 3 ACs, 4 solar panels, and some misc other things")

> I want to be able to see the character when he's behind objects. use the same rules and masking as what pilgrimage has.

Tom now stays visible behind objects using Pilgrimage’s 50% silhouette mask, even when unselected.

> The environment can be changed to a dark grey, add shadows to the truck and camper and character.

Changed the environment to dark grey and added cast shadows to the truck and camper, plus a soft contact shadow beneath the character.

> also update the materials and colors of the interior to match the photos I added. The rear bunk area floor should have 2 cube shelves and a rug on the floor. I also want to see some of the interior walls when it's relevant to the scene. I'm also not sure the scale is right for the truck and the camper -- it seems slighly too small

> those shadows are too dramatic. soften them, make the light higher above the scene

Raised the light and made the shadows shorter, lighter, and softer.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/aa245219-0.webp "those shadows are too dramatic. soften them, make the light higher above the scene")

> A double right click should make my character run

Double-right-click now runs at 2× walking speed.

> The cards that show the work should be bigger. and further away from the character. also, when I click on them, the card itself should animate up to be centered on the screen. It should look like a 3d transitioon

Done—cards are about 50% larger and farther from the character.

> The truckl should be a dually, it should have more sloped lines.
>
> I want the lights on the sides and edges to be reliasticly colors and turn on when the character stpes in. I want to be able to right click on the truck when the character is selected and he'll walk to the driver door, open it, and climb inside.

Updated the truck with more pronounced dually fenders, separated rear tires, and sloped hood/cab lines.

> Is that a new animation or just a faster walk?

It’s the existing walk animation played faster, with movement at 2× speed.

> I want a running sprite sequence

Added a distinct 24-frame running sequence in all eight directions, with bent arms, longer strides, and airborne phases.

> the camper and truck should both have the edge highlights when selected.

Done: truck and camper selection now highlights only the edges, with no interior tint.

> the wood floor lines have too high of contrast. make that more subtle, try to make them more of a wood grain tone.

> Add a control for me to tun the shader scale

Added a Shader scale slider to the control panel: 0.5×–4×, from finer to chunkier pixels, with Reset.

> I don't want the interior content to have an overlay color when selected, just the edges. Illumin the lights when they're selected as well

> Add one of those 3d scene cubhes to the bottom right corner of the screen so you can rotate and select a face. Allow selection of a top view, but for the sides have it snap to the isometric direction, I don't want an actual side view

Added the bottom-right view cube.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/cebc48ea-0.webp "Add one of those 3d scene cubhes to the bottom right corner of the screen so you can rotate and select a face. Allow selection of a top view, but for the sides have it snap to the isometric direction, I don't want an ac…")

> I want the wheels of the truck to turn when the truck turns. Backing the truck up to the camper should hook it up. The hook distance is too tight. the actual hitch allows for the truck to nearly go 90deg relative to the camper. Increase the max speed of the truck, but add weight to the camper so acceleration is slower.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/1554610a-0.webp "I want the wheels of the truck to turn when the truck turns. Backing the truck up to the camper should hook it up. The hook distance is too tight. the actual hitch allows for the truck to nearly go 90deg relative to the…")

> I want space to make me jump

Space now makes you jump, including while walking or running, with a dedicated jump animation and grounded shadow.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/d03e2ddd-1.webp "I want space to make me jump")

> truck still doesn't look right. The truck and camper overall should have more complex geometry, more curves. The assets in this look like a camper and a truck, but don't look like a brinkley and an f450. There's also planes that are clipping and intersecting, heights look too short relative to the person, the headlights and taillights don't look correct, etc. You can make these match, don't just go for close, I want them to feel accurate

Removed the extra storage hatch beside the entry steps and resized the remaining storage to fit beneath the bedroom floor.

> The top view should move away from the angled look and 90deg rotation. We also need to add a top down sprite for my asset to match this orientation

Top view now aligns squarely with the screen, with horizontal and vertical grid lines.

> truck is still clipping into the camper. Increase the map size dramatically. I want the max speed of the truck to be 80mph when unhitched and 65 when hitched.

Browser checks, all 20 vehicle tests, and TypeScript pass.

> When I right click on the truck with the character selected he should walk to the drivers side and climb in. IU want sprites for that climbing into the truck. When I right click on the camper, and he's selected he should go into the camper and the slides should go out.
>
> He should also be able to walk around the camper.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/ec284468-0.webp "When I right click on the truck with the character selected he should walk to the drivers side and climb in. IU want sprites for that climbing into the truck. When I right click on the camper, and he's selected he shoul…")

> the storage areas are clipping into the living room.  Also it looks like you have 1 extra storage area

> when in top view, q and e should rotate that view 90 degrees

Q and E now rotate the top view by 90° while staying overhead.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/49b8dd25-1.webp "when in top view, q and e should rotate that view 90 degrees")

> I want to be able to click on the truck and select it. Doing that should highlight the truck, turn on the lights and extend the side steps, which are retractable by default . (also the side mirrors fold and unfold)
>
> The back wall of the camper should also fold down unto a porch when the camper is selected

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/18c03006-1.webp "I want to be able to click on the truck and select it. Doing that should highlight the truck, turn on the lights and extend the side steps, which are retractable by default . (also the side mirrors fold and unfold) The…")

> bathroom content is clipping into the living room. Are you sure this camper is long enough? You might have missed a few feet here and there. Loop up the dimensions.
>
> Also the bedroom slide   is masking the bed

> He's walking to the passenger door. He should walk to the other side. Also the truck shell should mask him as he4 climbs inside.
>
> Simplofy the masked model when he's behind the truck or camper, just show the edge not the details. make sure the character gets first selection when behind any other model

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/f5b9a334-0.webp "He's walking to the passenger door. He should walk to the other side. Also the truck shell should mask him as he4 climbs inside. Simplofy the masked model when he's behind the truck or camper, just show the edge not the…")

> also, I'm 6'4, so update my model to be the correct scale and also look int othe dimensions of the f450

> the truck is a gooseneck, so just have a ball in the bed vs the block. add a rolled up bed cover that's near the cab and a black tool chest that's uinside of the front of the truck bed and underneath the bed cover. It's about 2 feet deep and is floating about 6" off of the truck bed. The truck bed should be white, it's painted  not bedlined.

Updated the truck with: a chrome gooseneck ball replacing the hitch block; a white painted bed; a rolled cover near the cab.

![The camper with its slides out, cut away to show the layout](https://www.tomjohn.design/images/content/tomjohnville/progress/camper-cutaway.webp "the truck is a gooseneck, so just have a ball in the bed vs the block. add a rolled up bed cover that's near the cab and a black tool chest that's uinside of the front of the truck bed and underneath the bed cover. It's…")

> I want the slides of the camper to change to go in when it's hooked up, but have them out by default and not change on selection. also have the porch always down and allow the character to walk on them, there should aklso be a set of stairs near the rear door and leading up onto that porch.
>
> Also, the rear bunks should be back further, they're right against the back wall and there's tri panel glass door there from the rear bedroopm to the porch.

> If I double right click on the truck or the camper, he should run to get in

Done. With him selected, double right-click either vehicle to run to its entrance and get in.

> make the truck headlights and other lights turn on when the character is driving.

The headlights now shine brighter and cast visible beams while driving.

> center the truck when it's in drive mode on the page, center the truck and the camper when it's hooked up, increase the zoom levels, to allow it to be zoomed out way further

Done. The truck stays centered while driving, and the full rig stays centered when towing, including through turns.

> there's some weird lines round the truck windows and this white line on the camper interior

Fixed both: the truck’s window trim now follows clean edges, and the camper’s exterior pinstripe no longer crosses the kitchen interior.

> I think the truck tire and wheel well size is too small

Increased the tires and rims by about 18% and enlarged the wheel wells to match.

> stairs on the porch shuld be on the back and they don't have side supports, they just rest on the ground. Camper stairs are always a side strucutre with a floating stairs and feet

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/833e68e1-2.webp "stairs on the porch shuld be on the back and they don't have side supports, they just rest on the ground. Camper stairs are always a side strucutre with a floating stairs and feet")

> The interior should only be shown when the camper is selected

> when the truck is within 8 feet of the camper, lower the tailgate. when it's beyond that, unroll the bed cover and put up the tailgate

Done. Hitching now retracts the porch, all three slides, and both sets of stairs.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/ca2c5b22-0.webp "when the truck is within 8 feet of the camper, lower the tailgate. when it's beyond that, unroll the bed cover and put up the tailgate")

> when the truck is hooked up, close the porch, slides, and stairs.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/57ac9cf5-0.webp "when the truck is hooked up, close the porch, slides, and stairs.")

> when the trailer is hooked up, put up the tailgate,

Done—hooking up the trailer now raises the tailgate and keeps the bed cover rolled up.

> the turning sensitivity of the truck is too tight

Updated steering to stay sensitive at low speeds and progressively soften as speed increases—about half sensitivity at 22 mph, with gentler highway corrections.

> at higher speeds. Have it be sensitive at lower speeds but get less so the faster you drive

> add controls to turn off the shader, add another shader to add dithering.

Added independent Pixel shader and Dithering toggles, with dithering strength and reset controls.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/cca72f25-2.webp "add controls to turn off the shader, add another shader to add dithering.")

> okay I've got sound effects for the truck starting but they're inside of this audio file. I want to add it so that the truck startup time matches the game. here's the full sound effect, I have the start, run, and the trcuk turning off.   theres a super high pitched tone that needs to be cut out and we need to find the rtight segment to use. can you dothat?

Done—both are integrated.

> also bring in the walk sound effect from pilgrimage and tie it to my own steps

> add in my other content, articles, and pieces to the game world. Also, make the lables for the content show up on hover and make the cards 6x4 squares in the game engine.

Added all 32 content pieces to the game world, synced with your existing library.

> that was a little too much, also increase the max backup speed by about 35%.
>
> I'd also like to add a very miniumal speedometer to the bottom left corner of the screen when driving. Let's riff on that in paper (link)

Created three speedometer concepts in Paper: bare number, soft pill, and thin gauge.

> there's a noticable loop in the running sound. the acceleration sound isn't bad, but it needs more noticable rpm ramp up and also some gear changes would be cool. also have to go to idle when the gas is off, not just making it relative to speed

> also I need the down arrow to have more of a dramatic braking action

> make the controls for the environment contextual on hover of the elements. move the isometric cube to the bottom left, add a minimap to the bottom right.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/7c36f058-0.webp "make the controls for the environment contextual on hover of the elements. move the isometric cube to the bottom left, add a minimap to the bottom right.")

> On selection I mean. Not on hover

> I want t otry out some different placements of the controls so they're not all in cards and feel disconnected from the content. One method would be to position the contorls in the actual game environment, another would be to anchor the card in the bottom left corner of the screen.

> the player walking controls when selected are not done well. UIsing the arrow keys to walk should feel smooth and more like how the truck works.

Arrow keys and WASD now move the selected character continuously, with smooth acceleration, turning, and stopping.

> Also, let's organize the content on the page a little more. it's all very randomly distributed around the page. On load, I want the site to be centered on my avatar. the truck + camper to be placed about 6 squares away, parked beside each other to the top right and the content top be to the bottom left of me.  I'm planning to add some more details to the top left area on page load

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/d0e0ce70-0.webp "Also, let's organize the content on the page a little more. it's all very randomly distributed around the page. On load, I want the site to be centered on my avatar. the truck + camper to be placed about 6 squares away,…")

> I want the work cards to have color, I don't want them to be affected by the shader. Also the titles above that content shouldn't be affected by it.
>
> Let's riff on the controls in paper (link)

Work cards now retain their original colors, and content titles stay sharp and unaffected by pixelation or dithering.

> Make the cards all 1 row taller, have the video content playing when in card mode, use a video player that has no playback controls

Done—cards are now one grid row taller (6×5).

> Let's explore the expanded card layout in paper (link)

The link points to Pilgrimage’s “Sprite library — start here”, rather than an expanded card.

![The truck and camper as sprites, with project tiles on the floor](https://www.tomjohn.design/images/content/tomjohnville/progress/sprite-world.webp "Let's explore the expanded card layout in paper")

> I want the camper windows to be windows, just darkened so you can see the outside. Also, I think the proportions of the ferniture and the interior layout still need tweaking. You should use the top view and overlay the floorplan layout on top of it to see the issues. The couch, table, and bathrooms are all incorrect.

View the top-view overlay.

> those windows should be way darker

> this kitchen layout is not right. You're still missing something. here's a bunch more photos for reference.

Rebuilt the kitchen from your photos: full sink-and-cabinet wall, pantry beside the fridge, stacked range/microwave, correct window arrangement, and a longer…

> the global lighting of the scene needs work. all the blacks are wy too flat. I also want the truck and camper to have some depth and some highlights with some refraction and reflections

Updated the lighting and vehicle materials: dark surfaces retain more shading and detail; paint and chrome catch broad reflections and highlights; glass now…

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/6faedbc8-0.webp "the global lighting of the scene needs work. all the blacks are wy too flat. I also want the truck and camper to have some depth and some highlights with some refraction and reflections")

> Add some controls for the lighting,. this is too much

Added Appearance → Lighting sliders for main light, fill light, reflections, and shadows, with a Reset button.

> here's a bunch more shots of the bathrooms and the washer and dryer from the back bedroom that hasn't been added yet.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/223026a3-0.webp "here's a bunch more shots of the bathrooms and the washer and dryer from the back bedroom that hasn't been added yet.")

> a few details are wrong about that back space. There's a small hallway and the washer and dryer are facing to the right.

> also that should be an l shaped couch made of 5 pieces (one for each chair), not 2 different couches.

> and here's some better angles of the master bed

> and a better angle of the TV in the living room

> yes, they should face the opposite wall. almost directly at the door (which is also in a wrong location and needs to be fixed with it's own stairs just like the front)

![Inside the camper, close up](https://www.tomjohn.design/images/content/tomjohnville/progress/camper-interior.webp "yes, they should face the opposite wall. almost directly at the door (which is also in a wrong location and needs to be fixed with it's own stairs just like the front)")

> the front cap needs to shift up. Here's a few more shots for the exterior paint and dimensions.

> Open both doors when the slides are out and allow my characteer to walk up any of them. get rid of the back loft and the bathroom door. Hide fcabinets and furniture that are high when they are aligned to the wall nearest the camera (pantry & fridge here for example  )

> the cube shelves in the back should have 3 cabinets, not 2. the dining stools should be way smaller and under the island overhang. The kitchn slide needs to come out a bit more so that the wall isn't clipped. the window should be on the wall adjacent to the kitchen sink not adjacent to the stove

> The back quarter panel decal and paint are wrong. the rear also has 4 windows, one of them you can see here that's colored with white paneling. The black ones are in the paint/

> the front support legs should be right at the base of the front of the frame, right now they're under nothing

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/acb44052-0.webp "the front support legs should be right at the base of the front of the frame, right now they're under nothing")

> If I have the character selected and it runs to the edge of the screen because of my command, the camera should folllow it, it might actually be correct if that wasn't the edge but more of a rule that has the camera follow the character when they're selected all the time

Implemented smooth camera follow whenever Tom is selected.

![Towing the camper, following behind](https://www.tomjohn.design/images/content/tomjohnville/progress/towing-at-night.webp "If I have the character selected and it runs to the edge of the screen because of my command, the camera should folllow it, it might actually be correct if that wasn't the edge but more of a rule that has the camera fol…")

> I want to be able to drag the screen around, and it not snap back to the character. Something that would "break" the tie with me so that the page can be explored. doing this would add a button to the edge of the screen (if I'm off screen) that would allow the view to be recentered, and if on screen, clicking on me would bring it back. Movement idle transitions would only happen when the view isn't centered on me, but standard in one place idle ones could still work

Dragging the view now stays where you leave it instead of snapping back to Tom.

> when i drag away I think it should deselect me

Since the camera now follows Tom exactly when he's selected, I removed the separate "detached" flag I had added. Everything else follows from that: idles…

![Me in 3D next to the truck](https://www.tomjohn.design/images/content/tomjohnville/progress/tom-and-truck.webp "when i drag away I think it should deselect me")

## A scene for each project

> I want to make 3 scenes like the pilgrimage one for each of the projects. For the stipple one, have it be a doorway that's lit up with the shader in the stipple cam repo, and when the character walks through it, the whole scene changes to that shader.
>
> Also. I want the "selected state" of those scenes to shift the viewport over so that the scene is shown on the left 3rd of the screen when active so there can be space for the deails on the right 3rd. Basically I want the negative space of the page to allow for content in a card that comes up when the scene is active. Let's riff on that idea a bit in paper. (link)

Added six Paper studies: pilgrimage, Stipple Cam, and What the Port scene concepts; selected states with scenes in the left third and details on the right…

![A Paper board: three small worlds, one place to wander](https://www.tomjohn.design/images/content/tomjohnville/progress/scene-studies.webp "I want to make 3 scenes like the pilgrimage one for each of the projects. For the stipple one, have it be a doorway that's lit up with the shader in the stipple cam repo, and when the character walks through it, the who…")

> This is more what I meant: (link) Also I want the stipple cam project to load in my site when this button is pressed, which would also request webcam permissions.

Updated the Paper design: webcam renders in the right half with default settings and no controls; the button requests camera access; crossing the doorway…

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/20cb5b14-0.webp "This is more what I meant: Also I want the stipple cam project to load in my site when this button is pressed, which would also request webcam permissions.")

> I don't need the full controls to render. I just want the webcam part to render in the area on the right half of the page with the default settings.

> But walking through the door toggles the stipple mode on until you walk back the other direction

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/fed83ed1-0.webp "But walking through the door toggles the stipple mode on until you walk back the other direction")

> more like this: (link)

Understood—one shared black canvas, doorway on the left, large webcam rendering on the right, and “Stop webcam” underneath.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/a6e860f4-0.webp "more like this:")

> okay build it

All three scenes are built, including the right-side webcam and persistent doorway toggle.

> when the world is stippled, I think we want to hide the isometric grid of the world so it doesn't add visual noise

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/420d3f30-0.webp "when the world is stippled, I think we want to hide the isometric grid of the world so it doesn't add visual noise")

> for the stippe animation, I want the character to not be affected by it. Also running through the portal should activate it for the scene even if you leave the square.
>
> Remove the row of items in the bottom middle of the screen. Add a rule to this repo to not create new UI elements that aren't part of the area being prompting. There's a lot of new UI elements being added that were not asked for and I want to avoid that

I made all three changes and added the rule.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/d218c072-0.webp "for the stippe animation, I want the character to not be affected by it. Also running through the portal should activate it for the scene even if you leave the square. Remove the row of items in the bottom middle of the…")

> walking through the portal should toggle it. When in stipple mode, we need to make the portal not stippled and when in normal mode we need to make it stippled. Make it more of a glowing arch, always solid, where the portal is always showing what the world will look like when you pass through it.

Nothing is committed yet.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/d8dc10d6-0.webp "walking through the portal should toggle it. When in stipple mode, we need to make the portal not stippled and when in normal mode we need to make it stippled. Make it more of a glowing arch, always solid, where the por…")

> Make the character also change to the stipple when the effect is on. In the state where the portal is showing the stippe, I need it to show the

Things you might notice: in Stipple mode the peek into the ordinary world has no grid lines, because the stippled world hides them; the warm light on the pad…

> peek through like it does when the character is on the pad. get rid of the yellow shadow

> have the arch eminatinng the stipple as well, almost like it's a bit of a gradient mask showing the effect

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/1f47b381-0.webp "have the arch eminatinng the stipple as well, almost like it's a bit of a gradient mask showing the effect")

> okay the radiating stipple is cool, but have the mask slowly pulsing showing more of the mask

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/0f0c0232-0.webp "okay the radiating stipple is cool, but have the mask slowly pulsing showing more of the mask")

> not a grow in and out, more like a pulse where it sends out a wave that dissipates every 5 seconds or so

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/f16814b4-0.webp "not a grow in and out, more like a pulse where it sends out a wave that dissipates every 5 seconds or so")

> it should also puls out on the floor as well, following that floor plane

![The shadercam doorway, lit and sparkling](https://www.tomjohn.design/images/content/tomjohnville/progress/stipple-portal.webp "it should also puls out on the floor as well, following that floor plane")

> The glow on the outside of the arch should be based on that pulse. It should be bright and quick and fade out about 300ms. Almost like there's a charge that's getting released by the arch. make the arch solid white, like it's made of the stipples

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/e1c1c721-0.webp "The glow on the outside of the arch should be based on that pulse. It should be bright and quick and fade out about 300ms. Almost like there's a charge that's getting released by the arch. make the arch solid white, lik…")

> make the base of that scene black

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/ee6b01e1-0.webp "make the base of that scene black")

> the pulse needs to be quicker. like it's charging up, the arch slowly glows more, and then it releases the wave.that propogaes out and fades quickly.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/1266518a-0.webp "the pulse needs to be quicker. like it's charging up, the arch slowly glows more, and then it releases the wave.that propogaes out and fades quickly.")

> also make uit so thwe character always has the outline sihouette when in stipple mode

> with the black floor change the bg of the base is now not showing up. We should make it a grey in the stipple world so it has some contrast

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/993b85ab-0.webp "with the black floor change the bg of the base is now not showing up. We should make it a grey in the stipple world so it has some contrast")

> make it so that driving the truck through also toggles the state

Truck toggle: driving through switches between the ordinary and stippled world, in either direction.

> and make the arch 4 tiles wide, and make it 2 tiles long, so it's more of a slight tunnel

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/08b36e82-1.webp "and make the arch 4 tiles wide, and make it 2 tiles long, so it's more of a slight tunnel")

> the expand and collapse article card transition needs some seriouswork. the images are snapping into new positions, not animating with the card, and the overall animation is too quick. Let's tune that animation by adding dialkit and create properties for all the attributes of the animation. I also want to see the path that it will take when it expands relative to the world, and I'll want to make it so that you can go from one article to another. and tune that animation.

Why the images snapped: the article's first image was lazy-loaded, so the old code often didn't know where it would sit when the animation started.

![An article card opening, with its transition dials](https://www.tomjohn.design/images/content/tomjohnville/progress/card-transition-dials.webp "the expand and collapse article card transition needs some seriouswork. the images are snapping into new positions, not animating with the card, and the overall animation is too quick. Let's tune that animation by addin…")

> the ege of the portal should be the start of the arch. also it should affect the inside of the arch

> the back wall of the tunnel here is strange. Also the floor and wall shouldn't have the same texture

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/09eb0121-0.webp "the back wall of the tunnel here is strange. Also the floor and wall shouldn't have the same texture")

> I want to keep working on the portals and scenes. take a look at the ones not yet designed and let's talk through what they could show for those projects. Also I want to add in Prism from github (private) but that one would be password protected. It would be represented as a tall glass pyrimid prism, and when you walk into it, your mouse would be come the light source for a ray in the scene that shines into the pyrimid and refracts like a prism. Use (link) and also it's basically the same interaction as the one on that page, but in my scene.

I haven't changed any code yet, since you wanted to talk these through first.

> I want turbo speedo to be a scene of rabbits hopping around, pull those from pilgrimage. when you walk in everything on the page starts moving faster and dials show up to tune it. Also pull a screenshot of the app from the latest pr I did for it to submit to raycast. Also show that it's pending approval.
>
> Let's just do that and the prism one for now, we'll circle back to the others. agree with the password points about the prism. prism demo is the one I'm talking about. make it a 4 sided one, so it's clear it's a vercel triangle shape. password field will show when you walk into it.

Riskiest change: the timing of the whole 3D scene now runs through the new speed control (TimeDriver.tsx).

> For turbo speedo, I want the reveal to show a bunch of rabbits hopping around in grass around my character.
>
> Add pathfinding so that he avoids walking through tiles unless told to so it's not going into them accidentally.
>
> The prism is a decent start, but it needs to look more like glass, and the light and refractions need to be more realistic

When Tom reaches the plot, grass spreads out from him tile by tile, using the same reveal as the Pilgrimage world and Pilgrimage's own grass art.

> make the triangle 4x4 and slightly taller. I want it to look more like glass, not have all of the edge coloring and look more like a refracted object. we need to use some different methods that give us material properties with this.

> also the light should spread out more after it's refracted showing the colors better

> the pruism should also warp and  affect the characters and other assets if they're behind it.

Tom was drawn in a separate pass after the world, so the glass never saw him. Now the glass is drawn last, over the finished frame, still using three.js's…

> the light source now looks like it's behind the prism when it should be in front of it. I want to lock the light source in a circle around the pyrimad, so that when you move the mouse it rotates out and around and is always on top of it vs behind it. like an invisible halo about 3' above the top peak of the pyrimid

![Me beside the Prism pyramid](https://www.tomjohn.design/images/content/tomjohnville/progress/prism-pyramid.webp "the light source now looks like it's behind the prism when it should be in front of it. I want to lock the light source in a circle around the pyrimad, so that when you move the mouse it rotates out and around and is al…")

> the gradient showign the stippling should emmintate on all sides of the space. also, we need to work on the timings of the change from stipple to not. it's too instant right now

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/099dd858-0.webp "the gradient showign the stippling should emmintate on all sides of the space. also, we need to work on the timings of the change from stipple to not. it's too instant right now")

> That transition is too much. let's just try a crozssfade

The switch between worlds is now a plain crossfade over 0.8 seconds, instead of the spreading wave.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/78cf24d1-1.webp "That transition is too much. let's just try a crozssfade")

> Very good stuff. the scrollbar is making content jump a bit so we'll need to add a custom one that doesn't do that.
>
> Also increase the padding on the sides of the cards a bit. I want some good space there, maybe about 3x. remove the border on the large card.
>
> Also add a button on the sides to go to the nect article and back to previous.
>
> On mobile I also want to be able to flick it down when it's scrolled to the top of the page.
>
> Let's also use the same card type and animation for work and the video ones.

The old project dialog is deleted; its job is now done by CardReader.tsx (renamed from ArticleReader) with the new ProjectContent.tsx.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/c1ddfc73-2.webp "Very good stuff. the scrollbar is making content jump a bit so we'll need to add a custom one that doesn't do that. Also increase the padding on the sides of the cards a bit. I want some good space there, maybe about 3x…")

> I want the videos embedded so I can play them when expanded. Write a description as well from my point of view about the video.

How it works: the card opens on the video's thumbnail, the same image as its tile, so it still flies out of the world cleanly.

> yeah fix the data

Repo copies: the same scrambled data was in three other places, and I fixed all of them to match: scripts/seed-cards.mjs; src/data/interviews.ts (I also put…

> remove the link to a specific part of the video

> I want to remove the debugging UI unless in admin mode, and even then make it something to enable vs persistent

While tuning is on, your slider values are saved in your browser, so they come back the next time you turn it on.

![An article card opening](https://www.tomjohn.design/videos/tomjohnville/card-transition.mp4 "I want to remove the debugging UI unless in admin mode, and even then make it something to enable vs persistent")

> I like the way that the turbo speedo selected state is jagged without taking over the whole area. Let's update all of the bases of those scenes to follow the same strategy and visual when entered, but also add in a borderline that shows the boundary between the scene and the rest of the site so you know where to walk to enter. I think we need to increase the overall "row" size to 3 tiles vs 2.

Updated all five scenes with bounded, jagged bases and visible entry borders.

![The doorway, the Pilgrimage chapel and the What the Port? servers on the black floor](https://www.tomjohn.design/images/content/tomjohnville/progress/portals-and-chapel.webp "I like the way that the turbo speedo selected state is jagged without taking over the whole area. Let's update all of the bases of those scenes to follow the same strategy and visual when entered, but also add in a bord…")

> By “row size to 3 tiles vs 2,” do you mean widening the walkway between scene rows from two grid squares to three?
> Yes, widen the walkway to 3 grid squares

> only show the border on the outside of the area when it's active, not just on the canvas

The border now follows the outer jagged edge only while the scene is active.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/6382f1e5-0.webp "only show the border on the outside of the area when it's active, not just on the canvas")

> the border should show were you walk in and out of, not the jagged edge

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/180ee23c-0.webp "the border should show were you walk in and out of, not the jagged edge")

> pull in the machindash model from the repo i have forked, show that as a project.  with the macindash sitting in a scene block.

Macindash is now in Selected work (the past-work section, not Projects).

> actually that would be in past work, not in projects. projects are for fun

![Versions of Macindash from its print files](https://www.tomjohn.design/images/content/tomjohnville/progress/macindash-prints.webp "actually that would be in past work, not in projects. projects are for fun")

> the back panel fits in the cavity on the back, that's what the bevels are for a snap fit

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/981a151a-1.webp "the back panel fits in the cavity on the back, that's what the bevels are for a snap fit")

> there would be an LCD screen that would fit on the front to fill that front cavity, only just being covered by the corners

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/4bd2663b-0.webp "there would be an LCD screen that would fit on the front to fill that front cavity, only just being covered by the corners")

> you're close, notice how the planes would continute down and the bevels would snal in place

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/8507757c-0.webp "you're close, notice how the planes would continute down and the bevels would snal in place")

> the back plate isn't right. It sits on the outside of the shell.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/838ac98f-0.webp "the back plate isn't right. It sits on the outside of the shell.")

> the new selection drawers need to have a better transition when they come in intially, and then the subsiquent ones that are selected need to show up instantly in the panel vs being another interaction.

> We also need work work on the transition of the page elements, so that when it's expanded and collapsed the content doesn't shift jarringly, but just makes the center section smaller and larger with the same relative centered content in the middle of the view.

![The side panel swapping between scenes](https://www.tomjohn.design/videos/tomjohnville/drawer-swap.mp4 "We also need work work on the transition of the page elements, so that when it's expanded and collapsed the content doesn't shift jarringly, but just makes the center section smaller and larger with the same relative ce…")

> not great, but better. I think we need to not actualyl shrink the map area, but to overlay the side drawer and shift over the camera a bit to compensate for it being there. this resizing thing is making everything warp and skew -- which also happens when i resize the window. before you do anything, why is the resizing behavior so jarring?

Several things combine, and none of them come from the drawer itself.

> we'll worry about the screen resizing later. I deally it would just make the screen smaller and nothing would actually change in the view beyond the center of the viewport changing. There's very little content that needs to shift, I think we're over complicating it but I also don't fully understand it. Do the drawer first. Also, change the collapse button to an expand button, which would make it full width -- more like a normal webpage. Also allow the dragging resize to "snap" it to full width when it exceeds 70% of the viewport width

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/0a0c2417-0.webp "we'll worry about the screen resizing later. I deally it would just make the screen smaller and nothing would actually change in the view beyond the center of the viewport changing. There's very little content that need…")

## One UI

> let's continue to riff on the mobile UI. it's not great. (link)

I’ll look at the Paper design and the current mobile implementation, then work through a more focused mobile direction.

> let's continue to riff on the mobile UI. it's not great. (link) namely there are too many drawersm the zoom level is wrong, the character isn't walking for some reason, there's not good controls to get in and out of the truck. the cards aren't clickable, etc. we need to keep refnining it.

I fixed the four problems on phones and put a before/after board on the Portfolio mobile page in Paper, built from real screenshots.

![Driving the truck on a phone](https://www.tomjohn.design/images/content/tomjohnville/progress/mobile-sheet.webp "let's continue to riff on the mobile UI. it's not great. namely there are too many drawersm the zoom level is wrong, the character isn't walking for some reason, there's not good controls to get in and out of the truck.…")

> I wanted to riff on the UI in paper

> on selection of something I don't want a sheet, I'd ike a button on the right side that can be tapped to reveal the sheet, so that the joystick isn't affected

The top of the screen is empty in every frame: no name, socials or sound button.

> also hide the top controls when on mobile, and also hide the sound button altogether

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/0392139f-0.webp "also hide the top controls when on mobile, and also hide the sound button altogether")

> I want to treat the work cards like they're a stack on mobile, so show the ones after it and I 'd like a flick to the side to go between them, and a flick down to collapse them. Work cards with longer content will still be shown as a card, not a sheet.

> on mobile tapping on a block on the screen will send me there. double the size of the isometric grid, but don't change the size of the assets. this is more of a tap target thing

> move the joystick to the right side, and the selection button to the left side

> The long work cards would contain the cards and the content would scroll inside of it

I updated the long-card frame (the last one in the card stack row) on the pass 3 board in Paper.

> I'm chancing my mind. those should expand into a sheet, but should be swipable down to dismiss, and swiping left and right should take you to the next article

I updated the card-stack row on the pass 3 board so long work opens as a sheet instead of joining the stack.

> not a stack like the others

> don't need the X/20 footer part. full width, almost full height

> okay, build this

I built pass 3 as designed in Paper.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/2606b97c-2.webp "okay, build this")

> okay sounds good. sound button should stay on desktop.

I rebased onto main and rebuilt the phone behaviour around 42's selection card: selection; sound; carried over unchanged.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/424bf29e-1.webp "okay sounds good. sound button should stay on desktop.")

> scrolling up on the bottom sheet when on mobile should make the sheet expand, not scroll the list. I want it to get bigger more easily

Swiping up anywhere on a phone tray now makes the tray bigger instead of scrolling the list.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/c44da619-0.webp "scrolling up on the bottom sheet when on mobile should make the sheet expand, not scroll the list. I want it to get bigger more easily")

> yes, add that. I want it to feel like a native sheet

I added it: when the list is scrolled to the top, pulling down on it now shrinks the tray. With the swipe-up from before, the trays behave like native iOS…

![Achievements on a phone](https://www.tomjohn.design/images/content/tomjohnville/progress/more-213.webp "yes, add that. I want it to feel like a native sheet")

> The UI style of the app and that of the game don't match very well. I need you to put all of the components on the page here: (link) with all of the colors, icons, and type treatments, Basically I need to make a design system so we can explore some new styles. Show the moecules as well, such as the minimap grouping, the page content in context, the contact form, etc.

I've created the tokens (colours, type, space, radius) and the first board.

![The About page in Paper](https://www.tomjohn.design/images/content/tomjohnville/progress/more-266.webp "The UI style of the app and that of the game don't match very well. I need you to put all of the components on the page here: with all of the colors, icons, and type treatments, Basically I need to make a design system…")

> I'm going to stop you right now. Leave out all of the absolutely unneeded tiles and paragraphs. Give some labels, fine, but this is a design document, not some excercixe in your writing style. Only add labels when it actually is needed. Annotations are much more helpful, callouts, and if you find descrepancies or overlappying componetns that can be unified, add a reccomendation, but keep it brief. I ain't reading it

The design system is on the UI Unification page, with no intro or prose. It's laid out in three rows: foundations; components:; atoms.

> make that a rule in all deisgn file edits

> This is absolutely worthless content

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/28aed0ee-1.webp "This is absolutely worthless content")

> I don't want the mobile drawer to be transparent

The phone drawer is now solid, so the town no longer shows through it.

![The panel as a sheet on a phone](https://www.tomjohn.design/images/content/tomjohnville/progress/more-280.webp "I don't want the mobile drawer to be transparent")

> remove the hover for the dialoge options.
>
> if the sidebar is collapsed, and a scene is seleted. Show the title of the scene above the building, with a button so show info, which would expand the sidebar. And also show a new button below the trophy one for that scene, with the round button sidebar approach, and the icon of the scene for the circle. That says as long as the scene is selected. If there's no logo, ask me and I'll give you one.
>
> Sometimes my legs disappear when I'm climbing stairs or on the second floor of a building.
>
> on mobile, when a scene is selected, expand the bottom sheet about 15 percent with a bit of easing to show a little more of the details.
>
> Some buildings have a double border on hover, make it only one.
>
> gallery items have lost their collapse anuimation, they're just instantly transitioning to the next item when another one is selected.

Logos I need from you. I have logos for Vercel, Basedash, Asurion, Tomjohn Design, Prism and Pilgrimage. These show a plain building icon until you send one…

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/9bdd0c01-2.webp "remove the hover for the dialoge options. if the sidebar is collapsed, and a scene is seleted. Show the title of the scene above the building, with a button so show info, which would expand the sidebar. And also show a…")

> what the port, turbo speedo, shadercam, are all repos locally with thier own logos. get those. Talks make it a video play icon, writing just a writing icon, Brinklye and ford get their company logos. Here's ditherface  . Give me prompts for Astra to generate logos for the other ones

The logos are in. Nine scenes still show the building icon: shadercam, Macindash, Full time RV Life and the six shops.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/f6cd4cbe-0.webp "what the port, turbo speedo, shadercam, are all repos locally with thier own logos. get those. Talks make it a video play icon, writing just a writing icon, Brinklye and ford get their company logos. Here's ditherface .…")

> Look at the shadows and effects I have on this: (link)
>
> I want to see what some buttons would look like with that same depth.

I've put a new board, Depth · buttons, on the UI Unification page under the In context row. It uses your knob's shadow and effect stack on the app's buttons…

![A Paper board: raised buttons over the world](https://www.tomjohn.design/images/content/tomjohnville/progress/depth-buttons.webp "Look at the shadows and effects I have on this: I want to see what some buttons would look like with that same depth.")

> I don't want a shadow on the text. Make that as high contrast as possible. Also the button text and contents aren't vertically aligned. I don't want the inner shadow treatments on the nested content.

I've updated the Depth · buttons board with your corrections, your icons and your new shadow.

![A Paper board: icons](https://www.tomjohn.design/images/content/tomjohnville/paper/icons.webp "I don't want a shadow on the text. Make that as high contrast as possible. Also the button text and contents aren't vertically aligned. I don't want the inner shadow treatments on the nested content.")

> macindash icon

Six chips still show the building icon: shadercam, Full time RV Life and four of the shops (Ramen, hondo's, Kiln and Fieldnotes).

> Generate simple logos for the stores, square images that would be used on social media for each. look at the game assets, there might already be some icon that could be used. also generate one for the rv life scene.

Created seven square logos and connected them to the scene chips.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/dd7401b0-2.webp "Generate simple logos for the stores, square images that would be used on social media for each. look at the game assets, there might already be some icon that could be used. also generate one for the rv life scene.")

> Make the details button use the e key, not the chevrons

The page is at Press the triangle chip to hide the panel, then press E.

> The labels are way too high over the buildings.  ideally it would be here. also sometimes that label shows up and then snaps down. I want it to be centered on the building, if in view, and located close to the top of the model edge, offset up by 32px

The scene title now sits centred over its building, 32px above the top of what's actually drawn.

> Include the logo of the location before the title

> I also want to see the logo in the hover tooltip

> For some reason the title and the options slide in transition is better on the camper and rv clicks. the others have a jancky shift

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/53024585-0.webp "For some reason the title and the options slide in transition is better on the camper and rv clicks. the others have a jancky shift")

> Here's the icons I want to use. Look through them, swap out the ones I have, and if there's anything missing, Make a placeholder icon and give it a pink border: (link)

> Updated the shadow styling (link)

> leave the current sunglasses icon, I think I'll be getting rid of that part of the Ui anyhow

The lit buttons have the app's original sunglasses icon again, without the pink borders: black on the two grey ones and white on the charcoal one.

> okay let's try this on a few in app pages and see how it feels (in paper)

I've made three new boards in a row under your icon sheet.

> All of those should be secondary buttons

There are now two rows of knob boards to compare, three boards each (world with drawer, contact over the world, About).

> or even tertiary

> updated the secondary button style: (link)

Your updated secondary is now on every secondary button. That's a 161616 fill with no outline, a dim 1px top highlight, the inset stack, and one soft drop…

> These two would be tertiary   I updated that style too. (link)

Your updated tertiary style (the 161616 fill with just the 1px top highlight) is on the drawer's expand and close in both world boards.

> This should be primary white (link)

These three changes are in: send is primary white; your modal style is on the tertiary contact board too, so both contact boards now match; surface.

> updated modal style (link)

> And the dividers in there too

> show me more screens

I've added six new screens in a row at y 8200, under the tertiary boards. They all use your latest styles: secondary; tertiary; primary.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/e1c370c3-1.webp "show me more screens")

> The F450 and t he camper. have a much better selection transition than the scenes.  . Fix the jank

Switching scenes with the panel hidden is now as smooth as the camper and the F-450.

![A screen recording of the town](https://www.tomjohn.design/videos/tomjohnville/recording-zwQAJz.mp4 "The F450 and t he camper. have a much better selection transition than the scenes. . Fix the jank")

> joysticks (link)

Both sticks on the Knob · phone board now match your updated look stick: a faint well with a white hairline ring, and a white knob with a dimple and your dot…

> try building out the site with these new styles

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/d9097af6-3.webp "try building out the site with these new styles")

> You didn't update the icons

All the icons now come from one file, src/components/icons.tsx.

> new map icon (link)

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/f6454465-1.webp "new map icon")

> rotate icons for iso and top down. 3rd person doesn't get one, as it can't rotate like they can. (link)

> the point of this branch is the UI changes. You shouldn't touch anything else

> These are overlapping with each other

Cause: when I rebased onto main, the inventory chip came in positioned for main's old 36px chips, 44px apart.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/4e396b35-0.webp "These are overlapping with each other")

> more icon (link)
> search: (link)
> chevrons (link)
> search for others: (link)

I added these to src/components/icons.tsx: added from the sheet; swapped in:; the search chip and the command menu's search field use search.

> inventory (link)

The command menu's Inventory row now shows your standing figure from the sheet, and the pink placeholder is gone.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/554ae47b-0.webp "inventory")

> Where's all the new designs

Nothing is lost. All 36 modified files and icons.tsx are still uncommitted on design-system-in-paper.

> All of the new icons and butts are missing

You can see the raised round chips, the new search, day/night and sound icons, the raised Contact and social buttons, the raised minimap controls, and the new…

> This is 55060

You're right, and the cause is mine: that is not my server.

> updated color of the sidebar (link) -- make other bgs of the app mathch.

The sidebar colour is done.

> I also need day mode to use light UI overall, not just the game light

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/a2750df3-0.webp "I also need day mode to use light UI overall, not just the game light")

> You should be able to make it work with what I have. I want to see what you come up with

By day the UI is now light as well as the game.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/22149109-3.webp "You should be able to make it work with what I have. I want to see what you come up with")

> have this button alignmen to the header push over the text a bit moving with the button

> only when that button is there should it be pushed

> The grid also needs to respect the color mode

The ground and grid now follow the colour mode, both in the town and in the arrival and tutorial.

> and the page bg, but not so dark. more of a grey here, with the dark mode being a lighter dark grey

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/494f2c43-1.webp "and the page bg, but not so dark. more of a grey here, with the dark mode being a lighter dark grey")

> button issue here, this should be inline in the row

They stay raised, one step lighter, and never sink.

> I don't want selected buttons to be recessed.

> I'd like those secondary buttons to have the same elevation as the bg, so just flat. The buttons that are waiting activity would be accented, the ones that are not would go tertiary. let's make tertiary have the bg color with no border or shade until hover, and then show the slight border

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/bac68bcd-0.webp "I'd like those secondary buttons to have the same elevation as the bg, so just flat. The buttons that are waiting activity would be accented, the ones that are not would go tertiary. let's make tertiary have the bg colo…")

> I want these active ones to have no shadow (the x button)

I applied the same rule to every selected state, so they match: chips; map; other.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/33755e35-0.webp "I want these active ones to have no shadow (the x button)")

> Group these together in one button with 3 icons. They don't need to be separate, they're all simiar. Rounded button -- pill shaped.

Search, day/night and sound are now one pill with three round buttons inside, instead of three separate chips.

> move over to be 16px from the left ege, do the same with elements on the right side and also 16px on the bottom edge too.

Everything on the left, right and bottom is now 16px from the screen edge, down from 24px.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/66464f52-0.webp "move over to be 16px from the left ege, do the same with elements on the right side and also 16px on the bottom edge too.")

> make this rounded too

The camera-view switcher (isometric, top-down, third-person) is now a full pill.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/6af100ad-0.webp "make this rounded too")

> Should not be a primary button on the right. The whole row is the button. rows should not get shadow, just be a darker highlight (on light, lighter on dark).

The places row is now the button itself, and the black pill is gone.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/3b9f707d-0.webp "Should not be a primary button on the right. The whole row is the button. rows should not get shadow, just be a darker highlight (on light, lighter on dark).")

> logo bug on light mode

I haven't yet updated docs/ui-system.md, which still says the close button grows to fit its Esc keycap.

> action pill bug on light mode

> dialogue shouldn't invert on light mode

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/08acade1-0.webp "dialogue shouldn't invert on light mode")

> neight should discovered place

> forgot to swap articles

> get rid of esc in the menu button

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/cb44c244-0.webp "get rid of esc in the menu button")

> don't like the tab style here, remove the shadows, make them similar to the ones for the view mode switching

I removed the shadows from the inventory tabs.

> I'm not liking any of the iner shadows. get rid of all of that

I kept the hairline outlines (secondary buttons, tray selection) and the hover fills.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/b923f5d0-0.webp "I'm not liking any of the iner shadows. get rid of all of that")

> give secondary buttons the same bg as the sheet

Hover and press lay a light tint over that fill, so the button still reacts.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/2502dd23-0.webp "give secondary buttons the same bg as the sheet")

> also why do these have differnet delays from each otehr. there should be no delay after clikcing

I took this to mean the map's lock button, the target icon next to the minimap (mouse look in third person, lock on Tom otherwise).

> these should be secondary buttons

> The X state should have the same bg color as the resting state

> make all the round buttons smaller on desktop, but keep this size on mobile

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/64c62359-0.webp "make all the round buttons smaller on desktop, but keep this size on mobile")

> bring in the latest from main. then move the target cursor mode to the top left with the other settings and prefs

> Then move the minimap down so it overlaps with the mode switcher buttons, where the bottom edge of it is aligned to the middle of the mode switcher buttons

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/2d02095f-1.webp "Then move the minimap down so it overlaps with the mode switcher buttons, where the bottom edge of it is aligned to the middle of the mode switcher buttons")

> we'ge got different list card styles. find similar patterns like this an unify

The Writing list now uses the same row as the About work list.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/2d10681a-0.webp "we'ge got different list card styles. find similar patterns like this an unify")

> I want to add granularity to the dark / light mode. show a dropdown for that, that shows UI mode, game Mode. UI mode would jhave dark and light, game mode would have Morning, Day, Evening, Night as nested items
>
> (Icon)
> UI mode          Dark >   List
> Game mode        UI >   List
>
> Secondary text shows the current setting, list is items with a check for the curret one.
>
> Show this menu on hover

The sun/moon chip in the top-left pill now opens a menu when you hover it (a click works too, for touch).

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/9b0437e1-0.webp "I want to add granularity to the dark / light mode. show a dropdown for that, that shows UI mode, game Mode. UI mode would jhave dark and light, game mode would have Morning, Day, Evening, Night as nested items (Icon) U…")

> I want to set the default game mode to be dark. add "system" to UI mode and "Auto" to Game mode -- change that to "Game time of day" and UI mode to "UI theme"

I've made all of these changes.

> There's a delay on hover, make it instant

> Keep the menu open after clicking

> Hover out of the menus should close them, but also ensure that hovering through the menus doesn't accidentally collapse them

![The theme menu: UI theme and the town's time of day](https://www.tomjohn.design/images/content/tomjohnville/progress/theme-menu.webp "Hover out of the menus should close them, but also ensure that hovering through the menus doesn't accidentally collapse them")

> Let's make it so walking into a building or scene selects that scene in the sidebar, and for buildings, the button doesn't showup under the achievements, ir stacks on top of the core Tom one, and the closing it gos back tothe tom one, and then closing that closes the sidebar.

I updated docs/ui-system.md to describe walking in and the stack.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/de2d7f7f-0.webp "Let's make it so walking into a building or scene selects that scene in the sidebar, and for buildings, the button doesn't showup under the achievements, ir stacks on top of the core Tom one, and the closing it gos back…")

> It should slide in from the right over the current sidebar. the icon would pusk over the Tom one back to it's og spot and be aligned with the edge of the sidebar

Closing (its button, its ×, or Esc): the details slide off to the right, uncovering About, and the building's button rides away on their edge; tom's button…

> turbo speedo and what the port and shadercam also count

> and should open on entry

> same with camping

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/1c8fc5a7-0.webp "same with camping")

> When i click on a building I still want to see it's interior before I select one of the options

Clicking a building now opens its walls and roof while Go here and Details are showing, the same way opening its scene does.

![A building's interior, picked](https://www.tomjohn.design/images/content/tomjohnville/progress/more-403.webp "When i click on a building I still want to see it's interior before I select one of the options")

> Items inside of buildings when clicked should also keep the building interior visible

Things inside a building now keep it open when you click them.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/c91b8e53-0.webp "Items inside of buildings when clicked should also keep the building interior visible")

> Projects and buildgins should all get this treatment

The check now walks Tom into Vercel, Pilgrimage, What the Port, shadercam, Turbo Speedo and the campsite.

> I need the animation to be a fade over and out for the current sidebar, and a fade in for the new one. Make the move a lot less distance, just make the content shift

Bug fixed along the way: closing a scene with a click could make it vanish instead of fading, because the fade hadn't started yet.

> THe camera should not unlock from the character inside of a building if it was locked going in

> Double close buttons

Fixed: there's now only one close button.

> I think we need to redo the sidebar UX. Having the buttons move over on selection isn't working for me. Let's explore different patterns in paper (link)

I've laid out four sidebar patterns on the Sidebar page, one per row, each on desktop and phone.

![A Paper board: the side panel's rail](https://www.tomjohn.design/images/content/tomjohnville/progress/sidebar-rail.webp "I think we need to redo the sidebar UX. Having the buttons move over on selection isn't working for me. Let's explore different patterns in paper")

> Try some tabs across the top, horizontal buttons at the top, an anchored sidebar on the very edge that spans the full height, back buttons for the space navigation, etc. Also be sure to show how it would work on mobile

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/ce0ad5c7-0.webp "Try some tabs across the top, horizontal buttons at the top, an anchored sidebar on the very edge that spans the full height, back buttons for the space navigation, etc. Also be sure to show how it would work on mobile")

> I think the rail works best, but we can make it so that it's transparent when collapsed and goes dark on hover. aslo we could move the controls that are in the top left to the bottom right.
>
> I also want to see this same treatment with the panel and rail on the left

I've added two new rows to the Sidebar page: the rail on the right with your changes, and the same thing mirrored on the left.

> okay, build it with the left side rail

The rail (new SideRail.tsx): it runs the full height of the left edge, 64px wide, and nothing in it moves; top; bottom.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/8f0d100e-0.webp "okay, build it with the left side rail")

> Make it so that selecting a building also opens the details and walks there. it used to work like this, bring it back. Remove the 2 button options showing on click unless its not a building or scene

![The side panel open on a scene](https://www.tomjohn.design/images/content/tomjohnville/progress/more-410.webp "Make it so that selecting a building also opens the details and walks there. it used to work like this, bring it back. Remove the 2 button options showing on click unless its not a building or scene")

> I think the mobile selection and display of buildings isn't great. Instead of everything only being in a bottom sheet, I want to try adding a paginated horizontal list of cards, that could be swiped through and would move the camera to that location. Each item in that card list would be one of the buildings on the row, And would have a button to expand to see details. Tapping a building on the map would expand and those that buildings' card, but not the bottom sheet until the details are tapped or the card is swiped up. Let's explore this in paper: (link)

Decisions for you (they're also pinned as callouts on the board): this needs your sign-off, because it changes the UI system; camera under the sheet; theater…

![Building cards to swipe on a phone](https://www.tomjohn.design/images/content/tomjohnville/progress/more-419.webp "I think the mobile selection and display of buildings isn't great. Instead of everything only being in a bottom sheet, I want to try adding a paginated horizontal list of cards, that could be swiped through and would mo…")

> Too many different interactions to get into the details of places. Let's get rid of rhe horizontal pagination but keep the collapsed card look. We don't need this  , but take this and show a gallery of images about the project at the top of the card, with dots inside of the image, then tapping the card would expand the sheet. There would be a close button on the right side of the card, tapping it would get rid of the cards. We'll need a persitent bottom nav like what's shown here: (link)

I've added a new board, "Building card · gallery, tap for the sheet", next to the earlier one on the Portfolio mobile page.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/a0063f74-0.webp "Too many different interactions to get into the details of places. Let's get rid of rhe horizontal pagination but keep the collapsed card look. We don't need this , but take this and show a gallery of images about the p…")

> This card and the bottom sheet would cover the bottom nav options. those are only there when the page is collapsed

I've updated the board: the bottom nav now shows only when nothing is open, and the card and sheet sit over the bottom of the screen in its place.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/405d7877-0.webp "This card and the bottom sheet would cover the bottom nav options. those are only there when the page is collapsed")

> Also on mobile map would zoom out the camera all the way and show icons for locations, not the minimap that's currently in place

I've added a board on the Portfolio mobile page called "Map · zoomed all the way out, places as marks".

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/0e3e4acc-1.webp "Also on mobile map would zoom out the camera all the way and show icons for locations, not the minimap that's currently in place")

> I want those icon to show up when the camera zooms out a ways in all modes as well. I actually think this zooming out would be a better UX for desktop as well vs having a scaled asset.

I've added a board, "Zoomed out · marks in every view, desktop too", next to the phone map board on the Portfolio mobile page.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/2e76cb44-0.webp "I want those icon to show up when the camera zooms out a ways in all modes as well. I actually think this zooming out would be a better UX for desktop as well vs having a scaled asset.")

> The initial launch needs to be pushed over to the edge of the screen, the sidebar can slide in and push the panel over when everything loads.

> Add a collapse button to the top of the sidebar rail above my avatar

I tested opening, collapsing and ⌘] in the browser, with About and with Vercel open.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/7e5786d9-0.webp "Add a collapse button to the top of the sidebar rail above my avatar")

> I don't like how the buttons are circular when resting, square wwhen not, and have a line for selection indication. Let's make them always circular, and add a circle around the icon area when selected, 2px offset 1px border when active.

The rail's buttons are now always round.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/ee10f4df-0.webp "I don't like how the buttons are circular when resting, square wwhen not, and have a line for selection indication. Let's make them always circular, and add a circle around the icon area when selected, 2px offset 1px bo…")

> The suggestion for 3rd person makes sense. Start to show the icons around here:  . have them fade in and out quickly and scale up slightly

I've added these numbers to the saved notes for this direction.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/3cc76930-1.webp "The suggestion for 3rd person makes sense. Start to show the icons around here: . have them fade in and out quickly and scale up slightly")

> I don't need that divider line. The X implies that they can be stacked if multiple are selected. This isn't the case, so the x should be on the panel, to the right of the expand button for each panel.
>
> Also, instead of the places being a new entry and a new panel in the list, let's make them clidren of the top one -- change the logo in the sidebar on the top to correspond to the current panel, and when it's nested, add a back button to the left of the title. The x button would still close it altogether and reset to the "tom" panel default icon in the top.
>
> So this also removes the collapse button I just asked for

Fixed along the way: Tom's face in the rail loaded a few seconds late, because it started off-screen while the rail slid in.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/29f52038-1.webp "I don't need that divider line. The X implies that they can be stacked if multiple are selected. This isn't the case, so the x should be on the panel, to the right of the expand button for each panel. Also, instead of t…")

> Don't need double project icons here Get rid of the secondary text next to the project title. The project image should fill the circle same as the avatar

All four fixes are in.

> Padding here can be decreased to 16px on both sides

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/c346e0f9-0.webp "Padding here can be decreased to 16px on both sides")

> There's a weird transition when the sidebar collapses  -- it looks like it's not going fully off the screen and is stopping at the rail, but the rail only shows on hover, so it leads to it peeking thourgh before disappearing

![The side panel collapsing to its rail](https://www.tomjohn.design/videos/tomjohnville/side-rail.mp4 "There's a weird transition when the sidebar collapses -- it looks like it's not going fully off the screen and is stopping at the rail, but the rail only shows on hover, so it leads to it peeking thourgh before disappea…")

> Did you build the mobile cards? Also, we'll need to let the map zoom out more at al levels -- maybe like 15% more

To answer your question: no, I haven't built the mobile cards.

![A place card over the map on a phone](https://www.tomjohn.design/images/content/tomjohnville/progress/more-429.webp "Did you build the mobile cards? Also, we'll need to let the map zoom out more at al levels -- maybe like 15% more")

> make these 8px apart and a single rounded button group when the rail isn't visible.

The bottom four buttons (search, day/night, sound and lock) are now one rounded pill while the rail is collapsed, and all the rail's buttons are 8px apart.

> The sidebar collapses down all the way off the map, and then comes back, because the focus stays on the active item. the focus needs to not stay there

What was happening: clicking a rail button left focus on that button.

> The sidebar shoudn't shift the camera position when it expands and collapses

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/c330ac9e-0.webp "The sidebar shoudn't shift the camera position when it expands and collapses")

> I want the images in the cards to not be limited by 6. I also want clicking on the images in the gallery to open that galery image, vs clikcing on the card. Also the images should be sized to fit inside of the card, and videos should autoplay in that as well.
>
> Zooming out the map or pressing the map button should have the map vertically centered. Right now it's aligned to the top of the page.
>
> I want the card that shows up on selection of a building to fade in and up from the bottom of the screen, like a 100px y offset. Close should push it down. and fade out. Move the X to the top right of the card
>
> The truck and camper and macindash and prism and other projects should also have cards on selection with sheets.

Selection always goes through the card: tapping a place while the sheet is open now lowers the sheet and shows the card.

> Get rid of the image loading the gallery on tap, that's a mistake. But there's also some situations where tapping on the location loads the bottom sheet vs the card. I think it's when you tap on something while you have a sheet expanded. I need the selection on mobile to always be that card, and then a sheet eventually. Also, add a X to the right side of the header of the sheet, the gesture isn't obvious enough.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/9d3df15f-0.webp "Get rid of the image loading the gallery on tap, that's a mistake. But there's also some situations where tapping on the location loads the bottom sheet vs the card. I think it's when you tap on something while you have…")

> Inventory and achievements also need this -- there needs to be an inbetween card that gives an overview of each, so you can peek into it.
>
> Also the theme switcher should be changed to be a modal over the page with the options, not a dropdown.

> Show a few items in each "gallery"

Achievements and inventory are paged.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/2657fc73-0.webp "Show a few items in each \"gallery\"")

> I want the about Tom one, the one that's shown in the intro to also have a peek card. Make it have the top part about me and be floating vs a sheet. Tapping it would show the full tom sheet. This will align all of those for mobile.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/87176919-0.webp "I want the about Tom one, the one that's shown in the intro to also have a peek card. Make it have the top part about me and be floating vs a sheet. Tapping it would show the full tom sheet. This will align all of those…")

> This recent change to the them UI was meant only for mobile  . on desktop is was supposed to stay the menu

On desktop, the day and night button opens the hover menu again, the way it did before 245.

> those buttons on mobile are too short

Both changes are in, for the phone modal only: taller buttons; icons for Dark and Light.

> Replatce the word dark and light with the icons.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/a83e2b23-0.webp "Replatce the word dark and light with the icons.")

> The initial loader for the mobile site should be in the card, not the sheet. The "welcome to /welcome back to Tomjohn ville is only for the loader. not for the standard card. Add a details button to the right of just that first card, that would expand the sheet.
>
> the achievement cars should show the achievement cards, sorted by most recent first. The inventory should show the inventory items. For these, show multiple in the cover photo area, not just one at a time.
>
> Bottom sheets should animate in from the bottom of the screen, the card behind it should fade out and scale down a but behind it.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/2168eba1-1.webp "The initial loader for the mobile site should be in the card, not the sheet. The \"welcome to /welcome back to Tomjohn ville is only for the loader. not for the standard card. Add a details button to the right of just th…")

> icons should bhe i nthe desktop menu as well

The desktop menu now uses the moon for Dark and the sun for Light: in the list; in the "UI theme" row; for screen readers.

![Third person in the light UI](https://www.tomjohn.design/images/content/tomjohnville/progress/more-441.webp "icons should bhe i nthe desktop menu as well")

> They need labels on the desktop

On desktop the moon and sun now sit beside the words "Dark" and "Light", in the list and in the "UI theme" row.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/3973c655-0.webp "They need labels on the desktop")

> the x on those doesn't need a border. tertiary button

![Outfits in the inventory](https://www.tomjohn.design/images/content/tomjohnville/progress/more-456.webp "the x on those doesn't need a border. tertiary button")

> on load the card shouldn't disappear, and there shouldn't be a details button until the map is loaded, or a close button

Fixed: the card no longer disappears when the town opens, and the loading card has no Details or ×.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/75593bf3-0.webp "on load the card shouldn't disappear, and there shouldn't be a details button until the map is loaded, or a close button")

> The about page content should be the same as the about panel in the app, with the exception of the intro text.

The rail button works: tooltip "Full page" at the foot, and pressing it opens /about.

![The site as pages](https://www.tomjohn.design/images/content/tomjohnville/progress/more-474.webp "The about page content should be the same as the about panel in the app, with the exception of the intro text.")

> I think we should make it a button in the left rail, on the bottom. it would load the site in the full page experience, which works basiaclly like the map one.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/5717b012-1.webp "I think we should make it a button in the left rail, on the bottom. it would load the site in the full page experience, which works basiaclly like the map one.")

> When I swipe to close a place card on mobile it shouldnt then bring up the card. I want to be able to see a place selected without either blocking the view. Swiping down on the card should also push it off the screen

Both changes are in, and I tried them on a phone-sized screen.

![A place card's gallery on a phone](https://www.tomjohn.design/images/content/tomjohnville/progress/more-486.webp "When I swipe to close a place card on mobile it shouldnt then bring up the card. I want to be able to see a place selected without either blocking the view. Swiping down on the card should also push it off the screen")

> Each of the work case stuides has a different layout. The Basedash one for example has the macindash and then the video, Vercel Just has pretty much nothing but images, etc.
>
> I want each to have a common layout for what shows at the top of the case study. It should go:
>
> CTAs
> Table of role and location
> Paragraph intro
> Projects
> - Project cards
> Talks
> - Talk Cards
> Gallery
> - 6 random images/videos
> About (don't show 2 titles)
>
> Get rid of the "in this scene".

Anything else (Writing, Basedash's "Montreal meetup" note, the studio's client logos) comes after About.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/dc091b99-1.webp "Each of the work case stuides has a different layout. The Basedash one for example has the macindash and then the video, Vercel Just has pretty much nothing but images, etc. I want each to have a common layout for what…")

> Change /about to /s
>
> Add my socials to the header to the right of my name. Remove the about button from the header. Add a chat and contact button to the right, have the tom chat UI appear as a right sidebar.
>
> When in a case study, esc should go back.
>
> Make the breadcrumb say "Expereince" or "project" etc. not about

All five changes are in: About moved to /s, your socials sit beside your name, Contact opens chatGPTom as a right sidebar, Esc goes back on case studies, and…

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/31a8eef4-1.webp "Change /about to /s Add my socials to the header to the right of my name. Remove the about button from the header. Add a chat and contact button to the right, have the tom chat UI appear as a right sidebar. When in a ca…")

> I want to replace the loaders in the UI and site with tsomething based on this: (link)
>
> but I want tomodify it so that it's not circles but a square grid -- more like a dither loader

I've replaced the site's loaders with a square-pixel dither loader based on Flicker.

![Dither loaders](https://www.tomjohn.design/images/content/tomjohnville/progress/more-495.webp "I want to replace the loaders in the UI and site with tsomething based on this: but I want tomodify it so that it's not circles but a square grid -- more like a dither loader")

> Contact and Chat are two separate buttons, contact would be just a prefilled message into the chatgptom

Chat and Contact are now two separate header buttons, and chatGPTom has been told to recommend X first.

> Also, for contact, I want to recommend that people reach out on X for a chat - that's the best way to get in touch with me.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/3811ebff-0.webp "Also, for contact, I want to recommend that people reach out on X for a chat - that's the best way to get in touch with me.")

> Update all of the CTAs to be more obvious, like "visit Basedash" with an external link icon on the right.

> Actually just make them "Basedash (ext link icon)" "Github" StarCount(in chip) Ext icon"

> Add a link to vercel in the header of the vercel one. Change the description to :
>
> I've been a Staff Designer at Vercel since November of 2025. Can't share a lot of the things I've worked on thus far, as some of it still isn't live yet or it's not something I can talk about. But I worked on the AI Gateway (link) team for the first few months and then joined v0 (link) in January of 26. My main focus has been on unifying v0 with Vercel overall, working on details ranging from icons and interactions to pricing and positioning.

> The achievement page should have text about the achievement. use Staff Product Designer formally, in the paragraph it's fine to be more casual. Remove the table from tomjohn design -- make the CTA on tomjohn deisgn "Contact me"

![My studio's panel in the light UI](https://www.tomjohn.design/images/content/tomjohnville/progress/more-499.webp "The achievement page should have text about the achievement. use Staff Product Designer formally, in the paragraph it's fine to be more casual. Remove the table from tomjohn design -- make the CTA on tomjohn deisgn \"Con…")

> Actually the header should be a sidebar rail to match the one on the map site. The top would link to the home page, and there would be icons under it for Experience, work, Gallery, ChatGPTom, Contact.  Then add a map button to the very bottom of the rail with the theme button as well as search

The standalone pages now have a left rail like the town's in place of the header, and Search sits under chatGPTom in both rails.

> Actualyl for both, move search up to th top area under the last item on the top left rail secton.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/62fc9b20-1.webp "Actualyl for both, move search up to th top area under the last item on the top left rail secton.")

> Make the chat and contact panels on the left not the right

How do you want to go on? I can: try again in a few minutes.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/6cf845a2-2.webp "Make the chat and contact panels on the left not the right")

> The sidebar should be black -- it's showing as dark grey

I measured both in the current build, and each comes out as pure black (rgb(0, 0, 0)): the rail, the chat panel and its message box on the pages, and the…

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/73790561-0.webp "The sidebar should be black -- it's showing as dark grey")

> I need a sign out button. For some reason my testing account is locked in.
>
> Also rename inventory to "You" add the sign out button on the bottom of that

> I need a sign out button. For some reason my testing account is locked in.
>
> Also rename inventory to "You" add the sign out button on the bottom of that

> I need a sign out button. For some reason my testing account is locked in.
>
> Also rename inventory to "You" add the sign out button on the bottom of that

Inventory is now called "You", and members get a Sign out button at the bottom of it.

![My outfits in You](https://www.tomjohn.design/images/content/tomjohnville/progress/more-756.webp "I need a sign out button. For some reason my testing account is locked in. Also rename inventory to \"You\" add the sign out button on the bottom of that")

## Going 3D

> I want to add in 3rd person view that follows the character around. I'm also contemplating not allowing deselection of the main character at all so that a click is always acted on by the viewer.

I read through the camera, input and sprite code.

> We'd maybe need to abandon the sprite based approach and just go to a 3d rigged model. It already exists, I'm not sure we're getting much value from it and the pixel shader.

> This would make it look more like an RPG game, and the mobile would default to this camera layout. It would also make driving the truck better

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/f62791cf-1.webp "This would make it look more like an RPG game, and the mobile would default to this camera layout. It would also make driving the truck better")

> add it to the switcher on the bottom right

I added a third option, Follow, to the view switcher at the bottom right, next to Iso and Top.

> okay this isn't bad, but I need you to futher research and implement good 3rd person camera controls, the follor distance, how it works with the vehicles. I want this to feel really close to how a 3rd person view would look in a game like GTA, and you can reseach and implement that.

Nothing is committed yet.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/ecfb553c-1.webp "okay this isn't bad, but I need you to futher research and implement good 3rd person camera controls, the follor distance, how it works with the vehicles. I want this to feel really close to how a 3rd person view would…")

> okay this is good but the mobile controls are way too sensitive, and don't work well in 3rd person.

> We'll need to update the character model. It's terrible now that it's not pixelated. I need you to      use thes photos for reference and generate a 3d character that can better represent me vs the one that was good for pixel art

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/93715c4f-0.webp "We'll need to update the character model. It's terrible now that it's not pixelated. I need you to use thes photos for reference and generate a 3d character that can better represent me vs the one that was good for pixe…")

> how should the 3rd person controls work on a laptop with a touchpad? should we make the mouse control the camera?

I'd keep the cursor free rather than making the mouse steer the camera GTA-style, and use the touchpad's own gestures for the camera instead.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/092e2a93-0.webp "how should the 3rd person controls work on a laptop with a touchpad? should we make the mouse control the camera?")

> no, I think we're good with this. but we also need to make the controls run on mobile vs walk

If you stopped it, or started it through Conductor's Run button, that explains it and I've left it alone.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/947716be-0.webp "no, I think we're good with this. but we also need to make the controls run on mobile vs walk")

> I was more talking about the proportions. The one you have there is still really rough. I'd like a character that doesn't look like he's made of baloons, also, the clothes in the photos I sent can be ignored. I just could only find some with the right proportions. I don't want you to only construct my character out of 3d basics, I want you to find a way to make a good looking 3d mondel that matches my proportions but doesn't obviously show the 3d shapes and feels like a real character

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/32a43470-0.webp "I was more talking about the proportions. The one you have there is still really rough. I'd like a character that doesn't look like he's made of baloons, also, the clothes in the photos I sent can be ignored. I just cou…")

> The head for example loojs like an egg. the legs are bizarre. I'm not saying wha tyou made isn't something, but it;s just not what i'm looking for

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/a5ee4f6c-0.webp "The head for example loojs like an egg. the legs are bizarre. I'm not saying wha tyou made isn't something, but it;s just not what i'm looking for")

> okay. I think we need to decide some things. Hyper realisitic asset - no. I don't want that either. I just want it to not look like it's made of primitive shapes. There has to be a middle ground. Something with smoother lines, that feels like it can be stylized but has real-ish looking geometry.

What this is: MakeHuman's free (CC0) human mesh, generated at your proportions: tall, lean, long legs, smaller head.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/27e39429-1.webp "okay. I think we need to decide some things. Hyper realisitic asset - no. I don't want that either. I just want it to not look like it's made of primitive shapes. There has to be a middle ground. Something with smoother…")

> That's too realisitc. Also the clothes look like theyre painted on. I want it to feel like a character, not like a character model

I'd stop here and settle the direction with you before building a third version.

> more like fortnice and pixar, yes, but not copying those types

> here's some examples that feel close to what I'm thinking

Thanks, these make it concrete. What they share, and what I'd aim for: stylised anatomy, not realistic anatomy; sculpted, subdivided surfaces; pixar-like faces.

> how close could you get with primitives?

Honestly, about halfway, and it depends on what "primitives" means.

> let's try a proof. don't fixate on the anatomy or muscle tone, I just need it to be more indicative of the silhouettes I'm thinking of

Here's the proof, built entirely from blended primitives: each body part is several shapes melted into one continuous surface, and the clothes are separate…

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/d55f47d5-0.webp "let's try a proof. don't fixate on the anatomy or muscle tone, I just need it to be more indicative of the silhouettes I'm thinking of")

> I think this is a workable direction. I have lots of thoughts on the head and overall torso proportions, but there's obviously room to make it work and look decent. rig it up so I can see it in the app

The new character is live in the app.

![The realistic me from behind](https://www.tomjohn.design/videos/tomjohnville/realistic-back.mp4 "I think this is a workable direction. I have lots of thoughts on the head and overall torso proportions, but there's obviously room to make it work and look decent. rig it up so I can see it in the app")

> okay, lets keep riffing on this. The face and neck are weird, so let's ignore that for now, but focus on the composition of the body. You need to find and compare this to actual character shapes, like the ones I pasted in before. You made this in blender?

To your question: the shapes aren't sculpted in Blender.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/c015cfcf-0.webp "okay, lets keep riffing on this. The face and neck are weird, so let's ignore that for now, but focus on the composition of the body. You need to find and compare this to actual character shapes, like the ones I pasted…")

> the shoulders look super odd, the composition of the chest and upper torso relative to them isn't done well. It should look like the arms are not giant logs on the side of a tiny torso.   look at this for example, the shoulders also appear to be more blocky, with the arms coming out of them

Nothing is committed.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/5d7dfe23-0.webp "the shoulders look super odd, the composition of the chest and upper torso relative to them isn't done well. It should look like the arms are not giant logs on the side of a tiny torso. look at this for example, the sho…")

> don't stop working until the obvious issues are resolved. I know you can take photos of every angle and compare it to actual character models. This isn't good yet.

I think you're right, and I'd rather say so now than burn more of your time.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/7a4a5709-0.webp "don't stop working until the obvious issues are resolved. I know you can take photos of every angle and compare it to actual character models. This isn't good yet.")

> just a quick note... your obsession with the crazy jawline and huge pecks is bizarre

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/7c8b220f-0.webp "just a quick note... your obsession with the crazy jawline and huge pecks is bizarre")

> you're treating the character like independent shapes instead of like a full mesh with deformite

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/c8df7a4e-0.webp "you're treating the character like independent shapes instead of like a full mesh with deformite")

> I'm not convinced that you can get this done effectively from scratch

![A realistic 3D model of me from the front](https://www.tomjohn.design/images/content/tomjohnville/progress/realistic-front.webp "I'm not convinced that you can get this done effectively from scratch")

> okay that works for me. use the free one

What I did to the base model: download; slimmed build; hair and skin.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/71e94f32-0.webp "okay that works for me. use the free one")

> That's way too jacked. The shirt is even hugging the buttcheecks. cmon man

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/b122bc93-1.webp "That's way too jacked. The shirt is even hugging the buttcheecks. cmon man")

> those pants are way too tight as well. also I want blue jeans and a black shirt

> why are my hands splayed out to the side while i'm walking

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/43654fb5-0.webp "why are my hands splayed out to the side while i'm walking")

> I look like I'm anorexic. And the crotch of the pants is way too high. also the shoes need work, the neck is too long, you made my arms way too thin.

The catch is that it's a faceless mannequin of about 1,200 vertices.

> and this resting pose is super gay.

> also why the heck is there a line here

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/e3f929c8-0.webp "also why the heck is there a line here")

> look at this (link)

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/e63ebeeb-0.webp "look at this")

> I like it better. I'm fine with being faceless. It'll make it easier to put on sunglasses. The issue is clothes, but I think we can solve that

The body: the mannequin's own proportions, subdivided into smooth forms.

![The same model from the back](https://www.tomjohn.design/images/content/tomjohnville/progress/realistic-back.webp "I like it better. I'm fine with being faceless. It'll make it easier to put on sunglasses. The issue is clothes, but I think we can solve that")

> okay I need hair too. find a good way of adding it vs modeling it yourself  here's a video of me that you might be able to use for reference.

From your video: short, dark brown, tapered at the sides and back, with volume on top pushed up and back. Instead of sculpting that from scratch, I adapted an…

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/122c81ef-1.webp "okay I need hair too. find a good way of adding it vs modeling it yourself here's a video of me that you might be able to use for reference.")

> okay I want to see if there's a way to apply an effect to make it look like that character is made of 3d blocks, like they're glitching through a dither texture. Almost like a shader, but I don't know the equivalent in a 3d space. it would be cool to test that out

The blocks effect works.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/f84060dd-0.webp "okay I want to see if there's a way to apply an effect to make it look like that character is made of 3d blocks, like they're glitching through a dither texture. Almost like a shader, but I don't know the equivalent in…")

> I don't want it to glitch, and I want it to be there in addition to the model, like the main model has blocks, so there would need to be some random offset. add some dialkit tuning for it so I can see how things feel

Open to try it. A DialKit panel on the right controls the blocks, your body proportions, and a toggle to show the rig.

> I also want to have controls to tun the proportions of my body. head size, arm length, etc. I want to be able to see the rig as well with a toggle

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/869e0ffc-3.webp "I also want to have controls to tun the proportions of my body. head size, arm length, etc. I want to be able to see the rig as well with a toggle")

> good defaults: Update the useDialKit configuration for "Tom" with these values:
>
> ```json
> {
>   "rig.showRig": true,
>   "proportions.head": 1.37,
>   "proportions.neck": 1.07,
>   "proportions.torsoLength": 0.95,
>   "proportions.torsoWidth": 1.09,
>   "proportions.shoulders": 1.22,
>   "proportions.armLength": 0.96,
>   "proportions.armThickness": 1.17,
>   "proportions.hands": 1.22,
>   "proportions.legLength": 0.99,
>   "proportions.legThickness": 1.09,
>   "blocks.enabled": true,
>   "blocks.size": 6,
>   "blocks.coverage": 0.38,
>   "blocks.lift": 0.18,
>   "blocks.offset": 0,
>   "blocks.jitter": 0,
>   "blocks.sizeVariation": 0,
>   "blocks.tilt": 0,
>   "blocks.shade": 0.08,
>   "blocks.parts.skin": false,
>   "blocks.parts.hair": true,
>   "blocks.parts.tee": true,
>   "blocks.parts.jeans": true,
>   "blocks.parts.shoes": false
> }
> ```
>
> Apply these values as the new defaults in the useDialKit call.
>
> also I want to be able to drag the rig points, drag the dialkit, and stop idle animations. ?
>
> Also the stopping position is terrible. Just make me stand normally with feet apart, why would you make one heel lifted.

Dragging rig joints: with Show rig on, hover a joint dot (the cursor changes to a grab hand) and drag it.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/cc566cb1-0.webp "good defaults: Update the useDialKit configuration for \"Tom\" with these values: ```json { \"rig.showRig\": true, \"proportions.head\": 1.37, \"proportions.neck\": 1.07, \"proportions.torsoLength\": 0.95, \"proportions.torsoWidth…")

> I want to explore different global lighting. give me some dialkit controls to tune it

Values are saved in your browser, so they survive the page reloads that happen on every edit.

![Moonlight on the 3D scene, with lighting dials](https://www.tomjohn.design/images/content/tomjohnville/progress/lighting-dials.webp "I want to explore different global lighting. give me some dialkit controls to tune it")

> What other options might be added to add some stylistic treatments to the scene? Edges, borders, etc. also the ground doesn't appear to be affected by the global light

Why the ground ignores the lighting: the floor is a flat, unlit color (meshBasicMaterial in Ground, PortfolioStage.tsx).

![A shader gone wrong, everything smeared in black and white](https://www.tomjohn.design/images/content/tomjohnville/progress/shader-glitch.webp "What other options might be added to add some stylistic treatments to the scene? Edges, borders, etc. also the ground doesn't appear to be affected by the global light")

> sure, add those

When a combination looks right, DialKit's Copy button gives the values to paste into DEFAULTLIGHTING (lighting-settings.ts) and DEFAULTSCENESTYLE…

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/f594276d-2.webp "sure, add those")

> the blocks idea is bad. But let's make an environment where I can tune my character without it being in the world. I want to be able to see my character, change the outfit, see the rig, see the animations for each action, and tune the rig so that it can work better. There should be a core pose rig that's used by all others, which would affect my proportions and body sizing. the other modes would just teak the nodes relative to the animation, and the app would automatically tween them to match the rest of the animation.

The character studio is ready at It only exists in development.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/368b944a-1.webp "the blocks idea is bad. But let's make an environment where I can tune my character without it being in the world. I want to be able to see my character, change the outfit, see the rig, see the animations for each actio…")

> the nodes are too tied together when modifying the rig. I also need to be able to rotate some of them and move them in x and y directions. we'll aklso need to be able to slow it down and compare to base with a ghost

Joints are independent now.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/03f980dd-0.webp "the nodes are too tied together when modifying the rig. I also need to be able to rotate some of them and move them in x and y directions. we'll aklso need to be able to slow it down and compare to base with a ghost")

> I really am just not sure anymore if this is worth the effort. I like the 3rd person, but this rig is just so frustratingly difficult to tune. Let's put it aside and revert back to the original 3d model, just soften it so it's not so obviously sharp edges. Shelf all of these new assets for later

Softening: the rig's materials used flat shading, which gives every polygon a hard edge.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/e3c54e7a-0.webp "I really am just not sure anymore if this is worth the effort. I like the 3rd person, but this rig is just so frustratingly difficult to tune. Let's put it aside and revert back to the original 3d model, just soften it…")

> okay, we can also add back a pixel look by using the shader

How it works: the follow camera used to skip the pixel pass and render at full resolution.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/5e748e68-0.webp "okay, we can also add back a pixel look by using the shader")

> we need to tune that pixel size on all of the different views. it shouldn't be different between them

Trade-off: the isometric world is no longer tied to a fixed number of texels per world unit, so its textures resample slightly while you zoom.

> in 3rd persion view the minimap should be a circle from above, dot in the middle for the character, no polygon

On phones the minimap is still hidden, so this only shows on desktop.

> I think the top view should be more like a 90 degress isometric view, like an original legend of zelda angle, if that makes sense. No perspective, no sides visible. if that makes sense

Here are 50° and 45°.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/482be1e0-1.webp "I think the top view should be more like a 90 degress isometric view, like an original legend of zelda angle, if that makes sense. No perspective, no sides visible. if that makes sense")

> make the isometric cupe taller, about 3x taller so that the icons fit in it better

The isometric slab is now 3× taller: the sides went from 14 to 42 map units, which makes the whole map about 33px taller on screen.

![Third person, behind me in front of the chapel](https://www.tomjohn.design/images/content/tomjohnville/progress/third-person-chapel.webp "make the isometric cupe taller, about 3x taller so that the icons fit in it better")

> I need to tune the pixel effect. add controls for that

I added a Pixels tuning panel.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/100a009b-1.webp "I need to tune the pixel effect. add controls for that")

> the pixel effect needs to correlate with the zoom level

In the grid below, the top row is Bayer 2×2, 4×4, 8×8, Halftone and Lines.

> same thing with the dither. I also want more properties for the dither shaderm like method, type, etc

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/8e728dd8-0.webp "same thing with the dither. I also want more properties for the dither shaderm like method, type, etc")

> Update the useDialKit configuration for "Pixels" with these values:
>
> ```json
> {
>   "size": 1.5,
>   "zoom.follow": 1,
>   "zoom.min": 1.5,
>   "zoom.max": 8,
>   "zoom.wholePixels": false,
>   "pixelated": true,
>   "dither.enabled": true,
>   "dither.method": "gradient",
>   "dither.palette": "colour",
>   "dither.strength": 1,
>   "dither.levels": 11,
>   "dither.scale": 1,
>   "dither.spread": 0.79,
>   "dither.bias": -0.04,
>   "dither.shadow": "#000000",
>   "dither.highlight": "#ffffff"
> }
> ```
>
> Apply these values as the new defaults in the useDialKit call.

Your values are now the defaults in PIXELDIALS in src/lib/isometric/pixel-dials.ts, which is the config the useDialKit "Pixels" panel reads. So this is also…

> I want to add edges to my models. can you add props for that?

One fix outside the panel: the ground grid lines were writing depth 1 mm above the ground, which produced crease speckles all over the floor.

![A debug view of the edges the shader finds](https://www.tomjohn.design/images/content/tomjohnville/progress/edges-debug.webp "I want to add edges to my models. can you add props for that?")

> in follow mode, as soon as I enter a building, the walls that are behind me and in front of the camera should disappear. Also, trees, poles, buildings, etc, should not block the view of the character.
>
> I'm also seeing a lot of flickering texture, grass popping through the road, and other visual glitches in the 3rd person mode

All three problems are fixed in the working tree.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/bbeef001-0.webp "in follow mode, as soon as I enter a building, the walls that are behind me and in front of the camera should disappear. Also, trees, poles, buildings, etc, should not block the view of the character. I'm also seeing a…")

> we need a sky texture when in 2rd person view

The third-person (Follow) view now has a sky.

![Third person with a sky, beside the truck](https://www.tomjohn.design/images/content/tomjohnville/progress/more-42.webp "we need a sky texture when in 2rd person view")

> I need to tune the edges of objects on day and night and also the shader settings when in 3rd person view. give me a dialkit for that

These only change the third-person view; the isometric view keeps its own settings.

![Third person on the grass, tuning edges](https://www.tomjohn.design/images/content/tomjohnville/progress/more-105.webp "I need to tune the edges of objects on day and night and also the shader settings when in 3rd person view. give me a dialkit for that")

> The edge of the shadow draw area is too obvious when zoomed out -- i'm not even sure what it is

That line was the edge of the sun's shadow box.

![A bridge over the river](https://www.tomjohn.design/images/content/tomjohnville/progress/river-bridge.webp "The edge of the shadow draw area is too obvious when zoomed out -- i'm not even sure what it is")

> the masking for elements behind the character in 3rd person shouldn't affect other people, small items like flagpoles, and needs to be bigger and more gradiated for buildings, but also the camer should try to move up and around buildings instead of clipping through them in exterior environments

Both changes are in and working; nothing is committed yet.

![Third person on the street](https://www.tomjohn.design/images/content/tomjohnville/progress/more-113.webp "the masking for elements behind the character in 3rd person shouldn't affect other people, small items like flagpoles, and needs to be bigger and more gradiated for buildings, but also the camer should try to move up an…")

## Buildings as my résumé

> portraits in ditherface gallery are too highoff the ground. when clicking on them and goigng to a next one, it shifts up quickly.
>
> I want the e key to open a painting when I'm in front of it.
>
> I want to see speech bubbles over the people in there with random quips and sayings about the ditherfaces.
>
> "He made this all in Figma?"
> "Extrodinary!"
> "Such craftsmanship!"
> "He was misunderstood as a child"
> "I heard his inspiration was Monet"
>
> and so on... don't make them super frequent, but enough that a few of them are in htere
>
> Also the tux is sticking off of the front of the shirt, fix that

> and add the isometric spinner and orientation thing in scenes as well. it doesn't need to be hidden

![Walking through the Ditherface gallery](https://www.tomjohn.design/videos/tomjohnville/ditherface-gallery.mp4 "and add the isometric spinner and orientation thing in scenes as well. it doesn't need to be hidden")

> the pixel settings inside of ditherface seem different

> also have me walk in there vs run

> also get rid of the swinging door

> and characters get stuck on each other

![A screen recording of the town](https://www.tomjohn.design/videos/tomjohnville/recording-gLLPi2.mp4 "and characters get stuck on each other")

> here's some better shots of the office style I want. This was my home office, i'd like the tomjohn building to have it as the them for part of it. Change the neon signs to be all white, and make it so that I can hover over them and see the name. I want to be able to see the logo pretty well. Other things you could put in there would be a shelf with shiskey on it, dark floors, vertical planks on the walls, a shelf with a 3d printer on it. The vertical slat wall isn't shown in the photos but it was planned to be built. note the desk is big the speaker layout.
>
> Add a table with some chairs around it in the same color as the desk in the room.
>
> Orient it so that the back of the chair isn't facing the door and it's to the side on the same wall as you come in.
>
> Also allow me to be able to walk in and sit at any chair in the map.
>
> Also the selection indicator isn't working for some reason.

Neon signs: all 10 client logos are white, in two rows on the back wall.

![My studio, with client logos on the wall](https://www.tomjohn.design/images/content/tomjohnville/progress/studio-logos.webp "here's some better shots of the office style I want. This was my home office, i'd like the tomjohn building to have it as the them for part of it. Change the neon signs to be all white, and make it so that I can hover o…")

> be sure to add that slatted partition wall on the one side of my desk

> those logos look a bit too big

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/94d3def7-0.webp "those logos look a bit too big")

> Change the basedash office to be a table with all of us sitting aorund it on laptops, make it more of a coworking space, not a garage. add labels so that i can hover over each person, and when I click I want to see their ditehrface.
>
> I want to make it look like montreal royal bank tower coworking    . We worked there at a pivotal time.

I renamed the files to BasedashOffice.tsx and places/basedash.ts, since it's no longer a garage.

> I don't need mine to show a hover. Also, here's more of what I want the building to be lilke. It's got arched windows, and this characteristic exterior and 2 tiered green roof
>
> also add in more of those details from the interior as well. I want it to be obvious that this is the building we're making it look like

The Basedash building is now a one-storey version of the Royal Bank building: stone walls, arched windows, and a low two-tier green copper roof.

> okay you don't have to make it like a honking skyscraper, just like allude to the building.  and keep it 1 story

> like make the arched windows and brick exterior with a 2 tiered green roof, but flatter. Imagine it as a single story building

![The Basedash coworking space, everyone around one table](https://www.tomjohn.design/images/content/tomjohnville/progress/basedash-interior.webp "like make the arched windows and brick exterior with a 2 tiered green roof, but flatter. Imagine it as a single story building")

> I want the videos building to be turned into a movie theater. ispiration here  . The screen would show tiles of all of the talks. Also the cards for tals should be more 4:3 so they fit better not 1:1

Outside, after the Rivoli: it's a black glass front with white art-deco trim and nested frames round two lit upstairs windows.

![The theater's sign on the street](https://www.tomjohn.design/images/content/tomjohnville/progress/more-11.webp "I want the videos building to be turned into a movie theater. ispiration here . The screen would show tiles of all of the talks. Also the cards for tals should be more 4:3 so they fit better not 1:1")

> Love it. I want people in the theater watching

The theater now has an audience watching, and the talk tiles show their whole picture.

> Also the sizes of the cards still don't work, find the first aspect ratio

![The theater's red seats](https://www.tomjohn.design/images/content/tomjohnville/progress/theater.webp "Also the sizes of the cards still don't work, find the first aspect ratio")

> The pilgrimage scene selection doesn't work well now that we have this change to a city environment.
>
> Could we just bring in the 3js assets of that church and render them like we do other buildings and maybe bring in a few of the characters from the game (not sprites) and have them walking around when you enter the scene (all canned) and seeing the relic?

The Pilgrimage scene is now just the game's relic chapel on its plot, and the town stays put when you open it.

![Inside the Pilgrimage chapel](https://www.tomjohn.design/images/content/tomjohnville/progress/more-60.webp "The pilgrimage scene selection doesn't work well now that we have this change to a city environment. Could we just bring in the 3js assets of that church and render them like we do other buildings and maybe bring in a f…")

> there needs to be a monk behind the altar

> clicking on the building here should work like the others, making me run to it and showing the interior with an edge highlight

Clicking the chapel now works like the other buildings: the details open, Tom runs to the door, and the interior shows from above with the roof and near walls…

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/b1395f77-0.webp "clicking on the building here should work like the others, making me run to it and showing the interior with an edge highlight")

> The vercel studio needs to look more like a studio. I want evil robot oto have more movement and be able to walk around and sit down.

The podcast studio under the board room now looks like a real recording set.

![The Vercel studio with its robots](https://www.tomjohn.design/images/content/tomjohnville/progress/more-65.webp "The vercel studio needs to look more like a studio. I want evil robot oto have more movement and be able to walk around and sit down.")

> we need to add an Asurion building. use      these photos for reference for the exterior. it's the old office on 2nd avenue in nashville, the logo has changed since but it should say asurion.
>
> This is what the interior looked like:        Put an orange spiral metal staircase on one side. make it two floors. The top floor should be the 2 desk spoke desks, the lower level should have areception desk and some offices with glass walls. Notice the carpet textures and the somewhat bright wall colors.
>
> This should also be a scene building. Make it 2 stories tall overall fit in the space next to the ditherface, make that area bigger if needed.

Now the 3D side: three curved desks per pod with spoke dividers, two monitors each, and a round light over each pod.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/36bb74eb-0.webp "we need to add an Asurion building. use these photos for reference for the exterior. it's the old office on 2nd avenue in nashville, the logo has changed since but it should say asurion. This is what the interior looked…")

> the vercel entry is way too tight. You need to push things to the side to make room to walk. there's also way too tight of a fit on the back side next to the cubes. rework the layout to be optimized for character walking, maybe break apart the desks or get rid of some things.

After this merges, the next /perf-daily could probably lower the Vercel interior's draw and triangle budgets in scripts/perf/budgets.json.

![Inside the Vercel office](https://www.tomjohn.design/images/content/tomjohnville/progress/vercel-office.webp "the vercel entry is way too tight. You need to push things to the side to make room to walk. there's also way too tight of a fit on the back side next to the cubes. rework the layout to be optimized for character walkin…")

> the floors are clipping into each other in the entrance.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/4e203eee-1.webp "the floors are clipping into each other in the entrance.")

> the logo on the outside of the building should be white

> the spoked desks are the 3 desk layouts i sent in the opriginal photos. 3 desks facing inward, each with 2 screens

> I should be able to click and select the top or bottom floors. to make it easier, have the 2nd floor only cover half of the floorplan, with a double hight ceiling over the front part of the bottom floor. have couches and such in there, offices and conference rooms under thhe desk area. make one of the offices just a ping pong table.

Logo: the "asurion" sign on the parapet is white now.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/268acbf4-0.webp "I should be able to click and select the top or bottom floors. to make it easier, have the 2nd floor only cover half of the floorplan, with a double hight ceiling over the front part of the bottom floor. have couches an…")

> okay, push out those offices further to the edge of the balcony. move the spiral staircase to the other side of the building,
>
> move the reception desk nearer the door, remove the logo on the green wall, add some more people in the lobby, add a table with an automatic espresso machine to a table by the top of the stairs.
>
> Make it so that you can click to walk up the stairs by clicking on the stairs. I got stuck coming down the stairs on the top.
>
> make it so the two people are playing ping pong.

One browser check fails: the world-layout script now reports a card at the map's origin.

> remove the big logo from the inside of the building

![The Asurion office](https://www.tomjohn.design/images/content/tomjohnville/progress/more-164.webp "remove the big logo from the inside of the building")

> add an invisible path that starts in the back of the vercel pyramid on the back corner and spirals up to the top so you can stand on it. there wou will be a platform up there that's also invisible. once you climb to the top you unlock the "give of sight" achievement and can see the invisible path. It should be 1 tile wide all the way up and have 5 spirals beofre it gets to the top. the top platform will be 5x5 tiles.

Added the invisible, walkable path from the rear corner: five spirals, one tile wide, ending at a hidden 5 × 5 platform.

![The Vercel pyramid from outside](https://www.tomjohn.design/images/content/tomjohnville/progress/pyramid.webp "add an invisible path that starts in the back of the vercel pyramid on the back corner and spirals up to the top so you can stand on it. there wou will be a platform up there that's also invisible. once you climb to the…")

> I want it to be tight against the pyrimad, and when revealed only the edge. Also let's reduce it down to 3 spirals

Updated to three spirals tight against the pyramid.

> and also only show the outline when you're on it

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/0b40241a-0.webp "and also only show the outline when you're on it")

> I need a scene page for all my talks when the talks building is selected. Bring in thall of the videos there, remove them from my tomjohn design scene selection. Also, add the logos from my clients to the tomjohn design scene one.

Done: Talks now shows all nine videos.

![The talks theater with its panel](https://www.tomjohn.design/images/content/tomjohnville/progress/more-177.webp "I need a scene page for all my talks when the talks building is selected. Bring in thall of the videos there, remove them from my tomjohn design scene selection. Also, add the logos from my clients to the tomjohn design…")

> The intradiem sign needs to be white text and blocky so it can have a light at night.

By day the white letters on the grey granite are fairly low-contrast; at night they stand out clearly.

> make it 3d as well

The Intradiem sign is now 3D: the white letters and the four-colour mark stand off the arch, the letters have black sides as you asked, and at night their…

![Intradiem's letters in 3D](https://www.tomjohn.design/images/content/tomjohnville/progress/more-644.webp "make it 3d as well")

> The sides of the letters can be black

![Intradiem's lit letters](https://www.tomjohn.design/images/content/tomjohnville/progress/intradiem-letters.webp "The sides of the letters can be black")

> Change the prism project to not being password protected, but being protected by a "black key" the black key would be granted by going into the vercel building, standing on this plant, and jumping 3 times  . Then the commandbar would pop up and ask for the passphrase "dark mode is life". Submitting that will get you the black key, which then allows you to see the prism project.
>
> Update the text of the prism project to say. "You need the black key to view this project"

Copy I also changed: Prism's text in the content file, project data, privacy page (the cookie now lasts a year instead of 30 days) and docs.

> the key shoyuld be black...

There are two ways to fix it: keep the black key's tile black while it's in the inspector; change the fade for all items.

> give it a white outline over the scrim as well. Other items probably need that as well for contrast

The outline is drawn in the same pixel pass that draws the black edges, in src/vendor/pilgrimage/components/pixel-canvas.tsx.

![The black key](https://www.tomjohn.design/images/content/tomjohnville/progress/more-697.webp "give it a white outline over the scrim as well. Other items probably need that as well for contrast")

## Arriving

> when the page reloads, bring me back to where I was

Reloading the page now brings you back to where you were.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/f70445e8-0.webp "when the page reloads, bring me back to where I was")

> I want buildings and scenes to work too

![The Pilgrimage chapel in its own world](https://www.tomjohn.design/images/content/tomjohnville/progress/chapel-world.webp "I want buildings and scenes to work too")

> update the starting position to here   and here on mobile

Updated both starting positions: desktop beside the welcome sign, mobile farther back looking into town.

![Third person by the Tomjohnville sign](https://www.tomjohn.design/images/content/tomjohnville/progress/more-167.webp "update the starting position to here and here on mobile")

> We need to work on the initial launch of the site and the guidance of how to use the game. There's very little explanation and the initital time it takes to load is too much. What I'd like to do is have a landing page that shows my 3d game model, slowly rotating, with the CTA to play the game. Clicking that would cause the world to reveal and the camera to move out into the starting position. I want it to be adynamic scene.
>
> The intro paragraph should read
>
> "This is my portfolio. Except it's not a portfolio. It's the game of my work. I hope you enjoy playing as much as I enjoyed building it. - Tom"
>
> Let's riff on this in Paper before building. (link)
>
> I need the page assets to be loading in the backfground while this screen is up, so that the launch after click is instant. I also want to work on the gameplay control guidance (I want it in the game world and plane, not a card) so that you can undersyand how to move around, and get a checkmark when you pan, scroll, zoom, and click. Basically a very simple tutorial.
>
> The initial launch could be an isometric fixed view as well, just zoomed more in so that when the game loads it zooms out to the standard camera view, but that won't work for mobuile, so we'll have to find another option there.

Added seven studies to your Paper launch page, using your actual model and exact copy.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/c062b11e-1.webp "We need to work on the initial launch of the site and the guidance of how to use the game. There's very little explanation and the initital time it takes to load is too much. What I'd like to do is have a landing page t…")

> Actually, I think the perspceive view of the billboard might be interesting to show with the charcater looking at it. could we isloate those two elements, have my character standing up in front of it looking up, with just a black bg with a very slight grid, and then when the game starts, my character would walk to his position and the game would start and load in around him

Added this direction to Paper, boards 08–10: desktop, mobile, and a transition storyboard.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/aaf857b5-1.webp "Actually, I think the perspceive view of the billboard might be interesting to show with the charcater looking at it. could we isloate those two elements, have my character standing up in front of it looking up, with ju…")

> Add the same header from the game to the top left

Updated to the latest billboard—with its planted base and four lights—in the prototype and Paper.

> let's try this out and see how it feels

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/7952605d-0.webp "let's try this out and see how it feels")

> you're not using the most recent asset of that sign. it has lights

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/a4bf9770-1.webp "you're not using the most recent asset of that sign. it has lights")

> why is everything double

My mistake: the loading image had the header, paragraph, and button baked into it, then the live UI appeared over them.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/a02f368b-0.webp "why is everything double")

> okay i want the scene on the home page to not have a full zoome and change of isometric view. it shouild be isometric, and basically just a zoomed in version of the normal loading posision, but with my walking over a bit.
>
> Also, the scene doesn't need so much of a dramatic animation of the environment, I'm expecting that the one you made will have a ton of performance issues.
>
> Let's tune that interaction specifically.

> Also the guidance in the world looks bad, get rid of it

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/e35587f9-0.webp "Also the guidance in the world looks bad, get rid of it")

> this is what I mean.

> and then when the game starts I walk over to the left, turn around, and the assets load in

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/de3d887b-1.webp "and then when the game starts I walk over to the left, turn around, and the assets load in")

> Remove the text, remove the button. Just have the   sign on the middle of the screen on page load, have the character walk up to it and look up, and when the assets for the game are loaded, show the button. Have a loading indicator on the bottom of the screen that says loading tomjohnville.
>
> The only thing I want the initial site to load is that sign and that character. We need to make sure that nothing delays those from rendering so we can buy time to load the rest of the site while the interaction is happening.

![A Paper board: arriving at the billboard](https://www.tomjohn.design/images/content/tomjohnville/progress/billboard-arrival.webp "Remove the text, remove the button. Just have the sign on the middle of the screen on page load, have the character walk up to it and look up, and when the assets for the game are loaded, show the button. Have a loading…")

> okay this isn't bad. but the transition from the black area to the loaded state is too suddent. I'd like a fade in or something. Also, there's a strange white blob in the middle of the road that is visible for a brief moment and then disappears.
>
> my character should walk over to the original default loading spot.

Fade in: pressing Play now shows the town straight away underneath the black intro, and the intro fades out over one second.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/888d18f4-0.webp "okay this isn't bad. but the transition from the black area to the loaded state is too suddent. I'd like a fade in or something. Also, there's a strange white blob in the middle of the road that is visible for a brief m…")

> This is where I want the starting position

The new starting spot, the run and the header are all in: run; social links on the opening screen.

> and he should run to the position

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/891ca3d1-0.webp "and he should run to the position")

> Add back in the top left menu items to the initial page.

> let's make a better header. This one isn't working for me. I'm thinking something with a bg that runs across the full page. work in paper.  (link)

I've put four new boards on the Paper UI system page, numbered 22a–d.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/58ea5503-0.webp "let's make a better header. This one isn't working for me. I'm thinking something with a bg that runs across the full page. work in paper.")

> It;s still dropping a lot of frames even on the initial loading screen. can we make that scene not affected by the other assets downloading?

What was dropping the frames: it was the page starting the town up behind Tom, more than the downloads themselves.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/d6c8c33a-0.webp "It;s still dropping a lot of frames even on the initial loading screen. can we make that scene not affected by the other assets downloading?")

> (link) but make the social links in a menu that shows on click of my name. Also add a link to the other pages of the site "Work, writing, etc"

I've added two new boards next to your 22d, built on your edited version (black bar, name only, 24px avatar).

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/471e64c3-0.webp "but make the social links in a menu that shows on click of my name. Also add a link to the other pages of the site \"Work, writing, etc\"")

> I want links to the about page and we also need to make a contact page that uses the form I added to mobile.

I've updated the header boards and drawn a contact page in Paper.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/29126ebe-0.webp "I want links to the about page and we also need to make a contact page that uses the form I added to mobile.")

> shared header

I've added 23c · About page with the shared header to Paper: the About page under the same bar, with About selected.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/0bc183c5-0.webp "shared header")

> okay, let's make the square that starts the game the entry to the game itself. allow me to click around on the blank page and have the character walk, highlight the starting square when the game is ready with a radiating pulse on the plane of the game map, slowly radiating out. add some text above it (not in game) that says "visit Tomjohnville", make the character be walking in this mode, and have him walk over tot the tile. as soon as I enter, fade in the music and the game map.
>
> Actually, this screen can be used to teach the player.
>
> Have a single cell highlighted when the page loads, add text that says "move me around by clicking", then after click on that tile, give a success sound, and then show text underneath for, or use wasd / arrow keys to walk. Then after the user does that, more success sound, zoom in and out by pinching or cmd + scroll. Then add a game item, like a bench, then say sit on this bench.  then once the user does that, show the final tile with the pulsing and load the world

The opening screen is now a short tutorial.

> also add a skip button to the bottom middle of the screen -- secondary button, when the game assets are loaded

> The top of the about page needs some work. bring that into Paper and I want to riff on it, with the header as well

I've rebuilt the top of the About page in Paper as editable layers with the shared header, plus three riffs, in a row (24a–d) on the UI system page.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/ec91909f-2.webp "The top of the about page needs some work. bring that into Paper and I want to riff on it, with the header as well")

> (link) I like this, show the work underneath and writing

I've extended your trimmed 24d into the full page.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/c54d171c-2.webp "I like this, show the work underneath and writing")

> Get rid of the work title, sort by recency (literal not added)

I've updated 24d: the "Work" title is gone, Asurion and Turbo Speedo Video are out of the grid, and the other six are sorted by when the work happened, most…

> Don't show Asurion or turbo speedo

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/7372fb17-0.webp "Don't show Asurion or turbo speedo")

> Make wahat the port 2nd

What the Port? is now second, next to Pilgrimage in the top row. The grid order is: pilgrimage; what the Port?; shadercam.

> Good. Show the helper text all the way to the left of the screen, 24px away from the edge. Add a checkmark when one is done, and make it move up and fade out. Have the chair fade in, be sure to show the context menu on selection. Use the keyboard hint UI to show those arrow keys and wasd keys ( make them look like keys)
>
> Add a scene after you make it into the world "welcome to Tomjohnville"

Keycaps showing on their own in a text line breaks the UI system's rule that they only appear inside buttons and tags.

> Also I want a longer more celebratory sound for getting into the game world

> okay, build this header and update the site

I made a few changes beyond the boards: contact copy; esc.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/dda87af3-0.webp "okay, build this header and update the site")

> *left middle of the screen

Left middle: the helper text now sits against the left edge, 24px in, centred vertically.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/309222e5-0.webp "*left middle of the screen")

> make these look like the keys, meaning like stacked like they are on a keyboard.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/d5d15c8e-0.webp "make these look like the keys, meaning like stacked like they are on a keyboard.")

> You can do better than that. Riff on those side items with all the states, the interactions, motion, etc in Paper. Also show me how it would work on mobile because these steps aren't the same for touch devices.
>
> (link)

I've added four boards (13–16) to the welcome page in Paper, below the sign studies.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/ae3503c1-1.webp "You can do better than that. Riff on those side items with all the states, the interactions, motion, etc in Paper. Also show me how it would work on mobile because these steps aren't the same for touch devices.")

> more like this (link)

The rail: built from your version of board 13 and the "waiting" column you've been editing on board 14.

> also add + and - to zoom in and out

> Also I want you to load a few of my sayings and the footstep sounds as early as you can so those happen with the game

> Move asurion above tomjohn design in the work history

Asurion (160): the About page's work history now reads Vercel, Basedash, Asurion, Tomjohn Design.

> hover box here isn't right, the boxes in the same row as each other should share a common height

> Also add back the random work grid. Update the all writing page to match this about root list design

> and add an "all work page" that's a big list of the screenshots videos and images from my projects on a page, but make that grid about 1/2 the normal size and full page width, with the same grid sizing variation, but also add in that some of the square ones can be 2x2 instead of 1x1

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/9694eed4-0.webp "and add an \"all work page\" that's a big list of the screenshots videos and images from my projects on a page, but make that grid about 1/2 the normal size and full page width, with the same grid sizing variation, but al…")

> move skip to the lower left, about 80px under the bottom of the dots, but fade it in and only after the full assets have loaded. update these to use the new header design that's also part of this workspace.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/bd32c209-0.webp "move skip to the lower left, about 80px under the bottom of the dots, but fade it in and only after the full assets have loaded. update these to use the new header design that's also part of this workspace.")

> update page bg to be black, add a back button to the top of the page above the title, when scrolled add the page title to the middle of the header with a breadcrumb

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/9a0a5e36-0.webp "update page bg to be black, add a back button to the top of the page above the title, when scrolled add the page title to the middle of the header with a breadcrumb")

> That work should be randomized,

> The header of that page with the title needs to have the same width as the headers on other pages. also make the grid a little more dense

> and add an all work button under the gallery on the about page

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/65fbbec7-0.webp "and add an all work button under the gallery on the about page")

> This is great. I'd like the bench to be in the game world as well, put it right here
>
> Add a hover to all the tiles in that mode, a very faint 10% white box. Might be good to have that in the game as well

Here's the round of changes: bench in town; hover square; fade in.

> Also the initial game assets need to load with a fade in, not pop in.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/4a307952-0.webp "Also the initial game assets need to load with a fade in, not pop in.")

> Let's make the header less bold in the game mode, show the left and right buttons as buttons with no bg. only use this bolder version in the about and related pages

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/aad60a67-2.webp "Let's make the header less bold in the game mode, show the left and right buttons as buttons with no bg. only use this bolder version in the about and related pages")

> Those buttons should have a fill. They should be using the button style that exists elsewhere in the app

> also, in the game, there should also be sound, achievements, etc. buttons that slide in from the right

> They should fade in and push these

Contact is a modal. Clicking Contact in the header, in town, the intro or on About and the other pages, opens it over the page you're on.

> I want contact to be a modal. Not a page navigation. thought there would be a /contact page.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/3b84b979-1.webp "I want contact to be a modal. Not a page navigation. thought there would be a /contact page.")

> update the load order and budgets relative to this. for this first image, I need it to load fast, I don't care what standard that is. just make it fast. fix the ineffieiencies

What was slowing the first image: a hidden 300 ms wait in React; the worker downloading its code one file after another, seven round trips in a row; shader…

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/3c07dace-0.webp "update the load order and budgets relative to this. for this first image, I need it to load fast, I don't care what standard that is. just make it fast. fix the ineffieiencies")

> the mobile version needs to be worked on. it shouldn't have been isometric

That reminder was a fallback I set while waiting for the follow-camera map. The map came back earlier and the work it was for is done: phones open in third…

> also the tips and tricks need to be pushed to the right a bit more

> meaning the onboarding guidance

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/a1795fe9-0.webp "meaning the onboarding guidance")

> joysticks are missing on mobile onboarding

The joysticks now show on the mobile onboarding.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/6a52a582-1.webp "joysticks are missing on mobile onboarding")

> The site should be able to retain state, like where you were when navigated back to it. Right now it resumes and restarts the game. If there has to be a loader for that, we need to make it so the character is in the center of the screen and you restart where you left off, not all the way at the beginning

Coming back to the site now picks up where you left off instead of starting over.

> the loading indication should be near the character, not on the left edge of the screen. that's only for onboarding

When the page is only loading, "Loading Tomjohnville" now floats just above Tom's head instead of on the left edge.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/490840a9-0.webp "the loading indication should be near the character, not on the left edge of the screen. that's only for onboarding")

> jsut say loading

The label above Tom now just says "Loading", with the dots after it.

![The loading screen](https://www.tomjohn.design/images/content/tomjohnville/progress/more-243.webp "jsut say loading")

> Change the initial page load to have the sidebar expanded.
>
> I also want to start showing the game assets as soon as they are loaded, but not add them to the initial draw. I still want the sign and the figure to load, I'm just thinking the scene could be revealed incrementally.
>
> My thought is that it should go like thIs:
>
> Page loads fast, just the figure and the sign, with the sidebar expanded
>
> The sidebar slowly loads in the about content, revealing it with a fade in for each element from the top down, which will give a bit of time for the assets to load. I want to treat the text at the top like they're agent messages streaming in with a loader on the left. Each message would "load" for 150ms, then stream in each word, quickly.
>
> The new copy at the top would be:
>
> (Loader)
>
> I'm Tom, I’m a product designer living on the road.
>
> I design v0 at Vercel, and make tools, experiments, and the occasional pixel portrait.
>
> Welcome to Tomjohnville. My expirimental resume-as-a town.
>
> (The 5 step and guidance show up here in the sidebar, not in the canvas. remove the dots, just make them each a message to the user)
>
> (New guide copy)
>
> You can click anywhere to walk around -- try it out.
>
> The arrow keys and keyboard work too
>
> Click and drag to move the camera, or you can pan with spacebar. I made this site to have the same controls as a Figma, btw.
>
> So that means you can zoom in and out by holding cmd (windows control) and scrolling in. Or just the + and - work too,
>
> Click on anything to interact with it. Take a seat (make the seat radiate)
>
> You're ready. See you around!
> (button, visit Tomjohnville -- have the character run over to the site)
>
> (show the skip as soon as the site is ready, Hide the guide copy and slide up the real about page content.)
>
> As soon as the as

Not done: revealing assets as they load.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/75c88e66-0.webp "Change the initial page load to have the sidebar expanded. I also want to start showing the game assets as soon as they are loaded, but not add them to the initial draw. I still want the sign and the figure to load, I'm…")

> Get rid of the header from that sidebar on initial load. Make clikcing anywhere validate the step. Move the skip all the way to the bottom, call it "skip tutorial"
>
> I'm trying to make this look like text streaming from an agent. With a loader per row and a pause, and then the text streaming in.

All four changes are in, and I re-ran the whole tutorial in a headless browser through to entering the town.

> There needs to be a confirmation text in the "chat" for success, and the keyboard and mouse iconography.
>
> Set the initial zoom level after load to this
>
> Add my avatar above the first message.
>
> Get rid of the "My expirimental..." part.
>
> I need something in the game UI to give stronger hints on what to do.
>
> Also, as I explore (once the game assets load) I'd like to reveal a little of the map, like a 4 square radius around my character. But we do need to restrict the tutorial area to roughly this area

Everything you asked for this round is in.

![Tap anywhere, on a phone](https://www.tomjohn.design/images/content/tomjohnville/progress/more-312.webp "There needs to be a confirmation text in the \"chat\" for success, and the keyboard and mouse iconography. Set the initial zoom level after load to this Add my avatar above the first message. Get rid of the \"My expiriment…")

> The map reveal is very janky. I'm picturing that it reveals a full tile around the character, not a mask. This version is very laggy. maybe we can preload the other tiles in the tutorial like we do with the sign.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/134ab026-0.webp "The map reveal is very janky. I'm picturing that it reveals a full tile around the character, not a mask. This version is very laggy. maybe we can preload the other tiles in the tutorial like we do with the sign.")

> Make me run in this scene the same as the others

Tom now runs in the arrival the same way he does in the town.

> I'll make custom icons for all of these states. Add them as placeholders and the UI for it here:
>
> (link)

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/2562f2c0-0.webp "I'll make custom icons for all of these states. Add them as placeholders and the UI for it here:")

> This is great. I'll make the icons. how does it work on mobile

> I want the bottom sheet to be opened. the text will have to scroll automatically so it stays in view

On phones the tutorial now runs in an open bottom sheet, and the conversation scrolls itself so the newest text stays in view.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/b9eccd1c-0.webp "I want the bottom sheet to be opened. the text will have to scroll automatically so it stays in view")

> The assets didn't load and they're not centered in the top of the screen. Only show the bottom sheet when the top assets have loaded, and in that case make it move in from the bottom of the screen.
>
> Also panning the top area doesn't work, tapping doesn't seem to work.

The sheet now waits for the sign and Tom, then slides up from the bottom.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/5bd4f251-0.webp "The assets didn't load and they're not centered in the top of the screen. Only show the bottom sheet when the top assets have loaded, and in that case make it move in from the bottom of the screen. Also panning the top…")

> It loaded all at once. Where's the interaction?

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/7a3898b7-0.webp "It loaded all at once. Where's the interaction?")

> no... this was incogneto

Both are fixed: the buildings now finish loading during the tutorial, and the conversation scrolls all the way down to Visit Tomjohnville.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/724bf988-0.webp "no... this was incogneto")

> these building models showed up after the tutorial was done. The whole point is to load these during the tutorial.
>
> also, it didn't scroll enough so I couldn't see the visit button

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/7f42c29d-0.webp "these building models showed up after the tutorial was done. The whole point is to load these during the tutorial. also, it didn't scroll enough so I couldn't see the visit button")

> get rid of that tree that blocks the bench, and the light right behind the sign. also get rid of some of the shrubs so they don't block it.
>
> Also I'm still not seeing the text fade in on mobile. it just all shows up at once.

All three asks are done: the bench is in the clear, the text fades in on your phone, and nothing waits for the buildings any more.

> I've been waiting now for like 20 seconds for the buildiong assets to load on mobile. What is blocking those? That can't happen

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/bf94fbc6-0.webp "I've been waiting now for like 20 seconds for the buildiong assets to load on mobile. What is blocking those? That can't happen")

> the text loads all at once. WHAT IS GOING ON. This should not be that hard. The text should load, in sequence, each with a loader, on mobile. THE SAME AS DESKtop.
>
> Also,  allow the bottom sheet to be resized.
>
> Remove the zoom slider i nthe instructions, it looks like UI.

I found the building bug using your phone's own reports, fixed it, and finished the other three asks.

> I'm stil lwaiting on the buildings. How are those not loading

> There's absolutely no sign that they will ever load

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/9d601fcb-0.webp "There's absolutely no sign that they will ever load")

> The mobile load is somehow worst now. The screen redrew 3 times, sometimes with the grass, sometimes without, and then the text never faded in

The words fade on the compositor now, the buildings are paced, and the extra diagnostics are in.

> but just appeared

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/5e32182b-1.webp "but just appeared")

> looks the same

Your recording matches the crash exactly: about 5s in; about 7s in; about 9s in.

> screen recording

![A screen recording of the town](https://www.tomjohn.design/videos/tomjohnville/recording-pNekJX.mp4 "screen recording")

> the text didn't stream in, but at least the scene didn't jank out. What other methods for revealing the text can we use.I'm fine with a staggered opacity

I switched to a staggered opacity reveal that the page paces itself, so a freeze now pauses the text instead of making it land all at once.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/2e5d96df-0.webp "the text didn't stream in, but at least the scene didn't jank out. What other methods for revealing the text can we use.I'm fine with a staggered opacity")

## A street and a campground

> Change the vercel building to be black. make the gates not barred.
>
> Add hover tags to all of the buildings. Add scene selection when they are clicked just like the project scenes.
>
> Let's work on how the project scenes are designed in paper. We have some here but they're not great. (link)
>
> I think we should change the way panning works, make it more like a canvas so you can freely flick and pan around with a trackpad. Get rid of the space jump and make that a pan tool, like a canvas control.

Things you might trip over: space is still the brake while driving; double-tapping Tom on a touch screen still jumps; that's now the only way to jump; mouse…

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/6e0d705b-0.webp "Change the vercel building to be black. make the gates not barred. Add hover tags to all of the buildings. Add scene selection when they are clicked just like the project scenes. Let's work on how the project scenes are…")

> I want the buildings to be more cohesive. We could make a street with sidewalks, with the buildings running down it, and we could add some more buildings that aren't work but are related to things I like later on. For now we can just add some placeholder rectangles.
>
> For now, just make a single street that''s straight in front of me when the page loads. Behind, I want to add a campground with trees and that's where I want the camper parked. Pull tree models from the pilgrimage repo, just not the sprite based ones. It'll just be a small campground, but make sure it has grass, foliage, and a gravel pad for the camper.
>
> Have the truck parked in a spot beside the camper.
>
>  For the work and non-3d elements, we should start working on how those would integrate with buildings. Having them be giant floor tiles doesn't make sense anymore.
>
> For the "city", I'm thinking thr wtp could be in a central square, like a sculpture would be. There would be a park with pilgrimage and turbo speedo in it -- most likely near the campground so the grass makes sense.
>
> prism can be moved into the vercel building. Put it here   instead of the couches. Also make the backlight to the vercel logo on the entry wall white, not blue.
>
> We should also add some landscaping, some more city elements  so the buildings feel like they're all tied together. You might have to try a few "city" layouts to see how things should feel.

I've built the town. From home you now look straight down one main street, with the campground behind you.

![The first street, from above](https://www.tomjohn.design/images/content/tomjohnville/progress/first-street.webp "I want the buildings to be more cohesive. We could make a street with sidewalks, with the buildings running down it, and we could add some more buildings that aren't work but are related to things I like later on. For n…")

> i still want to be able to pan around when I select a scene. I like these scene versions in paper: (link) (link)
>
> I want the interaction to be less locked in, and still allow panning around with out it forcing it to be centered in the left side. The information would fade in from the right. show a close / back button to allow for it to be deselected easily. I'd also like the details to be able to be collapsed to the right so that you can see the scene more easily without the content blocking it.

On phones: the details are still a bottom sheet.

> With this change, walking out of a scene wouldn't close it, you'd need to close it. clicking on a scene would open it

> you'd need to close it by clicking on a button

![The Vercel scene panel beside the early town](https://www.tomjohn.design/images/content/tomjohnville/progress/more-7.webp "you'd need to close it by clicking on a button")

> Add in models for my two boys playing around the camper in the woods. I want them catching bugs, picking up sticks, and riding bikes around the campground.     . I also want my wife there watching them, sometimes wandering in to the camper. Sitting on a blue lawn chair, talking on the phone, cooking in the camper kitchen.

Your wife and two boys are now at camp, each doing their own thing and then picking something new.

![The campground with the camper and truck](https://www.tomjohn.design/images/content/tomjohnville/progress/campground.webp "Add in models for my two boys playing around the camper in the woods. I want them catching bugs, picking up sticks, and riding bikes around the campground. . I also want my wife there watching them, sometimes wandering…")

> I want my wife wearing black leggings and quarter zip sweatshirt that's this color in this photo

![My family's characters up close](https://www.tomjohn.design/images/content/tomjohnville/progress/more-25.webp "I want my wife wearing black leggings and quarter zip sweatshirt that's this color in this photo")

> I want to add the ability to work in the office in the camper, and add an idle animation that does this.     the monitor pulls down from abover the dresser, and the top of the dresser slides to become a desk. There's a folding chair that I use and a keyboard and mouse. I want to add the ability to click on that desk / press e and set up the desk for work.
>
> Also I think the floor space in the camper is still just a little off from reality. things seem too close together. it might be good to make the camper and the truck slightly bigger as I think the proportions are stlightly off -- but double check that.

The camper desk is in: click the dresser or press E in the bedroom, and Tom sets it up, sits in the folding chair and works.

![Me working at the camper desk](https://www.tomjohn.design/images/content/tomjohnville/progress/more-35.webp "I want to add the ability to work in the office in the camper, and add an idle animation that does this. the monitor pulls down from abover the dresser, and the top of the dresser slides to become a desk. There's a fold…")

> The person fly fishing in the river shoudn't be there. I should be able to walk up to the river and press e to fly fish in it.

I took out the person fishing in the river.

![Me fly fishing in the river](https://www.tomjohn.design/images/content/tomjohnville/progress/fly-fishing.webp "The person fly fishing in the river shoudn't be there. I should be able to walk up to the river and press e to fly fish in it.")

> one note, there's a leaf that covers the slid out area when it's open

The leaf: instead of the storage tray rising, a leaf now lies on the dresser top, hinged at its back edge.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/64e22200-0.webp "one note, there's a leaf that covers the slid out area when it's open")

> I want to add in pedestrians. I'm actually not sure if I want the scene to be a road as much as a walking path, so that there can be people but the truck can't get to them. Like more of a city center. The road for the truck then would lead to the gravel road, and I'll layer in more gaemplay later about what it can do

The main street is now a car-free walking street with 16 townsfolk on it.

![The plaza with its checkerboard](https://www.tomjohn.design/images/content/tomjohnville/progress/more-87.webp "I want to add in pedestrians. I'm actually not sure if I want the scene to be a road as much as a walking path, so that there can be people but the truck can't get to them. Like more of a city center. The road for the t…")

> what number of people could we add before it starts to affect performance?

On this Mac, about 80 people in town (roughly 30 on screen at once) is where it starts to show.

> also women don't need to all be wearing dresses. most shouldn't -- that's a ditherface thing.
>
> people don't need to cast shadows at all. don't animate people at all once they;re out of view. they don't even have to be drawn.
>
> The characters can be simplified a bunch. some can be sitting. some can just stand still. there could could be alot more benches, tables, cafe style seating,

> we can also simplify all character models, reduce the count of polygons across the board

![The plaza with café tables](https://www.tomjohn.design/images/content/tomjohnville/progress/more-96.webp "we can also simplify all character models, reduce the count of polygons across the board")

> okay so what's our upper limit now

For characters, the limit is now about 40 walkers and several hundred people sitting or standing still.

> for characters

> okay so how many should we add here. We can also really really simplify the models on far out zoom levels -- again we're applying a shader here so details are not important when there's any distance

I'd put the town at about 100 people, and that's what it now has: 104, with 30 walking, 46 sitting and 28 standing.

> aslo add some more of the cafe benches to the street. add some variability there so the models aren't always so structured

![The whole town from above](https://www.tomjohn.design/images/content/tomjohnville/progress/town-overview.webp "aslo add some more of the cafe benches to the street. add some variability there so the models aren't always so structured")

> The NPC walk cycle seems off, like they're sliding on the ground when they walk

I've fixed the sliding and given the standing and sitting townsfolk idle movement.

> I also want NPCs that are not walking to have some movement. Like they're talking to each other, shifting their sitting position, eating food at a table, etc. Not frozen.

![People standing on the street](https://www.tomjohn.design/images/content/tomjohnville/progress/more-111.webp "I also want NPCs that are not walking to have some movement. Like they're talking to each other, shifting their sitting position, eating food at a table, etc. Not frozen.")

> I just came back into a session and all these NPCs were in a line around me. Do they just walk in a circle?

The line around you comes from how they deal with Tom.

> why can't they wander?

They can. Nothing in the engine stops it; loops were just the cheapest safe option when the townsfolk went in (103). Loops give you three things for free: no…

> They don't have to walk up and down the full road, each could have some area they're walking in, or a cycle of walking, talking, sitting, etc

Performance: routines are planned a walker at a time in idle moments while the crowd loads, about 150 ms in total and under 10 ms per step on my machine.

> It doesn't have to be pathfinding, they can be fixed

![A cafe with umbrellas on the street](https://www.tomjohn.design/images/content/tomjohnville/progress/cafe.webp "It doesn't have to be pathfinding, they can be fixed")

> I want to add some thigns to the opposite side of the street based on my interests.
>
> I was thinking a Ramen shop, called Tomkatsu's Ramen, a bakery called "hondo's" where There's fresh baked bread by my wife, with cinamin rolls.
>
> I'd like a fly fishing store, a coffee shop and roastery, and a bookstore.
>
> I'd like them each to have a unique rural feel to them, something you'd find in a small town setting or maybe something industrial that's been repurposed. It would also be great to have a coworking spot, with lots of plants, that's been themed to look like switchyards (look it up)

Added six walkable spots across the street: tomkatsu’s Ramen ; hondo’s ; creekside fly shop .

![A shop with a green awning](https://www.tomjohn.design/images/content/tomjohnville/progress/more-150.webp "I want to add some thigns to the opposite side of the street based on my interests. I was thinking a Ramen shop, called Tomkatsu's Ramen, a bakery called \"hondo's\" where There's fresh baked bread by my wife, with cinami…")

> I don't like the rooflines on those make them look more like a commercial building, aslso try to have them share a wall vs being separated.
>
> The sweritchyards one is okay, but cary the tables a bit more, give it more of an intereting layout, and have it have a very big glass garage door type opening to the main area, with a cleaner transition into the inside area. also have people working there and interacting with all of these space.
>
> Hondos bakery should have a bernese mountain dog face logo.   use this and make it more illustrated. with just the head. The sign would be perpendicular to the door. and hang out over the street.

Corrected: the five shops now occupy the row across from Ditherface.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/31dca760-1.webp "I don't like the rooflines on those make them look more like a commercial building, aslso try to have them share a wall vs being separated. The sweritchyards one is okay, but cary the tables a bit more, give it more of…")

> these should not be in the park area, there's multiple buildings they could have taken over. The two next to the writing building could have been merged into a blank one, the entire row across from the ditehrface is where these were meant to go

> I’ve identified the row across from Ditherface: the two card storefronts just past the square plus the large blank building. I’ll put the shops along that row and keep the workyard facing the square. By “the two next to Writing,” do you mean those two card storefronts, or the small blank buildings on either side of Writing?
> The blank buildings flanking Writing

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/e50dadf2-0.webp "I’ve identified the row across from Ditherface: the two card storefronts just past the square plus the large blank building. I’ll put the shops along that row and keep the workyard facing the square. By “the two next to…")

> These buildings aren't good. They're all basically the same. there's no character, the layouts aren't realistic or make sense. I want you to take a crack at them. also the signs out front are bad. the coworking one is closest to being fine, but it needs more character.

The buildings. They still share walls, but each has its own height, depth, roof, materials, storefront, sign, back and interior: creekside fly shop…

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/0c29ae63-0.webp "These buildings aren't good. They're all basically the same. there's no character, the layouts aren't realistic or make sense. I want you to take a crack at them. also the signs out front are bad. the coworking one is c…")

> The hondo logo cI need you to generate 5 different logos for that dog one. The one you made is too photo accurate. I want it to be more illustrative

Five more illustrative, head-only options.

![The shops across the street](https://www.tomjohn.design/images/content/tomjohnville/progress/more-157.webp "The hondo logo cI need you to generate 5 different logos for that dog one. The one you made is too photo accurate. I want it to be more illustrative")

> remove the 2 placeholder buildings at the end of the road

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/5d14d2cf-0.webp "remove the 2 placeholder buildings at the end of the road")

> the stipple shader only goes to he horizon line in 3rd person mode. Also, rename it to shadercam

Fixed the horizon cutoff: stippling now fills the whole portal in third-person mode.

![The shadercam doorway on the street](https://www.tomjohn.design/images/content/tomjohnville/progress/shadercam-portal.webp "the stipple shader only goes to he horizon line in 3rd person mode. Also, rename it to shadercam")

> Make the writing building into a library building - I want it based on the design of the donelson public library building.           in Nashville. this is right down the roadfrom where I lived. My work would be inside of it, on the walls like how the Basedash work is in there as well, but there would be a flagpole with an american flag, the distinctive facade, and 2 stories. There would be bookshelves on the 2nd floor and some smaller one s on the first with couches. (link)

Replaced the writing building with a Donelson-inspired library: white brick, perforated facade, folded roof, American flag, two walkable floors, bookshelves…

![The library, two stories of shelves](https://www.tomjohn.design/images/content/tomjohnville/progress/library.webp "Make the writing building into a library building - I want it based on the design of the donelson public library building. in Nashville. this is right down the roadfrom where I lived. My work would be inside of it, on t…")

> Add a "Writing" to the outside as a 3d sign. Shorten the flag pole and put it next to the lampost i nthe commone area. Move the stairs to the right side of the building. Add some small kids tables to the upstairs, have kids reading in there. Add people to the model overall.
>
> Also wghere's my work on the walls? It needs to be visible on the default angle, so the back wall or right one.

Moved your work to the upstairs back wall, fully visible from the default cutaway angle.

> oh it's on the lower level. It needs to be visible, that's getting covered.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/baa91f57-1.webp "oh it's on the lower level. It needs to be visible, that's getting covered.")

> the writing sign is 30% too big. The flag pole needs to be moved over a little. The top area has a bookshelf hanging over the edge. Put those in rows and move the tables closer together.

![The camper cut away](https://www.tomjohn.design/images/content/tomjohn-design/camper-cutaway.webp "the writing sign is 30% too big. The flag pole needs to be moved over a little. The top area has a bookshelf hanging over the edge. Put those in rows and move the tables closer together.")

> Need to add a scene for the library that lists all of my articles.

The Donelson Library scene now lists all 13 of your articles, newest first.

> the title of that scene should be writing, not donelson library. get rid of the details about the library as this can be a standalone page

![The library with its writing list](https://www.tomjohn.design/images/content/tomjohnville/progress/more-198.webp "the title of that scene should be writing, not donelson library. get rid of the details about the library as this can be a standalone page")

> make the campsite perpendicular with the street

The campsite now meets the street at a right angle.

![The campsite turned to face the street](https://www.tomjohn.design/images/content/tomjohnville/progress/more-250.webp "make the campsite perpendicular with the street")

## The truck

> Research the turing radius of the f450 and the max speeds and reverse speeds. I think it's not quite right and i'd like it to be accurate. Also, I think the side profile is too boxy -- htere's a slight contour on the sides of the cab and arch on the roof, and I think there's some lights up there missing as well. refine the designs of that vehicle more

Numbers come from Ford's 2026 Super Duty pickup specifications unless noted.

![The F-450 model from every side](https://www.tomjohn.design/images/content/tomjohnville/progress/more-85.webp "Research the turing radius of the f450 and the max speeds and reverse speeds. I think it's not quite right and i'd like it to be accurate. Also, I think the side profile is too boxy -- htere's a slight contour on the si…")

> when I get in the truck, send my kids and wife into the camper. they can watch TV. If I hook up, they can get into the truck and then the slides can close. Have them go outside as soon as the truck is within the bed going down position priximity, so they're close. i don't want any situation where my kids can pretend get run over by the truck.

When you get in the truck, your wife and kids now go into the camper and sit on the sofa facing the TV, and the TV lights up.

> also the pedestrian barriers should stop the truck as well.

> for testing this you need to be intentional. actually try to run them over to be sure it can't be done

![The truck and camper on the drive](https://www.tomjohn.design/images/content/tomjohnville/progress/more-89.webp "for testing this you need to be intentional. actually try to run them over to be sure it can't be done")

> make them walk faster when this is happeneing. have them keep watching tv for about 20 seconds after I get out of the truck

Both changes are in, and the local server at has picked them up.

> They should only come out when the truck is in a revers position in front of the camer and within the radius

"Lined up to back in" means: the truck's hitch is ahead of the camper's nose; the truck is within about 1.5 m of the camper's centre line; it faces within 45°…

> The bed and cover should also only come down when in this position

> wife needs to move faster to get in the truck, doors need to open, also I need to be able to drive whenever near the truck, not just the driver door.

All three changes are in, and the local server at has them; reload to see them.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/527d75c9-0.webp "wife needs to move faster to get in the truck, doors need to open, also I need to be able to drive whenever near the truck, not just the driver door.")

> I want the truck driving mode to come up from the bottom, like a dash that would have the speedometer, rpm, gears etc. The isometric controls would be behind it in a section. I don't need to see a sterring wheel or anything, just a way of showing some of the car stats. also I want a rear view camera to come down from the top middle when you're backing up. It should be from the perspective of the back cab, pointed down at the bed
>
> Start in paper (link)

I've mocked up the dash and the bed camera on the Paper truck page.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/a34cba8d-0.webp "I want the truck driving mode to come up from the bottom, like a dash that would have the speedometer, rpm, gears etc. The isometric controls would be behind it in a section. I don't need to see a sterring wheel or anyt…")

> put something interesting on the tv, and have my wife in the kitchen doing something vs watching with the boys

The TV now shows a live rocket launch, and your wife cooks in the kitchen while the boys watch.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/148c4c75-0.webp "put something interesting on the tv, and have my wife in the kitchen doing something vs watching with the boys")

> make the guages on the left, controls in the middle, make it full width, so the isometric controls are in the same spot they're in normally, this is just behind them

![The truck bed from the rear camera](https://www.tomjohn.design/images/content/tomjohnville/progress/more-95.webp "make the guages on the left, controls in the middle, make it full width, so the isometric controls are in the same spot they're in normally, this is just behind them")

> We don't need the f450 truck driving part. make the back mirror shorter, like 180px tall. I want a dashed line in the middle that bends with the direction of the steering wheel for alignment. Make sure it's also getting the pixel and dither shaders.
>
> I'm not loving the dials overall in the game world. I think I want to change those to be buttons -- here they would be like a button that presses and has a light on inside of it, more like an actual car button. Let's explore changing those dials out when it's more of a bianry or radio button, but maybe keep them when it's a variety of options. Add controls for headlights, folding in the side mirrors. There might be other controls that could be added.
>
> The dash Shouldnt be hideable.

That's too steep: no horizon and no bumper.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/ef3d84aa-0.webp "We don't need the f450 truck driving part. make the back mirror shorter, like 180px tall. I want a dashed line in the middle that bends with the direction of the steering wheel for alignment. Make sure it's also getting…")

> these don't need labels. The icons will need some more work, but they can also be stacked in a grid

> remove the command for hitch, there should just be an unhitch

> also add a backup camera for when the trailer is hooked up, that would be from the top of the back of the trailer

> The label for the dial should be adjacent to the spot that it points to

Everything from this round is updated on the Paper truck page.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/a28b9223-3.webp "The label for the dial should be adjacent to the spot that it points to")

> The line shouldn't show for the trailer one

I've taken the guide line off the trailer camera.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/c8b72550-1.webp "The line shouldn't show for the trailer one")

> yes, those should switch as well. The view should shift up with the camera like it does for the side panel

The dash, both rear cameras and the lit buttons are built and working in the app.

![The truck's dashboard](https://www.tomjohn.design/images/content/tomjohnville/progress/more-100.webp "yes, those should switch as well. The view should shift up with the camera like it does for the side panel")

> I want to make a game that startes if you have the camper hooked up and drive to the end of the road. The game would be a series of campgrounds that you have to back into spots for. Each would be increasingly difficult.
>
> Score is based on how straight you make it in the spot, and how many times you have to shift front and back.
>
> There's a priximity to the blackwater tanks and electrical hookups to consider, both of wich are on the left side. there's one black outlet behind the axles.
>
> Slides also have to be considered, you can't open slides into obsturctions, power pedistals, etc.
>
> The camgrounds will have have an entry, a road, and a target spot. your job is to get into the spot with as few turns as possile. 5mph speed limit is in the campground, you have to keep it under 10 or you get a ticket.
>
> The campgrounds would have trees, lightposts, other campers, kids riding bikes, pedestrians, golf carts, pets, picnic tables, sloped banks, outbuildings, bridges, etc. Reuse as many assets as posisble from the main game (excluding buildings)
>
> Some will be pull through (early levels) , others will be back in.
>
> Let's start with a few levels, but I need you to look at the geometry of the rig, and let's generate some basic levels to test the idea.

Trees, lamps, benches, picnic tables and fire rings are the town's own.

> firepits can't overlap sites. the golf cart in front of the site on #3 is next level difficult. save that for later.

Fire pits: Two were on or against sites: cedar Hollow (3); juniper Ridge (5).

> show me all of the 14 campground maps in paper, I want to see the spots.
>
> (link)

There are 5 campgrounds, not 14.

![A campsite plan for the parking game](https://www.tomjohn.design/images/content/tomjohnville/progress/more-102.webp "show me all of the 14 campground maps in paper, I want to see the spots.")

> Show me how the scores are calculated?

A site is scored the moment you unhitch on it.

> Show me these visually in paper

The scoring is on the "park game" page in Paper, as one board called "How a site scores", below the campground plans.

![The parking game in the town](https://www.tomjohn.design/images/content/tomjohnville/progress/parking-shot.webp "Show me these visually in paper")

> I need you to spend a lot I need you to spend the day going through each element on mobile, and investigating sluggish performance or dropped frames. the camper, for truck for example can crash the site when it's selected on mobile, and the truck plus the camper is crazy slow and laggy.
>
> I want 60fps for driving, walking, zooming, selecting scenes, etc and want to ensure that all panels swipes and gestures are as smooth as possible. Also, you'll need to likelt have some better camera orientation on mobile after onboariding so the character is in view after that is done.

Mobile pass done: it's faster everywhere I measured, phone opening a scene and swiping the sheet now mostly hold 60fps, and Tom is in view after onboarding.

![The truck's card on a phone](https://www.tomjohn.design/images/content/tomjohnville/progress/more-413.webp "I need you to spend a lot I need you to spend the day going through each element on mobile, and investigating sluggish performance or dropped frames. the camper, for truck for example can crash the site when it's select…")

> The simplified truck model is too simplified.

I rebuilt the simplified truck, the one other visitors' trucks are drawn as on a phone, while they're small on screen, or before the full copy has been built.

> Give it black hubs, try to leave in some of the body curves.

I made all three changes to the simplified truck: black hubs, the bed interior gone with a black cover that's always on, and some of the F-450's body curves…

> Remove the bed interior, just give it a solid black bed cover that's always on

![The truck from every side](https://www.tomjohn.design/images/content/tomjohnville/progress/truck-lineup.webp "Remove the bed interior, just give it a solid black bed cover that's always on")

## Things to find

> i want to add in more achievements that are harder to find. Things like time on page, running a mile, discovering sprint, catching a fish, sitting down at the desk in the camper, hooking up the camper, sitting in 20 different chairs, switching to all view modes, clicking my social profiles.
>
> If you can find other items in the game taht would make fun easter eggs, then do that as well. use the objects in the map and try to make things interactive and dynamic. Things like picking up a drink in ditherface, being able to press e in front of a ditherface to see it, etc.

I've added 17 harder achievements as two new sections at the end of the achievements drawer, Feats and Secrets, plus several new things to do in the world.

![A secret doorway in the dark](https://www.tomjohn.design/images/content/tomjohnville/progress/more-90.webp "i want to add in more achievements that are harder to find. Things like time on page, running a mile, discovering sprint, catching a fish, sitting down at the desk in the camper, hooking up the camper, sitting in 20 dif…")

> Better names, in order you listed them:
> Bounce rate
> 1/26 marathon
> MPG
> Everything is chair
> Perspective
> Socialite
> Pixel perfect
> Sonic
> Locked in
> Ready to roll
> Angler
> Cheers
> Oppenheimer
> Slow down
> Take on me
> I've seen the edge

The names only live in src/lib/isometric/discoveries.ts.

![The achievements drawer](https://www.tomjohn.design/images/content/tomjohnville/progress/more-92.webp "Better names, in order you listed them: Bounce rate 1/26 marathon MPG Everything is chair Perspective Socialite Pixel perfect Sonic Locked in Ready to roll Angler Cheers Oppenheimer Slow down Take on me I've seen the ed…")

> Add a   (link) ebike to the campground area. I can ride it and make it so that it can go 28mph. around the map.

I've added the Lectric XP4 Long-Range e‑bike in Pine Green to the campground.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/0871f3df-0.webp "Add a ebike to the campground area. I can ride it and make it so that it can go 28mph. around the map.")

> Add this claymation diarama to my office, right on this desk.   The change I want to make is that I want my character to be in the scene, not the one in the photos.
>
> I want it to be interactive. and when clicked, I want it to load a secret scene, that has an achievement (requiem for a Tuesday) and has this youtube video. (link) in the sidebar. Clicking on the scene would load the model into the middle of the sceen so you could look at it -- slowly rotating.
>
> this would unlock an achievement, which I later want to allow you to render the world in a claymation shader -- though I'l have to build that. Just the achievement for now.

I've put the claymation diorama on the open end of your studio desk, with your character sitting on the bed.

![The claymation diorama, opened](https://www.tomjohn.design/images/content/tomjohnville/progress/diorama.webp "Add this claymation diarama to my office, right on this desk. The change I want to make is that I want my character to be in the scene, not the one in the photos. I want it to be interactive. and when clicked, I want it…")

> I want the caption to read. Could a depressed person make this? Check out my sweet Claymache.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/9b0658a1-0.webp "I want the caption to read. Could a depressed person make this? Check out my sweet Claymache.")

> When that's open It should have it's own shader behavior, right now it's scaling with the scene. I want it to have this scale.  , also, some of the edges are shimmering while it rotates. I want to be able to drag it around to rotate it, Mouse interactions should not go through the scrim.
>
> It should expand from the location on the desk.
>
> Esc should close it. It should use the same interactions as the card modals.

The diorama now opens in a reusable item inspector: a modal that works like a card.

> For context, this modal behavior will be for in game items, for a future inventory and inspection flow. I want you to make sure that it will work for things like the macindash as well as other items that the player will have to look at. You can call it a component treatment and create rules for it so that it's reusable.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/2fe6e591-0.webp "For context, this modal behavior will be for in game items, for a future inventory and inspection flow. I want you to make sure that it will work for things like the macindash as well as other items that the player will…")

> make it accelerate way quicker.

Quicker acceleration: the bike now gets from 0 to 28 mph in about 1.4 seconds; before, it took about 4.

> I also want to be able to clip through non building items

![Me on the e-bike](https://www.tomjohn.design/images/content/tomjohnville/progress/ebike.webp "I also want to be able to clip through non building items")

> Make it so that going into ditehrface unlocks the tux outfit. Going into the fishing store unlocks the fishing outfit (you can't fish wihtout it) .  Add a table  right here with a chessboard on it. Add the relic in the chapel as an inventory item, when you equip it, you hold it over your head and it shines a light and everyone within 5 tiles kneels for you as you walk around.

All four changes are in and working in the running app.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/41a74205-0.webp "Make it so that going into ditehrface unlocks the tux outfit. Going into the fishing store unlocks the fishing outfit (you can't fish wihtout it) . Add a table right here with a chessboard on it. Add the relic in the ch…")

> There's a significant delay when yo uget the rabbit shoes. They should come up in the full modal view right away, and the inventory panel should be opened.

The shoes still take about 1.1 s to fly into place and show their name.

![The Turbo Speedo shoes](https://www.tomjohn.design/images/content/tomjohnville/progress/rabbit-shoes.webp "There's a significant delay when yo uget the rabbit shoes. They should come up in the full modal view right away, and the inventory panel should be opened.")

> Make the relic so I have to click on it whle the altar is open.

The relic can now only be taken by clicking it while the veil is lifted off the altar.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/b9b1aaa2-0.webp "Make the relic so I have to click on it whle the altar is open.")

> When yo uget the relic it should go full screen so you can see it

All three changes are in and working in the running app.

> Also it should be called one of the random ones from pilgrimage.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/e7120c73-0.webp "Also it should be called one of the random ones from pilgrimage.")

> The walking anumation with the relic is very strange. I should be holding it higher and it shouldn't stack locked in place with my body moving, it should also have a bounce as I walk

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/01d1bf80-0.webp "The walking anumation with the relic is very strange. I should be holding it higher and it shouldn't stack locked in place with my body moving, it should also have a bounce as I walk")

> When I'm over the shoes, I want the tooltip to show that. items supercede places for interactions.  . so I'd want to be able to see the name of the item, and use e to pick them up

> The animation for the item should come from the location on the map, and then the exit should go to the side panel.

> I also don't think the turbo speedo controls are working. that's not 16x speed. Also it should be for walking and running. Move the equipe button below the title. Have it have an "equipped" state with a checkmark and secondary button (match button text width when equipped, primary (equip) when not equipped.
>
> Also, the animation from the side panel looks like it's coming from behind thr panel, should be in front of it.

> The 3d models in the sidebar are way to pixelated

> And make the character in the sidebar standing upright, doing idle animations.

> Make it taller. like 440px tall.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/e58eb2a9-1.webp "Make it taller. like 440px tall.")

> Let's remove this one

Relic name: "The jawbone of Samson's ass" is out, leaving 30 Pilgrimage relics.

> wjhere's the chessboard?

> oh it's too hard to see. put it right there

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/494179a4-0.webp "oh it's too hard to see. put it right there")

> I want to be able to play that game. When I do, it should bring it up full screen and max or kris or robert should walk over to play against you. It would be a 3d asset, but from top down persepective, that would load in the middle of the screen. Game log in the right panel, with new game button, undo,. when starting it would allow you to pick your color and choose the game.

You can now play chess at the Basedash table.

> the pieces need more visual differentiation

Each piece type is now distinct at a glance on both sides.

> there's no way to select the chess table. it needs a hover and selection mechanic and a walk up adjacent one

The chess table now works like the other things in the world: you can hover it, click to select it, or walk up and press E.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/fcb47dc1-0.webp "there's no way to select the chess table. it needs a hover and selection mechanic and a walk up adjacent one")

> tbe board should snap to the 90 deg orientations

When you let go of the board, it now glides to the nearest quarter turn.

> Change the weekend outfit to be fishing gear

![The relic](https://www.tomjohn.design/images/content/tomjohnville/progress/more-362.webp "Change the weekend outfit to be fishing gear")

> make space let the bike jump and add some ramps around the map

The ramp and jump checks pass, but the e-bike check ended in a Node error.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/13a6d0f2-0.webp "make space let the bike jump and add some ramps around the map")

> I want shift to add a turbo. Also make a really minimap speedometer panel that pops up in the bottom left of the screen. the turbo should be able to last for 3 seconds, and then need to recharge.

Everything you asked for is in and working: Shift turbo, the mini speedometer, the lamp removed, the half wall behind the bench, "Nice air, bro" with its bike…

> remove the light pole to the righjt here, and add a ramp-shaped haldwall behind the bench that's nect to the turbo speedo effect. I want an achievement to show up when you jump the WTP, call it "Nice air, bro" and have it unlock 5x longer turbo for the bike and also make it so the bike can turn really tight and stop way faster

![Me jumping the e-bike](https://www.tomjohn.design/images/content/tomjohnville/progress/bike-jump.webp "remove the light pole to the righjt here, and add a ramp-shaped haldwall behind the bench that's nect to the turbo speedo effect. I want an achievement to show up when you jump the WTP, call it \"Nice air, bro\" and have…")

> I want the ramp behind gthe bench to bnot look like a ramp, more like it's built in. I'd like some of the others to look like that as well

![The e-bike's speedometer](https://www.tomjohn.design/images/content/tomjohnville/progress/more-738.webp "I want the ramp behind gthe bench to bnot look like a ramp, more like it's built in. I'd like some of the others to look like that as well")

> How do these ramps work with the truck?

The truck can't use the ramps at all; they're just obstacles to it.

> how big of a change for 3

It's a medium-to-large change: about the size of the first bike-ramp round, probably a bit more.

> I want it to be able to ride the jumps as well as the camper. but let's make that a separate PR. get this one in first

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/6e82c5ab-0.webp "I want it to be able to ride the jumps as well as the camper. but let's make that a separate PR. get this one in first")

> got stuck on the elevator

I fixed it, so you can walk off the Intradiem elevator again.

![Intradiem's elevator](https://www.tomjohn.design/images/content/tomjohnville/progress/more-744.webp "got stuck on the elevator")

> I want a better turbo effect for the camera, something that better shows speed. Like a warping of the camera and speed lines. I'd also like that for sprinting

The bike's turbo and sprinting now show speed in the camera: the frame warps, speed lines stream past, and in third person the lens widens.

> Not loving the turbo lines. I want those to just come from the character

The speed lines now burst out from Tom in every view, for the turbo and the sprint.

> no, like from the character model.

The speed lines now come off Tom's body, for both the turbo and the sprint.

> keep trying. way too much.

I've toned the lines way down.

> It's still too obvious. Also, I don't want it for normal sprint, and only for the turbo for the bike extra turbo unlock

The whole effect now only shows for the upgraded turbo, the one "Nice air, bro" unlocks.

![The e-bike's turbo](https://www.tomjohn.design/images/content/tomjohnville/progress/more-751.webp "It's still too obvious. Also, I don't want it for normal sprint, and only for the turbo for the bike extra turbo unlock")

## Night

> add the ability to start a campfire. when i do that have my family come over and start toasting smores.

> when the campfire is lit, could we go to night mode in the whole environment? streetlights on, etc?

> it would be a slow fade, and I'd need to be able to put out the fire

> which would bring day back

> The label for the dial should be adjacent to the spot that it points to

![The family around the campfire at night](https://www.tomjohn.design/images/content/tomjohnville/progress/campfire.webp "The label for the dial should be adjacent to the spot that it points to")

> There needs to be a little more global light. Also buildings should have their own exterior lights, like the top of the vercel pyramid should light up, Add more street lights overall, add path lights to the park. the interior windows of building the edge color of objects should be more of a darker pale blue vs the grey. building interiors should have lights. The town square area should have some taller light poles that could cast a wider light

Most of the night pass is in.

> The birds should stop singing and be replaced with crickets

> campfire should also be anchievement

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/f3cd95ca-3.webp "campfire should also be anchievement")

> building interiors need lights on

The buildings at night: vercel pyramid; studio; basedash.

> when they're selected

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/b6c5a9ef-1.webp "when they're selected")

> when I go in a building the global lights shouldn't come on, just the ones in the room

Testing: a new test checks that every lamp's light on the ground stays inside its room's walls, across rooms of different sizes and shapes.

> or you'll need to mask it to the buildings edges

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/60aa7f51-0.webp "or you'll need to mask it to the buildings edges")

> people should also get lit by streetlights.

Why they aren't real lights like the campfire: there are 53 of them.

> and the streetlights can diffuse a lot more. aslo objects like benches should reflect light as well

> why aren't they real lights like the campfire?

![The plaza at night](https://www.tomjohn.design/images/content/tomjohnville/progress/more-104.webp "why aren't they real lights like the campfire?")

> I want to make the angle of the sun match the time of the user's real world location and if it's sunset there or not. I also want the campfire to be on if it's actually night for the user. And I want to add a toggle for night and dark mode to the top right, but I want it , when tapped, to tell the user "explore more of the map to unlock dark/light mode, or visit later in the day"

I also added the toggle and the message to docs/ui-system.md, marked as your requested exception to the no-instructions rule. I couldn't make the Paper board…

![Sunset over the campground](https://www.tomjohn.design/images/content/tomjohnville/progress/sunset-campground.webp "I want to make the angle of the sun match the time of the user's real world location and if it's sunset there or not. I also want the campfire to be on if it's actually night for the user. And I want to add a toggle for…")

> The campfire unlocks it. As soon as you interact with that, the toggle is unlocked

The campfire now unlocks the toggle.

> Actualyl I want tthis day night button the be grouped under the achievements one, like it would turn into a bigger pil lsection with the buttons inside of it that are unlockable

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/f87a039c-0.webp "Actualyl I want tthis day night button the be grouped under the achievements one, like it would turn into a bigger pil lsection with the buttons inside of it that are unlockable")

> look at the most recent perf updates. does this affect them

> make the fixes

Running now (12 runs); I'll report when it finishes.

> add a test slider to the app so I can change the time

Added an Hour slider under Edges, covering 0–24 hours in 15-minute steps and updating the world’s lighting live.

> love this. create the pr and remove the controls for prod

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/9cdb7df9-2.webp "love this. create the pr and remove the controls for prod")

> campfire should function as a global light change. if it's on, then putting it out will make it day. if it's off, then putting it on will make it night, regardless of the time of day.

The campfire is now the global light switch.

![The campfire lit](https://www.tomjohn.design/images/content/tomjohnville/progress/more-194.webp "campfire should function as a global light change. if it's on, then putting it out will make it day. if it's off, then putting it on will make it night, regardless of the time of day.")

> the lights don't work in all the buildings at night, also remove the locked dark mode / light mode.

![Lit interiors at night](https://www.tomjohn.design/images/content/tomjohnville/progress/night-interiors.webp "the lights don't work in all the buildings at night, also remove the locked dark mode / light mode.")

> make the logos on the basedash and vercel buildings bigger, more like a sign, make the vercel on on top of the doorway, the basedash one like it's on a flagpole at an angle next to the door. add a raise sign section to the front facade of the tomjohn one above the door.
>
> Make sure all of the signs have lights at night, also add logos to the backs of the buildings.

![The Vercel pyramid's door at night](https://www.tomjohn.design/images/content/tomjohnville/progress/vercel-at-night.webp "make the logos on the basedash and vercel buildings bigger, more like a sign, make the vercel on on top of the doorway, the basedash one like it's on a flagpole at an angle next to the door. add a raise sign section to…")

> Night mode is not nearly as snappy as day mode. There's not dropped frames as much as its much more sluggish to navigate. I need you to spend a good amount of time evaluating the performance issues we have, focusing on the lighting size, effects, and overall performance. Keep working on tests to get it as closse to day mode as possible, until your tests are yeilding no more results. We could mask a gloabl light vs many,  and then dray the lights as fixed assets, we could reduce the amount of lights, palcement, etc. Work onthis untill you have solutions that get it at or as close as possible to the daytime perf.

Baseline: day vs night, same build, uncapped, with CPU profiles.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/62896eab-0.webp "Night mode is not nearly as snappy as day mode. There's not dropped frames as much as its much more sluggish to navigate. I need you to spend a good amount of time evaluating the performance issues we have, focusing on…")

> Add a torch on the wall outside of pilgrimige, be sure to follow the lighting guidance

How it follows the lighting rules: the light it throws; the flame and the glow on the wall; cutaway.

> only lit at night

![The map with the Pilgrimage torches lit](https://www.tomjohn.design/images/content/tomjohnville/progress/more-304.webp "only lit at night")

## Making it fast

> Since we're using the pixel shader, the overall wayality of the models can be lowered. Find ways to reduct the number of triangles without affecting the look of the app. remove small elements that aren't visible because of the pixel look. Many details don't matter with our shader.
>
> Also, look into ways that the pixel effect could be applied differently from the shader -- i.e. but rendering things in a different way that would get the same look as an output but with improved performance.

I cut the triangles drawn per frame by 58% (26.5M → 11.1M, summed across 18 test views).

![Third person on the street, simplified](https://www.tomjohn.design/images/content/tomjohnville/progress/more-127.webp "Since we're using the pixel shader, the overall wayality of the models can be lowered. Find ways to reduct the number of triangles without affecting the look of the app. remove small elements that aren't visible because…")

> the draw the world once is interesting. how would that work for all angles and building interiors and night mode?

> I don't mind flat trees in 3rd person, that's a common enough trick

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/4c29020d-0.webp "I don't mind flat trees in 3rd person, that's a common enough trick")

> the new page loader screen should absolutely be enough time to load in the character models before the site launches..

Trade-off: waiting for everyone adds about 2.5 s before the town is ready (roughly 4.8 s → 7.2 s in a local dev build without a visible window).

> The about page should launch in a new link. Do not show the tutorial page if the site is already loaded and if the user has already done it. Also, if they've already done the tutorial, create a new version that's more of a loading page, less of a tutorial.

> also add a step in the onboarding to click and drag or pan to move the camera

![The arrival: me walking up to the sign on black](https://www.tomjohn.design/images/content/tomjohnville/progress/arrival.webp "also add a step in the onboarding to click and drag or pan to move the camera")

> what would be the perf benefit of using the flat tress all the time

The second benchmark, comparing today's trees with no 3D trees at all, is running.

> so it seems like a good change

Before deciding, I'm taking screenshots of what the change looks like, since that's the open question.

> make the change, pull up the local test, I'll judge the look.

What to look for: in Iso and Top, trees are photographed from just above level, so you'll see them from the side as upright cards, with no canopy tops.

> can we generate sprites for the trees at the right angles?

Costs I haven't measured: memory; load time; in third person.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/78e9448a-0.webp "can we generate sprites for the trees at the right angles?")

> on phones just use the flat ones.

Desktop now uses two photo heights: 4° for third person, where trees are seen almost side-on; 40°, halfway between Iso (35°) and Top (45°), so each of those…

> do two photo heights. compress the images dramatically, these are getting pixelated anyhow

> after this trees work is done, I need you to find similar methos to compress some of the workload the app is doing. that could be making some of the characters into sprites, some of the game assets into sprites, etc. but I need you to creatively find ways to reducte the polygon count. also, simplify the vehical or other assets. as longas things are close to the same, maybe within 3-5%, that's good enough for me.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/c9f5e6e2-0.webp "after this trees work is done, I need you to find similar methos to compress some of the workload the app is doing. that could be making some of the characters into sprites, some of the game assets into sprites, etc. bu…")

> yeah make the tree shadows flat as well, will that work with the time change stretching them?

The sun angles and glow strengths are my picks, and they're easy to adjust in daylight.ts.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/ceca701e-1.webp "yeah make the tree shadows flat as well, will that work with the time change stretching them?")

> Given past test results, which property of this game contributes the most to frame rate drop and reduced performance?

It's CPU work on the main thread, not anything the GPU draws.

> okay so night mode is a beast, but people are the main issue. Give me some dialkit controllers and an fps graph overlay with other resource use so that I can can tun things and see the output.

Dials (Performance panel): overlay; people; pose rate.

![Third person at night with performance dials](https://www.tomjohn.design/images/content/tomjohnville/progress/more-257.webp "okay so night mode is a beast, but people are the main issue. Give me some dialkit controllers and an fps graph overlay with other resource use so that I can can tun things and see the output.")

> Let's simplify the time a bit to make this easier. There should be night. Morning, midday (say 2pm shadows) evening. Instead of making it truely variable, just have those times fit in with the following timeslots.
>
> 6am - 10 am morning (not full dawn, like a good sunrise though)
> 10am-6pm midday
> 6pm-10pm evening
> 10pm - 6am night
>
> That way we're not calcualteing this constantly and you can render the shadows for those fixed times vs having to make it for all lengths.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/642a1011-1.webp "Let's simplify the time a bit to make this easier. There should be night. Morning, midday (say 2pm shadows) evening. Instead of making it truely variable, just have those times fit in with the following timeslots. 6am -…")

> the trees are very soft, they need a texture pass to bring some of that back without looking blobish

The trees you preferred are back.

> I think you took out too much detail

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/601123cf-1.webp "I think you took out too much detail")

> how many different tree species are there?

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/31c61657-1.webp "how many different tree species are there?")

> add in some of the black edge textures like what the shader would have if possible or make it so the shader works with some of those assets to add accents without adding depth

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/0e473af7-0.webp "add in some of the black edge textures like what the shader would have if possible or make it so the shader works with some of those assets to add accents without adding depth")

> if you're wondering, i prefer this one

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/5e3aab4a-0.webp "if you're wondering, i prefer this one")

> No, I don't want a real 3D asset. I was just saying I prefer the art direction of that one in the grid. I didn't realize it wasn't a sprite.

Why I can't get closer with ink: I tried four ways of drawing the outlines into the sprite.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/db75e634-0.webp "No, I don't want a real 3D asset. I was just saying I prefer the art direction of that one in the grid. I didn't realize it wasn't a sprite.")

> isn't 1 a 3d asset?

The 3D tree models still exist, but only behind the scenes, in three ways: photo source; shadows on desktop; first frames.

> why would I want to show a 3d asset before a sprite? I don;;t want to draw anything I don't have to

What we're going with: every tree is a flat picture, two triangles each, in every view and on every device.

> I'm confused on where we're landing. Simplify the way you're describing what we should go with. this all started as a way to help performance. That's the main goal here

![The town zoomed out](https://www.tomjohn.design/images/content/tomjohnville/progress/town-zoomed-out.webp "I'm confused on where we're landing. Simplify the way you're describing what we should go with. this all started as a way to help performance. That's the main goal here")

> okay now check on the recent updates and tell me if anything has changed with your frame rate takes

Short version: the main takes still hold.

> I want to set up a perf filter on the site. If FPS drops, delete exterior people. until it's 60fps.

The people filter is built and on by default for every visitor: when frame rate drops, it sends townsfolk home 15% at a time until the town holds 60 fps.

![The frame rate overlay over the street](https://www.tomjohn.design/images/content/tomjohnville/progress/fps-overlay.webp "I want to set up a perf filter on the site. If FPS drops, delete exterior people. until it's 60fps.")

> there are some building edges and materials that are flickering and shimmering when the map is zoomed or panned -- one example is the bricks at the base of the welcome sign. i need you to go through each asset and find anything where there are shimmering edges or weird draw borders leading to visual artifacts and fix them. I want this on every view on every asset across the map

The shimmer is fixed in the isometric and overhead views.

![The Tomjohnville sign up close](https://www.tomjohn.design/images/content/tomjohnville/progress/more-290.webp "there are some building edges and materials that are flickering and shimmering when the map is zoomed or panned -- one example is the bricks at the base of the welcome sign. i need you to go through each asset and find…")

> some assets are taking a long time to load. I'd like to have a staged loader for these, with a pixelated or very tiny blurred version of the image loaded so there's something more than the bblank box, and I'd also like to look at using much smaller assts for display in the grids and then loading the large size only when expanded.

Images now load in stages.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/370d6376-0.webp "some assets are taking a long time to load. I'd like to have a staged loader for these, with a pixelated or very tiny blurred version of the image loaded so there's something more than the bblank box, and I'd also like…")

> I want this on the all images and other places where work is on pages

The staged loading now covers every place my work shows on pages, the gallery view (the /work wall) included: videos; everywhere else.

> The gallery view

![The Macindash page](https://www.tomjohn.design/images/content/tomjohnville/progress/more-635.webp "The gallery view")

## The welcome sign

> I want to add a sign at the entrance of the city that says "welcome to Tomjohn Design" like a classic state entrance road sign. generate the image for it and turn it into a game asset. it should be lit up at night

Added the classic welcome sign at the city entrance as a solid 3D asset, with lamps that fade on at night.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/5cef4065-1.webp "I want to add a sign at the entrance of the city that says \"welcome to Tomjohn Design\" like a classic state entrance road sign. generate the image for it and turn it into a game asset. it should be lit up at night")

> it should be tilted with the grid so it's perpendicular with the road

![The first sign, green and plain](https://www.tomjohn.design/images/content/tomjohnville/progress/first-sign.webp "it should be tilted with the grid so it's perpendicular with the road")

> also that looks terrible. Give me like 10 more options, put them in paper. Match my own brand look, make it dithery, have my portrait on it, maybe even verging on old communist propoganda looks with rays of sunsine and me welcoming others to the land, like i'm mao -- if you get the reference.  (link)
>
> I don't actually want reds or communist symbolism, but the posing is awesome.

Added 11 options to Paper’s welcome page.

![An early concept: a giant me next door](https://www.tomjohn.design/images/content/tomjohnville/progress/giant-next-door.webp "also that looks terrible. Give me like 10 more options, put them in paper. Match my own brand look, make it dithery, have my portrait on it, maybe even verging on old communist propoganda looks with rays of sunsine and…")

> I want one with my arm outstrretched to the left, with rays of light behind my head, and in the negative space of my black shirt there's figures and characters

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/603e9de6-0.webp "I want one with my arm outstrretched to the left, with rays of light behind my head, and in the negative space of my black shirt there's figures and characters")

> okay now do that last one without anything in the shirt, and without any text

Done—plain black shirt, no text, same pose and rays.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/1a149b24-0.webp "okay now do that last one without anything in the shirt, and without any text")

> where's my logo svg

Your logo SVG is here: tj-monogram.svg.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/0ee10997-0.webp "where's my logo svg")

> I want the lights underneath, less obvious, shining up. give it some landscaping at the bottom and make it feel more anchored to the space

Moved the lights underneath into small uplights tucked among shrubs and grasses.

![Pixel me waving](https://www.tomjohn.design/videos/tomjohnville/pixel-tom-wave-2.mp4 "I want the lights underneath, less obvious, shining up. give it some landscaping at the bottom and make it feel more anchored to the space")

> expand the image in this frame to fill the frame here (link)

Expanded the image to fill the Paper frame edge to edge, preserving its proportions and the title placement.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/150031b2-0.webp "expand the image in this frame to fill the frame here")

> no... i meant expand it with image gen to make the image fill the frame

Done—used image generation to outpaint the artwork and placed it in the Paper frame.

![Me with my arms out](https://www.tomjohn.design/images/content/tomjohnville/progress/sign-arms.webp "no... i meant expand it with image gen to make the image fill the frame")

> generate a version with just the character (including the white border) and one with just the radiating lines.

Created all five PNGs.

> And one where the character is holding a flag instead of an open hand, one where I'm pointing, and one where I've got both arms spread out

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/58da965a-0.webp "And one where the character is holding a flag instead of an open hand, one where I'm pointing, and one where I've got both arms spread out")

> Bigger flag, extending behind me

Made the flag much larger, extending behind your head and shoulders, with transparency and the white outline preserved.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/9f74e50a-0.webp "Bigger flag, extending behind me")

> put those in paper. for the giant flag one, add the text "Tomjohnville" across it, using these for the text to show, make sure it follows the flag curves. (link)
>
> Also, there's a slight outline between the head and the flag bg, that shouldn't show up

Added all nine assets to Paper, beside your lettering reference.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/75823f50-0.webp "put those in paper. for the giant flag one, add the text \"Tomjohnville\" across it, using these for the text to show, make sure it follows the flag curves. Also, there's a slight outline between the head and the flag bg,…")

> The linked Paper frame has three lettering styles. Should I make a giant-flag version with each style, or use the outlined pixel lettering in the middle?
> All three styles

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/6cc8f8bf-2.webp "The linked Paper frame has three lettering styles. Should I make a giant-flag version with each style, or use the outlined pixel lettering in the middle? All three styles")

> The text can go behind the head, that's the point

Updated all three in Paper.

![Me with a Tomjohnville flag](https://www.tomjohn.design/images/content/tomjohnville/progress/sign-flag.webp "The text can go behind the head, that's the point")

> I need favicon, OG image, and other assets. Also add a 404 with me running around a model of a 404 -- use the base of the welcome to tomjohnvill and replace the billboard with 3d 404. add a button on that page to go home, on the lower part of the screen.

OG image (1200×630, 72 KB).

> The og image should be the welcome to tomjohnville  3d sign on the backdrop  but just grass under it and the shadow. not path or bench

![The 404 sign](https://www.tomjohn.design/images/content/tomjohnville/progress/404.webp "The og image should be the welcome to tomjohnville 3d sign on the backdrop but just grass under it and the shadow. not path or bench")

## Getting around

> I need a walk joystick on mobile, added to the left, and make the right joystick control the camera instead of the walking and the looking. the walking one will be forward strafe left/right and walk backwards. It will not affect the camera

The right stick still shows in the isometric and top views, where it does nothing.

> also get rid of the blur on the joystick altogether.

![Walking on a phone with two joysticks](https://www.tomjohn.design/images/content/tomjohnville/progress/more-192.webp "also get rid of the blur on the joystick altogether.")

> Move the lock on cursor button to be next to the minimap

I moved the lock button next to the minimap.

> Top right corner of the minimap area, aligned with the map button, and the top of the minimap

The lock button is now in the minimap's top-right corner, and the minimap has moved down so the map's bottom edge meets the middle of the view buttons.

> Move the minimap down so the bottom intersects with the middle of the view change buttons

![Lock on Tom over the map](https://www.tomjohn.design/images/content/tomjohnville/progress/more-506.webp "Move the minimap down so the bottom intersects with the middle of the view change buttons")

> Add sprint and jump buttons to the left side of the mobile screen.

I've added Sprint and Jump buttons at the bottom left of the phone screen.

> Stack them vertically, make them secondary

Both changes are in, and the phone check passes again (it now checks the new layout too).

> Update the footer buttons to be in a solid drawer vs bubbles

> The sprint button should be double arrows to the right. Sprint icon (link)

If the Sprint icon on that board is a different shape, such as arrows with stems, open the Paper app and tell me.

![Sprint and jump buttons on a phone](https://www.tomjohn.design/images/content/tomjohnville/progress/more-611.webp "The sprint button should be double arrows to the right. Sprint icon")

> Add the chat button above that -- when the user is a member

Members now get a Chat button above Sprint and Jump on phones.

![Sprint and jump beside the arrival on a phone](https://www.tomjohn.design/images/content/tomjohnville/progress/more-615.webp "Add the chat button above that -- when the user is a member")

## Talking to people

> Make the NPC dialoges white text with a shadow, on hover add the bg and keep them from fading away, and the also only show dialog in a 30 square radius around the main character

Side effect: while the mouse is over a line, the world underneath doesn't respond to hover or clicks.

![The plaza with people talking](https://www.tomjohn.design/images/content/tomjohnville/progress/more-232.webp "Make the NPC dialoges white text with a shadow, on hover add the bg and keep them from fading away, and the also only show dialog in a 30 square radius around the main character")

> the dialogue size is all out of whack on the 3rd person perspecive. it's scaling with the zoom level

The dialogue now stays the same size at every zoom.

![A screen recording of the town](https://www.tomjohn.design/videos/tomjohnville/recording-0U08os.mp4 "the dialogue size is all out of whack on the 3rd person perspecive. it's scaling with the zoom level")

> what's the pixel size in 3rd person when you zoom in>?

Zoomed all the way in, third person on desktop renders 5.4 CSS px per pixel.

> The pixel shader is an attempt to make it so that the game feels like it is  sprite based. I want, when zoomed all the way in, for those settings to be about how they are defined, and then I want the math to work out so that the zoom level scales the shader proportionally. when I zoom out, the map shouldn't look very pixelated. It doesn't seem like that is happening right now.

In third person, the pixel size you set now applies when you're zoomed all the way in, and the pixels shrink in step as you zoom out.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/7df138e6-2.webp "The pixel shader is an attempt to make it so that the game feels like it is sprite based. I want, when zoomed all the way in, for those settings to be about how they are defined, and then I want the math to work out so…")

> it doesn't seem right in 3rd person. like it gets too smal ltoo quickly. also, the dither texture is almost totally lost, I'm not sure if that one should scale at all

Both are fixed in third person.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/956b1e5f-0.webp "it doesn't seem right in 3rd person. like it gets too smal ltoo quickly. also, the dither texture is almost totally lost, I'm not sure if that one should scale at all")

> I want diterhface to be a black tie onle event, but I want to have to find the tux in order to get in. You can still click it, but the doors would be closed and I'd not be able to go in until I'm wearing the tux.
>
> How should I find the tux, where, and should I add in game currency to be able to buy things? Like make a clothing store, have the tux be an option but expensive, so I have to do something to earn it?

I haven't built anything yet.

> okay let's add a tux ticket. have it sitting on the kitchen island.

I've built it: the tux ticket is a 3D item on the camper's kitchen island, Ditherface's doors stay shut until you're wearing the tux, and there's a bouncer…

> Add a bouncer with the dialoge, make sure the tux ticket is a 3d item. exaggerate the size on the map

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/47914e48-0.webp "Add a bouncer with the dialoge, make sure the tux ticket is a 3d item. exaggerate the size on the map")

> The bouncer should be in front of the doors, and the doors should be closed

The bouncer now stands on the red carpet right in front of the doors, and the doors look closed.

> I want the bouncer to be interactive with the e key, he should give you hints. "Sorry man, just doing my job". "You'll need to be in a tux to get in here" "Maybe check with the tailor across the street"

You can now talk to the bouncer with E.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/561507ce-0.webp "I want the bouncer to be interactive with the e key, he should give you hints. \"Sorry man, just doing my job\". \"You'll need to be in a tux to get in here\" \"Maybe check with the tailor across the street\"")

> The e should be "go inside" also, naviagint to the ditherface should make it so you talk to the bouncer

The E prompt at Ditherface's doors now says "Go inside", and sending Tom to Ditherface makes the bouncer talk to him when he gets there.

> he blends in with the door way too much.

The bouncer now stands out from the doorway.

> We need a way to have a conversation with the bouncer and other game characters. I'm thinking that the top down and isometric modes would share the same camera UI, but the 3rd person would have a camera approach where it centeres the camera on the speaking person while they're talking and then on you when it's our time to respond.
>
> Let's explore the dialoge UI in paper so I can get a feel for it. (link)

The dialogue boards are on the Dialogue page in Paper: The top row is the side-panel version, with a short notes board beside it.

> We need to change the bookstore into the tailor to fit with this new ditherface gameplay mechanic

Outside: the fascia reads "bespoke · Selvedge · tailoring", the shop windows say "bespoke tailors", and the painted end wall says "suits · alterations ·…

![The bouncer at Ditherface's red carpet](https://www.tomjohn.design/images/content/tomjohnville/progress/more-373.webp "We need to change the bookstore into the tailor to fit with this new ditherface gameplay mechanic")

> Let's use the bottom one for both, let's also make the UI similar to the commandbar, just anchored to the bottom of the screen and shorter

> show it on a narrower screen and on mobile

> I think it'll need to be pushed up by the buttons or maybe those should go away while a dialoge is active

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/b9c087a9-0.webp "I think it'll need to be pushed up by the buttons or maybe those should go away while a dialoge is active")

> Wait, let's use the right sidebar. It can be a chat feed of the conversation.  I'm working with another agent to add a chatbot to the app for the contact form and genera information, we can make the sidebar the chatlog and have the responses be in there, but if it's collapsed we can keep it in game.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/1e803c9f-0.webp "Wait, let's use the right sidebar. It can be a chat feed of the conversation. I'm working with another agent to add a chatbot to the app for the contact form and genera information, we can make the sidebar the chatlog a…")

> each speaker would get their own, it's not a history as much as a UI element that we can use and that works for conversation

I've updated the Dialogue page in Paper ( with both changes.

> yes I meant the cmd k menu

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/59367b11-1.webp "yes I meant the cmd k menu")

> yes. I also want the dialogue options to show up in the sidebar as well -- like the suggested responses would work for an AI chat. We don't have those yet but will.

Talking to the bouncer now happens in the side panel, as a chat with suggested replies at the foot.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/b379f22f-0.webp "yes. I also want the dialogue options to show up in the sidebar as well -- like the suggested responses would work for an AI chat. We don't have those yet but will.")

> The conversation needs to be more obvious. Zoom in to an over the shoulder camera 3rd person, with his last diologue line showing up above his head.   this, but push the camera over to the side a bit so it's not centered on me, but on the scene.
>
> Also, he's super low contrast, Lighten his skin to more of a medium brown so I can see his features better.

Talking to the bouncer now cuts to a close over-the-shoulder third-person shot, framed on the two of you rather than centred on you.

> Also, have the convo more like "Hey man - this is a black tie only event" next line "you can't go in there dressed like that" Then I need dialogue options for things about me being the artist, him saying, look that might be the case, but you still can't get in without a tux on"

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/22ac726e-0.webp "Also, have the convo more like \"Hey man - this is a black tie only event\" next line \"you can't go in there dressed like that\" Then I need dialogue options for things about me being the artist, him saying, look that migh…")

> Make th font size of the dialoge a bit bigger above the characters. Also, when I reply, have my message show up for a sec and then after a delay have that go away with the reply

Your reply, then theirs: when you pick a reply, it shows over Tom's head on its own.

> There needs to be an option to leave the conversation in the dialogue options, and also there needs to be messages that end the conversation. I'd also like to be able to see the past conversation when I start talking to that NPC again. The font size of the chat thread is a bit too big, also make the user chat bubbles have higher contrast -- and add a avatar face to the chat thread using the character as the avatar, not the tomjohn avatar.

The message bubble and reply option changes are shared components, so chatGPTom gets them too.

> increase the contrast of the dialogue options on the bottom of the screen

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/8ebefb14-1.webp "increase the contrast of the dialogue options on the bottom of the screen")

> his avatar is uncreadable. render it with a clear bg.

I re-rendered the bouncer's avatar as his head alone on a clear background, so he now reads at chat size.

![A ditherface up close](https://www.tomjohn.design/images/content/tomjohnville/progress/more-503.webp "his avatar is uncreadable. render it with a clear bg.")

> okay this will need it's own achievements tray. And you'll need to "start" the mission. I'll show the next step required to find the key.

Getting into Ditherface is now a mission called "Black tie", with its own steps in the top-right tray.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/b287b768-0.webp "okay this will need it's own achievements tray. And you'll need to \"start\" the mission. I'll show the next step required to find the key.")

> It needs to start only after the correct dialogue starts it, I also want to have a banner for "new Mission". Black Tie Only. same as the entering a place. I also need an audio cue for that and an audio for when a mission is complete. Probably also should introduce XP and leveling so there's a reward for this.

Starts on the right line only: the mission now starts when the bouncer says "Maybe check with the tailor across the street", whichever way you got him there.

> The game mecahnic should be -> talk to bouncer -> to to tailer -> tailer tells you you need a ticket (so need to add dialogue and make the tailer a character) -> go find ticket -> redeem ticket -> get tux -> get inside of ditherface

The mission now runs in your order, and the tailor is someone you talk to.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/d1e9a453-0.webp "The game mecahnic should be -> talk to bouncer -> to to tailer -> tailer tells you you need a ticket (so need to add dialogue and make the tailer a character) -> go find ticket -> redeem ticket -> get tux -> get inside…")

> Make it so you can chat with any npc, but make the npcs converse about the area of the map they're in. If the NPC just "said" something, have that be the first line of the conversation. I want the users to be able to ask the NPCs questions about the area of the map they're in.
>
> Now, the NPCs also will need some kind of personality, some kind of reason for being, and some restrictions on what they can respond with. These aren't chatGPTom, so they don't know about everything in the game, but they can say things like "I think that's over there" "I've heard of that but I don't know much" .I want the repsonses to be AI generated, have some cached for reply before things are actually hitting the AI models. These AI responses will be a little more open ended, but I still want them to be as guarded against abuse as the other chat in the game. The jev eval will need to flag anything out of the scope of a standard discission to prevent abuse.
>
> We'll use the dialoge model that's already in place, the same AI configuration, but just make it so that any character can have it. Characters will respond with gestures, stop what they're doing, and some may be sitting around -- they don't need to stand.

For local AI calls I linked the project to Vercel (the link folder is gitignored) and pulled a fresh token into.context/.

![Talking to someone in the town](https://www.tomjohn.design/images/content/tomjohnville/progress/townsfolk-talk.webp "Make it so you can chat with any npc, but make the npcs converse about the area of the map they're in. If the NPC just \"said\" something, have that be the first line of the conversation. I want the users to be able to as…")

> When I'm in a conversation, the other NPCs queue up behind. They should go around.

All three are fixed, and tests, check-reach and the guard check pass.

> hovering the characters should show the highlight for interaction.
>
> This NPC said they're walking though they are sitting. repsonses should be catered to what the NPC is doing

![Talking to someone in a shop](https://www.tomjohn.design/images/content/tomjohnville/progress/more-798.webp "hovering the characters should show the highlight for interaction. This NPC said they're walking though they are sitting. repsonses should be catered to what the NPC is doing")

## The map

> The minimap doesn't look like it has the same tone and color as the main map. I want to render versions of it for each view that look the same as the game map for each time of day -- but don't include shadows.

![The baked map at different times of day](https://www.tomjohn.design/images/content/tomjohnville/progress/map-tones.webp "The minimap doesn't look like it has the same tone and color as the main map. I want to render versions of it for each view that look the same as the game map for each time of day -- but don't include shadows.")

> the minimap isn't loading

Cause: when the map was re-baked in 205, the bake script ran in a fresh browser, so the page treated it as a first visit and opened on the new tutorial.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/374c45da-1.webp "the minimap isn't loading")

> This doesn't appear to be solved

![A round map that follows me](https://www.tomjohn.design/images/content/tomjohnville/progress/radar-map.webp "This doesn't appear to be solved")

## Other people

> I want to make the whole map multiplayer, but only for players who have entered the coworking space and "signed up". Add a small table in the entry that has a book on it. when you click on the book it opens up to a page of the names of people who have "signed up" (All of the Tom names). The final row will have a button that says "Sign the guest list" -- when you do, you'll see your time name, and you'll get a Member number in that row on the book.
>
> This book will be a 3d model, just like the diorama, etc, it will show the following text in the sidebar.
>
> "Welcome to the coworking space. Add your name to the ledger to claim your spot, and be able to see and follow other members in the world. You'll be able to save your name and membership soon. If you'd like to speak to other members, you must complete the rite of passage."
>
> For context, I want this to be more like a saved state, not an account registration. That will come later.
>
> The Rite of passage will be a note, that's sitting on the table in my Tomjohn Design studio. That note will also be a 3d model, it will have the following criteria:
>
> - View 4 projects
> - Drive the truck
> - Read 2 articles or watch 2 talks.
>
> Once that set of tasks is complete, and the guest has signed the registry, then you will get the achievement of completing the rite of passage, and will unlock the ability of "the give of speech".
>
> The gift of speech allows you to press / to bring up a chat bubble above your head, and then others can see it. Max length 140 characters. I'll need to find some moderation controls on this.

Before this can go live: the room server needs redeploying, and that happens automatically when this reaches main.

![A rite of passage scroll](https://www.tomjohn.design/images/content/tomjohnville/progress/more-352.webp "I want to make the whole map multiplayer, but only for players who have entered the coworking space and \"signed up\". Add a small table in the entry that has a book on it. when you click on the book it opens up to a page…")

> The book should be open and facing rhe camera, names on boths pages, smaller text. Same with the rite of passage, it should be up and facing the user

The book and the note now stand up and face you square in the inspector, and the book has names on both pages in smaller writing.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/3e2ad609-0.webp "The book should be open and facing rhe camera, names on boths pages, smaller text. Same with the rite of passage, it should be up and facing the user")

> Make the list on the panel reverse sort. make the button above it, no divider line

The guest list panel now has Sign the guest list above the list, outside the rows so it has no line of its own.

> Enforce that the name never is Tomjohn. I'll claim that. Also make it always 2 names, get rid of the tomjohn amalgums

Every visitor's name is now two words, and no one can ever be called Tomjohn.

> Remove the rite of passage for now, put it in a place we can bring it back. Just do the membership, but have it so that you can also talk after signing up. Talking would be done with a / chat command, and would show up above your character's head. Also, you'd be able to see other members outside of just the coworking space and be able to select them and follow them.
>
> Find me some good moderation and flagging rules for profane content. Might be more difficult with / commands, but I want them to be sent, not immediately visible as someone is typing.

These are written up in docs/workyard-multiplayer.md; none of it is built yet.

> it should auto grow with content, and get focus whenever / is pressed. Add an arrow on the right to show submit. max width 160px, don't wrap, ... on the left side with content that exceeds that bar width. Max characters 160

> Also add the filters and moderation.

> Text box and output is too high above the character.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/41155367-0.webp "Text box and output is too high above the character.")

> I want to allow people to add their name when signing the guest book.  It would go on the right side of the registry list in the sidebar. When you sign the guest list, there would be a form that would pop up, asking you to claim the name, and add your handle. There needs to be some censorship here as well, like the chat.
>
> Also after you signed there should be a confirmation toast that shows up on the bottom of the screen.
>
> "Welcome. You can now chat with / and see other members in the world"

Signing the guest list now opens a page nested inside the guest list's side panel, as you asked, instead of a modal.

> Actually make the singing a nested side panel with the form in there, not a modal

![Signing the guest list on a phone](https://www.tomjohn.design/images/content/tomjohnville/progress/more-511.webp "Actually make the singing a nested side panel with the form in there, not a modal")

> I want the passkeystep to be part of the guestbook signing

The passkey is now an optional row on the sign page, with the button on the right, and the primary button says Submit.

> The primary CTA there should say "submit" make the passkey button on the right of the passkey row, not stacked

![The guestbook, open](https://www.tomjohn.design/images/content/tomjohnville/progress/guestbook.webp "The primary CTA there should say \"submit\" make the passkey button on the right of the passkey row, not stacked")

> and rename it to guestbook, not guest list

![The guestbook's pages](https://www.tomjohn.design/images/content/tomjohnville/progress/more-527.webp "and rename it to guestbook, not guest list")

> when I press / it need to remove the chip above the character

Pressing / now hides the "E The workyard" chip over Tom while you write.

![The workyard](https://www.tomjohn.design/images/content/tomjohnville/progress/workyard.webp "when I press / it need to remove the chip above the character")

> I want to be able to see people even if they can't see me. The tomjohn user number 1 is me and should get admin permissions with special tools

"Rom Johnson" is the guest, standing outside the workyard.

> I also want it so that everyone can see me even if they're not signed up. Add my avatar next to my name.

That's what a guest sees from out in the town.

![My name pill over my head](https://www.tomjohn.design/images/content/tomjohnville/progress/more-546.webp "I also want it so that everyone can see me even if they're not signed up. Add my avatar next to my name.")

> Few things with multiplayer.
>
> Add the guest book to the sidebar. Make it so you have to go into the workyard to sign it,  but add a message stating that.
>
> Show a green dot next to the people who are online.
>
> Add a count and dot under the guestbook in the sidebar that shows how many people are online . differentiate members from non in the opened panel on the top.
>
> Allow clicking on members, show it as a subpanel, add actions to follow.  that member

The guestbook is now in the sidebar, with the online count under it, members split from guests at the top of its panel, green dots on online members, and a…

![The side panel's rail](https://www.tomjohn.design/images/content/tomjohnville/progress/more-555.webp "Few things with multiplayer. Add the guest book to the sidebar. Make it so you have to go into the workyard to sign it, but add a message stating that. Show a green dot next to the people who are online. Add a count and…")

> make the number online a badge dot on the guestbook vs a separate item

The online count is now a badge on the guestbook button instead of a separate pill under it.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/57923cf9-0.webp "make the number online a badge dot on the guestbook vs a separate item")

> add total visitor count here if possible.

The Guestbook panel now has a Total visits row under Ville, showing 4 in my local test.

![The guestbook's visitor count](https://www.tomjohn.design/images/content/tomjohnville/progress/more-576.webp "add total visitor count here if possible.")

> the name bubble is blocking the / chat text after submit. It needs to be moved down. Also add the bubble above everyone, so they can see their own name

The name was covering the chat line.

> and add the name above the character here

> And the username and other details if they are a member

![A visitor's name over their head](https://www.tomjohn.design/images/content/tomjohnville/progress/more-588.webp "And the username and other details if they are a member")

> tone down the nametags, they don't need to be a bubble, use the same font as the dialogue in the game, but just add a dot before it. also add a 40% opacity circle around them like the main character has to differentiate from the NPCs

Visitors' name tags are now plain text with a dot in front, and every visitor stands in a 40% ring like Tom's.

![Name tags in the street](https://www.tomjohn.design/images/content/tomjohnville/progress/more-621.webp "tone down the nametags, they don't need to be a bubble, use the same font as the dialogue in the game, but just add a dot before it. also add a 40% opacity circle around them like the main character has to differentiate…")

> when there's multiple people in the same cell I want to be able to hover the names and see the list of them

When several visitors stand in the same spot, resting the mouse on their overlapping names now opens a list of everyone there.

![Several names under the pointer](https://www.tomjohn.design/images/content/tomjohnville/progress/more-626.webp "when there's multiple people in the same cell I want to be able to hover the names and see the list of them")

> sometimes I'll load the site and there will be 3 of me

I've fixed it: you'll no longer see copies of yourself.

![Three of me](https://www.tomjohn.design/images/content/tomjohnville/progress/more-694.webp "sometimes I'll load the site and there will be 3 of me")

> I want player chats to be differentiated from the NPC ones. Color might work, but worried about contrast

If the bubbles feel too loud, the calmer option is a neutral --ui-surface bubble with the shirt dot leading the line.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/79466c63-1.webp "I want player chats to be differentiated from the NPC ones. Color might work, but worried about contrast")

> I need to see that with all of the shirt colors -- also I'm not sure I want to keep the shirt colors as the differentiator, I think the player ring should be that instead.

I rendered a line in all 12 shirt colours in the live town, by day and by night.

> The ring is the curcle on the ground. I want that to be the color indication, not the shirt.

> and only show the ring when the player is online.

![The guestbook with a visitor's avatar](https://www.tomjohn.design/images/content/tomjohnville/progress/more-728.webp "and only show the ring when the player is online.")

> player chats are too ephemeral. Add a sidebar item to show the chat logs from all players in the left sidebar, when it's collapsed, show it in the lower left corner with the username and the chat

The machine is heavily loaded (load average around 40–76, with other workspaces running their own browser checks), so the town takes over 5 minutes to load.

> I want the chat in the sidbar to be more dense. bottom aligned. add something at the bottom to tell users to sign the guestbook to chat or press / to chat if they're signed in.

The sidebar chat is now denser, sits at the bottom of the drawer, and has a line at its foot telling people how to chat.

> yeah make that a link

"guestbook" in "Sign the guestbook to chat" is now a link.

> Update the sign the guestbook button to take your character to the workyard. I want to be sure it's easy for that to happen

Fixed along the way: the chat's lower-left corner disappeared once you walked into any building, because walking in selects it.

> actually I don't want it to be a drawer. just the one that's over the game world, only show the most recent 10 chats

> make the name of the character here have the color of the user vs the dot.
>
> When navigating to the workyard, show that somewhere in the UI
>
> Have messages only stay up on screen for 30 seconds, and then fade away. Also add the / to chat below the chat list. Next to it have a X online indication, when not signed in have it say Join Tomjohnville to chat.
>
> We also need to make the passkey required.

> no need for the bubble behind the /

When several names overlap, hovering shows a list of them.

> Add a note above this
>
> You can only join while inside of the workyard.

> add a white border behind the username -- the text is too low contrast in the bottom left

> and replace the dot above the character with that as well

> the border around the name looks bad

The town-chat check passes; it now checks that the name sits on the speaker's colour.

> I don't like the pill over the character on the map. How do other games do that?

Most games don't put a background behind names over characters. They use bare text and let something else carry the player's colour: coloured text, dark…

> show me how those look

Here are the four options in the real town.

![A visitor's chat over their head](https://www.tomjohn.design/images/content/tomjohnville/progress/chat-bubble.webp "show me how those look")

## chatGPTom

> I want to use vercel eve to be a chatbot about me vs the contact form. It would be called chatGPTom and it would only be able to answer questions about me, and the game, etc, and would also allow contacting me

Once you answer these, I'll start with the Paper board, or go straight to code if you'd rather skip it.

![A Paper board: chatGPTom expanded](https://www.tomjohn.design/images/content/tomjohnville/progress/chat-expanded.webp "I want to use vercel eve to be a chatbot about me vs the contact form. It would be called chatGPTom and it would only be able to answer questions about me, and the game, etc, and would also allow contacting me")

> Not as me, I'm the character in the game. My character would be able to use the chatGPTom. I'm wondering about adding a "cell phone" to the game the character can use, which would have the map, and also be where this lives.

That makes sense: Tom is the character, and chatGPTom is something he carries.

> I think I've gone too far with the phone thing for now, not a bad idea but it would need a ton of work. INstead, let's just make the contect form into a chat feed with eve, all about contacting me, but we should also allow it to answer questions about the game or me.

Contact is now a chatGPTom chat feed in all three places it used to be: the header's dialog, /contact, and the phone sheet in the town.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/a3471a92-3.webp "I think I've gone too far with the phone thing for now, not a bad idea but it would need a ton of work. INstead, let's just make the contect form into a chat feed with eve, all about contacting me, but we should also al…")

> I want this to be a chat button under the invetory one -- it should use the right sidebar for the chat, not a modal or a page

Still open from before: aI Gateway credits for Sonnet 5.5; formSubmit delivery from the server hasn't been confirmed, because testing it emails you; design…

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/4945d8ec-0.webp "I want this to be a chat button under the invetory one -- it should use the right sidebar for the chat, not a modal or a page")

> okay this should submit a chat and the AI should respond

Typing "Testing this" in the side panel now gets an actual reply instead of a made-up message draft.

> It's not scrolling to the bottom with new content.

> I'll need a new chat button in the top right. chat feed gets too wide when expanded
>
> Don't retain past sessions. a new one is just a fresh context

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/b3a574ec-1.webp "I'll need a new chat button in the top right. chat feed gets too wide when expanded Don't retain past sessions. a new one is just a fresh context")

> need alignment here

The chat now lines up with the panel's head: the text starts where "chatGPTom" starts, and the bubbles and composer end where the head's buttons end.

> "The author" should be emphasized to "Tom's" be sure to give this agent clear context of where it is, what it's supporting. This is my portfolio site, this is full of content from me. It should be able to reply in a light tone, give it a tiny bit of wit and sarcasm.
>
> I also need to see the UI for each of the replies that could be there. I need you to put the UI chat components in here: (link) and show a bunch of example conversations and how they'd work

I rewrote chatGPTom's instructions so it knows it's on your portfolio and always calls you Tom, and I put the components plus ten example boards on the Paper…

> I don't want a dial composition here. If there's a message, it should be in the composer, not the in the feed

> Use the up arrow icon for send button, make it primary when there is text entered.

> Just updated some radius and paddings (link)

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/3e5c6c12-0.webp "Just updated some radius and paddings")

> chat gpttom needs to be in the bottom on mobile. also, sheets on mobile when expanded shouldn't have a top border radius

I made both changes on phones.

![chatGPTom on a phone](https://www.tomjohn.design/images/content/tomjohnville/progress/more-460.webp "chat gpttom needs to be in the bottom on mobile. also, sheets on mobile when expanded shouldn't have a top border radius")

> The new message icon should be a plus

The New chat button in chatGPTom's header now shows a plus instead of the pencil-and-square icon.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/10b22c9e-1.webp "The new message icon should be a plus")

> if chat gptom gets a message, how do I get it?

Messages arrive as emails to …, sent through FormSubmit.

![Talking to chatGPTom](https://www.tomjohn.design/videos/tomjohn-design/chatgptom.mp4 "if chat gptom gets a message, how do I get it?")

> I want to make chatGPTom into an in-game character that greets the player, not a sidebar. I'm thinking it should look like a digital version of me, maybe floating, that stays near the entrance, and players can talk to.

I like the idea, but I haven't built anything yet.

> I'm pictuing something that greets new users. Look at this for the conversaton mechanics: (file)

I looked at the Ditherface Tux Mechanic workspace.

> bring in the conversational aspects from the ditherface branch into this

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/1eebe937-0.webp "bring in the conversational aspects from the ditherface branch into this")

> Get rid of the legs, have it like I'm a floating genie or something. Also I want to have hand movements when I respond, and a thoughtful pose or two while the answer is generating.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/137a3cf9-0.webp "Get rid of the legs, have it like I'm a floating genie or something. Also I want to have hand movements when I respond, and a thoughtful pose or two while the answer is generating.")

> More glitchy. Not a tail, like it's made of pixels. I want it to have some motion as well.

![chatGPTom by the bench: ask me about Tomjohnville](https://www.tomjohn.design/images/content/tomjohnville/progress/ask-chatgptom.webp "More glitchy. Not a tail, like it's made of pixels. I want it to have some motion as well.")

> Also, since this panel is persistent trhoughout the game, if someone opens the chatgptom panel, I want it to go into this dialogue, but not on mobile... how does this work on mobile?

> maybe on mobile. I'd have to see it

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/fabe7563-0.webp "maybe on mobile. I'd have to see it")

> Okay maybe not glitchy, but just a dithery pixel tail. Also, add the chatgptom icon on his shirt and before the name on the map to drive that association

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/437a72a8-0.webp "Okay maybe not glitchy, but just a dithery pixel tail. Also, add the chatgptom icon on his shirt and before the name on the map to drive that association")

> The transition away from the chat to the game is all janky

I fixed it. When the chat closed, the town went blank for a few frames and then cut straight to the isometric view.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/82f46e35-0.webp "The transition away from the chat to the game is all janky")

> running away should close the conversation

Running away from chatGPTom now ends the conversation: the chat closes, the camera morphs back to your previous view, and he dithers back to the sign.

> Why isn't the chat in the sidebar anymore?

Because I took it out.

> yeah put it back

Pressing it now starts the conversation.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/b79134f5-0.webp "yeah put it back")

> ALso, have it play a relevant audio cue when the character is opened for the first time, but not when the panel is. Something I say that would make sense in a greeting

![chatGPTom saying hi in front of the sign](https://www.tomjohn.design/images/content/tomjohnville/progress/genie.webp "ALso, have it play a relevant audio cue when the character is opened for the first time, but not when the panel is. Something I say that would make sense in a greeting")

> Generate a bunch of suggestions that could be displayed in the chatgptom chat UI based on their location in the map, and what they've already done. Also, generate some replies for each of those that can be cached so we don't incur more AI costs.

The main changes are in src/lib/chatgptom/suggestions.ts (new), src/lib/isometric/chat-area.ts (new), src/lib/chatgptom/front-door.ts…

![chatGPTom's suggested questions](https://www.tomjohn.design/images/content/tomjohnville/progress/more-776.webp "Generate a bunch of suggestions that could be displayed in the chatgptom chat UI based on their location in the map, and what they've already done. Also, generate some replies for each of those that can be cached so we…")

> up and down arrow keys should move this between the options. Also, make the 5th option an other field, where the user can type whatever they want and it make the chat happen. vs the input being separate.

![Talking to chatGPTom at sunset](https://www.tomjohn.design/images/content/tomjohnville/progress/sunset-genie.webp "up and down arrow keys should move this between the options. Also, make the 5th option an other field, where the user can type whatever they want and it make the chat happen. vs the input being separate.")

> I want the text in 5 to say "something else"

Row 5 now says "Something else…".

> Something else...

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/fcc9b4dd-0.webp "Something else...")

## Halloween

> decorate my town for halloween. Make my boys harry potter and Ron, my wife professor McGonnogal. And make the boys riding brooms around the camper. Make the default night mode, add pumpkins, and give every NPC a costume. Add skeletons, spiderwebs, and just make the whole town spooky. Also make the trees all have fall leaves or be more bare for fall.

Your town is dressed for Halloween.

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/be1e5b96-0.webp "decorate my town for halloween. Make my boys harry potter and Ron, my wife professor McGonnogal. And make the boys riding brooms around the camper. Make the default night mode, add pumpkins, and give every NPC a costume…")

> I want the skeletons to be NPCs as well. Some of the decorations are overlapping with other game assets. also add some of the ground lights throughoutt he woods ans street lights along the road to the campground

Everything's in and running on which opens at night.

> add crawling spiders and monsters to the woods, add even more ambiance to the world. More than just the jack-o-lanterns

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/64d33aaf-0.webp "add crawling spiders and monsters to the woods, add even more ambiance to the world. More than just the jack-o-lanterns")

> replace the campfire with a bouiling caldron, have my wife stirring it

The campfire is now a glowing cauldron, and your wife stands at it stirring.

> I want it to be glowing

![A screenshot from that turn](https://www.tomjohn.design/images/content/tomjohnville/turns/92ce4901-0.webp "I want it to be glowing")

> Some NPCs are missing costumes. Add them. I want all NPCs to be wearing something. Also add some more costume types, find some other popular costumes from this year and add them.

> I want the tables to have a bit of lighting

> I also want the NPCs to be aware of their own costume so they can respond about it -- and also they should try to be in character for what they're dressed as

![A cauldron glowing green by the camper](https://www.tomjohn.design/images/content/tomjohnville/progress/halloween-cauldron.webp "I also want the NPCs to be aware of their own costume so they can respond about it -- and also they should try to be in character for what they're dressed as")

> Look at the haloween pr and branch, I want to make a mission where you have to find your costume pieces (hagrid) so you can go trick or treating aruond the town with the kids. Let's talk through the game mechanics and how to do that

Later, if there's time: tricks, pumpkins going out, AI clues, and the candy counter.

![The town at night for Halloween](https://www.tomjohn.design/videos/tomjohnville/halloween-night.mp4 "Look at the haloween pr and branch, I want to make a mission where you have to find your costume pieces (hagrid) so you can go trick or treating aruond the town with the kids. Let's talk through the game mechanics and h…")