# Whiteknuckle Side project · Big rig routes · 2026 [Whiteknuckle](https://whiteknuckle.app) ![The camper on a route via I-40 through my generated world of hills and trees, the road's clearances listed beside it and its elevation below, the view swapping between the drive and the map](https://www.tomjohn.design/videos/whiteknuckle/intro.mp4) I've driven a 46ft fifth wheel and 22ft long truck almost every week for the last 6 months. As of this writing that's about 12k mostly unremarkable, fairly easy miles... mostly. When things are tight in a rig that size, the drives can be very stressful. There are apps out there for RV navigation, and they're mostly pretty good, but they don't tell you the difference between a road you *can* fit on and a road you *shouldn't* fit on. Finally, after 6 months of bad directions and mostly good luck, I decided that I could build an app that would help me review and "drive" my route before deciding if I could take it. I shared the initial Claude concept in a FB group, and learned I was for sure not alone. This app is the solution. It doesn't just look at length and height, it also looks at wheelbase, pin location, bed length, turning radius, engine power, and then generates a 3d model and report showing where you'll drive the road, where the tight turns are, where the bridges will be tight, and where the shoulders will be non-existent. It's become a much bigger idea now, and I've got quite a few people signing up to test the early versions. It's a difficult app to design, but I've already found it really useful for a few routes, and hope that I can make it accurate and helpful for others. ## Driving New Priest Grade This is the route that kicked off the whole project. Highway 120 from the central CA valley up to Yosemite. My RV nav app said "go for it". My eyes said "woah that's tight". It is. Now it's turned into this whole project. > I want you to pull the camper and the truck models and driving characteristics from the local tomjohn design repo. The goal of this project is to be able to "drive" routes and find issues for travel for me to be able to drive with that truck and camper. I want to be able to put in a specific address on google maps, and be able tp place the truck there and then be able to drive it to see if I'm too big for those areas. This will invove real elevation data, real map data, etc. > > As a proof of concept, here's an area that I'm trying to see how I'll fit on it New Priest Grade Rd, Jamestown, CA 95327 . I want to be able to pull in the accurate elevation data, lanes, etc, and use the satelite imagry to make a realistic version of this road. I've built Big Rig Planner in this workspace. ![A truck towing a fifth-wheel camper up a narrow mountain road in 3D, warnings listed where it crosses into the oncoming lane or nears the edge](https://www.tomjohn.design/videos/whiteknuckle/route-planner.mp4) > I don't think the scale is accurate. The original models in my portfolio were scaled up to make them better for gameplay, did they get scaled back down here? > > Also, the camera needs to follow the road height, not the elevation, as the bridge caused it to drip. I think the road may need to be a generated asset vs what's in there, so it's a continuous path. It's hard to tell the lines and lanes and shoulders at times. Might need to duiscuss this, but the accuracy is important. I'd like some kind of heatmap on the path that shows where the turns are too tight. > > Also, does the drive route replay my drive or is that a generated drive by the computer? I'd like to see the actual tracks and the route, would be nice to be able to scrub the bottom of the route to move the truck to each of those stages. Being able to drive it manually is nice, but the primary goal is to see it driven, not spent the time to manually simulate the drive (but cool to have that) The scale was already right: the planner draws your truck and camper at true 1:1 size, not the site's enlarged gameplay scale. > Let's bring in more accurate data. tell me what you need for the Google maps API. Also, smoothe out the road curves, the road drawn right now is missing the curves. Two parts: the Google requirements (I'll check their terms first, since that decides what we can use the data for), and the curve smoothing. > For the play, I also want to have the option to speed up the green bits and show the problematic spots in real time vs the whole thing being the same speed. > the mouse hover effect on the bottom chart isn't tracking to the cursor position. The key can be removed. Get rid of the purple colors, move everything to baseUI and only use semantic colors. Simplify to geist font. Remove excessive explanitory text. Google won't make the measurements more accurate: its terms forbid using its imagery for that, so it can only improve what you see. > Google 3d isn't working, the generated road is floating above the 3d one. First reproducing what you're seeing. > Looks like google 3d isn't a very usable dataset I agree: Google's 3D is not useful on this road. > let's add in the usgs lidar and remove the google 3d I removed Google 3D and added USGS lidar along the route. > that lidar dataset has resulted in a lot of bad lanes and road models. You were right: letting the lidar set lanes was a mistake. > Add in Caltrans lane and shoulder width records as well. I'd want every location to have as much data as is possible Caltrans lane and shoulder width records are in, and every part of New Priest Grade now has measured data. > When in drive mode, I want the up and down keyboard arrows to progress along the path, not for them to take you out of autosteer mode. Add a toggle for that. I've added an Arrow keys toggle with two options, Scrub and Steer, and Scrub is the default. > investigate if there are ways of getting buildingdata and overlaying it on the map. Google 3d was shown to be poor quality for the actual road plane, but I'd assume it would be good for getting other 3d assets for city driving, etc They have different rules. > There's a weird circle in the middle of the screen that shows up when I move around the screen Fixed: panning away no longer cuts a hole in the building in the middle of the screen. ## Planning a route These are the first steps I took -- just seeing if I could use the app to generate a route. It was all based on the first prototype and showed me a lot of things that needed work, like how the app "drove", how it determined what a good or dangerous turn was, how roads rendered, etc. > The route builder isn't great. when the page loads, I want the overhead map, and to be able to select a place on the map as the starting position, or type in a location, and then select the destination. I want the route to bascially only focus on the problematic parts of the journey, so in the HWY 120 example, that would be the approach of the grade. > > How could we be suire that it works well for long routes? I'm fine with starting on predefined routes for now, but want to be sure this works for any stretch of huighway and can work to analyze an entire route for problem areas. The page now opens on an overhead map, and the planner only drives the problem parts of a route in 3D. ![The camper on a 3D mountain road beside a list of warnings and the route’s elevation profile](https://www.tomjohn.design/videos/whiteknuckle/better-route.mp4) > Pull in the camera controls from my porfolio, specifically how you can pan around the map, but arrow keys snap you back tothe player, how when the character (or rig in theis case) is out of view there's an indicator on the edge o fthe screen to bring you back. > > in overhead mode clicking and dragging should pan the map, not spin the camera. > > Add in the ability to switch you not a satelite view, just the "map" version, or something that's more of an obvious 3d environment. Get rid of the driver cam. > > When I zoom out, make the route path thicker to show a single line segment of the route, colored to show the problem areas. All four changes are in and working in the app. > the map is loading in very very slowly. What tilesets are we pulling in that require such a large asset? The size of the files wasn't the main problem. > roads seem to be clipped based on camera position, i'd like those all be be pulled in and overlayed on the map, not as a 3d asset, but as a drawing layer, so I can see all roads, labeling, details, road names, etc. This map view should be an actual map. > make it so that holding spacebar when in chase mode allows you to pan the map. Rename it to 3d. Make it so that clicking on the truck locks the camera back on it. Space is currently the brake, so holding it to pan would also brake and stop a replay. > make it so that hitting r rotates the camera 90 degrees > add clear annotations for start and end of the route. Space-drag to pan in 3D: hold Space and the cursor becomes a hand; drag and the ground you grabbed follows the cursor. > route planning doesn't seem right. I put in La Push washington (need fuzzy search and autocomplete for these inputs) to Cannon Beach, Oregon, and it brought me back to California. A fresh session routes correctly. > Also, I'd like to see the route it defines, and have it follow trucking routes, but I also want it to plot and show routes that you can't take, but would work for a car along the way as wel las the obstructions that caused the rertoute. Use case: If I want to go from point A to B and there's a low bridge, I'd like to know where that would be in case Google maps suggests the "wrong" route. The planner now follows a truck route and shows the car routes it rejects, with what blocks the rig on each. > really seems to get stuck on these loading roads state. Also no good affordances for when the loading is occuring. Both screenshots are stuck at the road-loading step: the drive is waiting on Overpass road tiles (OpenStreetMap), and Overpass has been timing out today. > tilesets need to load in first along the route. right now things are loading off in the distance and behind the path, but while the initial loading is happening and the roads are being generated, tilesets should be pulled in as well. Two small fixes: in drive mode, show the app's own busy step alongside the planner's tasks; and fix the duplicate React key warning from the dev log (detour rows keyed two obstructions the same way). > Intersections need to be handled differently. This is an example of an intersection that, yes, logically looks incompliant, but this is how all 4 way intersections are (need a wide turn, and will cross over traffic. Also, in this case the truck didn't drive it properly. I would have been able to avoid it by delaying the turn and then takling the corner much tighter. This blue line kinda shows this. The loading no longer sticks, and turns at intersections are now planned and checked as a real intersection. > same intersection is still problematic. We also need to include more of the adjacent roads when there are intersections in the model The intersection in your first screenshot was never treated as a junction. > It's this intersection in Aberdeen washington. . I've confirmed that there's no reason for it to be an issue. X4H7+Q2W Hoquiam, Washington. It's a 2 lane highway turning onto a 2 lande 1 way road -- it's even less of a concern than I thought since there is no opposing traffic. It seems to be missing that lane direction data. > This is the left turn in Hoquiam WA from Lincoln ST onto Simpson ave, which is the path of HWY 101 > That junction should not be flagged, it's a total non-issue. > ah, it's 5th onto Simpson. Licoln engs 1 block before > *ends one block before The 5th Street → Simpson Avenue turn is no longer flagged anywhere. > Move the route to the left side in a panel, same panel as the start and destination. full height, resizable, pushes over content, hideable. make the route list much more actionable. I want each segment to be clickable, and when clicked to load a right panel with the information about the individual segment. it would show the distance, grade, duration, etc all in the right panel. There will be a primary CTA to drive that route, which would go into the playback. > > Esc will always go back to the previous screen. The route now sits in a full-height left panel with the start and destination, and clicking a segment opens a right panel with its details and a Drive button. > Those options in the left panel are not needed. The ones in the right should be on the left. Let's get rid of the right panel and just have everything be on the left. The right panel is gone and everything is in the left panel now. > Add map view to the top level map vs just the satelite. make it the default The route map now has a Satellite | Map switch, and it opens on Map. > retain routes when going back in the browser. Save past routes. Remember typed in places, cache built routes that the user has waitted for an built. Make the app state more fault tolderant. Back and Forward now step through your routes and drives, and a drive you've already waited for comes back instantly instead of rebuilding. > The left side panel information can be confusing, and I'm not sure I want the categorization. Let's refactor that list of steps in a route to show all in a sequence, not breaking them into different groups. Also I think we have 1 nested level too far, as I think the first selection on the route should be all that we need. > > the headings i'm talking about are "stops the rig" "clearances" etc. This organization doesn't make a lot of sense and is confusing. Also grouping the alternative route in there with other items and calling it a "car route" is also confusing. This should be shown as a separate alternative route that has been ruled out, not as something in the list. When the routing is done, we should show the available routes, with information about their duration, number of issues, and then the user should be able to review them individually and even drive the problematic or restricted ones to see what they look like. I want to know why a route is off limits clearly. > > I'm also not clear on how the route segments are defined. For example, in this route through montanta, I'd want to be able to see all of this as a segment, but I have to chunk it out into 5 pieces. which makes the experience more confusing and clunky. A route should be one segment, but I should be able to focus on specific areas of it that are problematic. Maybe from the first hazard to the last or … The side panel is now one list in route order, the phone's route appears as a separate route with the reason it's ruled out, and you can drive any part of a route up to 25 miles. > Let's not make those items accordions, instead show the details in an ajacent popover when click or on hover after a duration. We'll be able to add more detail in that if needed. > Something like this, a reason for this route to be not viable, needs to be shown in that list of directions. Also, I want to show steps in the directions list for where there is just driving. Also let's make the list of items look more like a sequence, with a vertical line on the left between the icons. > somethign like this > These look like they're part of the list of directions, not parents. All three changes are in. > Add a small routes header above them, and a divider below, vs cards > Get rid of the bar. thats on the top of the list The bar at the top of the list is the route strip with the drive's two ends. > arrow keys up and down should allow me to go through the nav steps > Make the routes sticky Routes heading and divider: the cards are gone. > update all app scrollbars to be smaller, match theme, and only show on scroll. offset right sides to anticiapte the scrollbar but avoid layout shift. Scrollbars across the app are now 6 px wide in the theme's grey, and appear only while that box is scrolling or the pointer is on the thumb. ![A route’s problem spots on the map, then the camper driving them over satellite imagery](https://www.tomjohn.design/videos/whiteknuckle/route-map-drive.mp4) > Make it so that when you type in the start and end values it doesn't generate the route until you click "find routes" Picking a start and destination no longer finds the route. > Find rounds should be full width button under that > It should turn into the loading state, not a separate item Find routes is now a full-width button under the rig row. > Make the find routes button primary only when new destinations are entered, hidden when the text hasn't changed. Remove the rig picker row. Add a "New route" header, with the collapse button to the right of that, but only collapsable when the route is added. > These should retain the address, they reset to the lat long coordinates I've fixed this: when a start or destination comes in as coordinates, the field now shows its address. > This list on the bottom should be under that directions tab, let's rename it to something else since I get why directions isn't accurate. Maybe turn-by-turn I moved the findings list into the second tab and renamed it Turn-by-turn. > The screening loader needs to be moved out of that sidebar. it also shouldn't happen at all until you decide to simulate the route. It doesn't change anything before that happens I haven't changed anything yet. > okay, yeah, let'sriff on this this a bit on where it could go [link] Each one is drawn over a real dark-mode capture of the planner part-way through screening Priest Grade, with the sidebar loader hidden. > Try the lower left hand corner > *right The screening loader now sits in the map's lower right-hand corner, and the sidebar no longer shows it. > Lower right hand corner of the screen The screening chip now sits in the screen's lower right-hand corner, beside the map credits rather than floating above them. > in paper. I need to keep riffing. Make it more of a card All four sit in the screen's lower right-hand corner. > This one. [link] build it I built card A in the lower right-hand corner of the screen, in place of the small chip. > Need to simplify the iconography and labeling of the app. I want to use the new badge that was added instead of the exclamations and x marks that are on the lists for routes. I also want to add some badges to the other turns and elements in the turn-by-turn list to clearly show which ones are problematic and why. The new badge (the grade chip's pill) now replaces the loose ✕ and ! > Clicking on one of the waypoints in the sidebar should zoom the camera but not change it from 2d to 3d or 3d to 2d (top down) maintain camera orientation Clicking an item in the drive sidebar now zooms the camera without switching between 3D and top-down. > put the badge on the right side, aligned with the title for the row, above the miles data. In Turn-by-turn, the badge now sits on the right side of the row, level with the title, and the mile is right-aligned under it. > What shows in that list? Is it just the things to be aware of? I also see heights that aren't on the route on that list and it makes it a bit confusing. Directions: the start, each turn or change of road, and the arrival. > yes, take them out. I think they're great to have on the map, but in the idrections they cause confusion. I want the route to show every sequential step of the route, includdeing the mundane ones "drive 50 miles". I want to know every single detail, but also in the future be able to filter and only show the ones that are problematic or need a second look on the map. The low clearances off the route are out of Turn-by-turn, and the list now has every step of the directions in order. > what are the numbers on the right? On most rows it's the mile marker: how far from the start that step or place is, to two decimals. > The mile marker isn't really that helpful I've taken the mile markers out of Turn-by-turn. > I want a simplified badge for these like what I have for the rating. > Also the right text should align with each other Every status badge now has a mark taken from the rating's own marks, so the same mark means the same severity everywhere. > I don't want the same mark and icon for these, but I want a similar look. > I don't think I need words in this badge The status badges are now mark-only, each with its own mark, drawn in the same style as the rating badge (bold, rounded, on the level's tint). > I want the badge alson on the right side for the suggested routes so this aligns The badges on the suggested routes are now on the right, level with the route name, with the trip time under them. > The route badges shouldn't have been changed here. Those need the chevrons > Just the icon when it's in the row, the bull badge when it's above the report The route badges have their chevrons back, as the mark alone in each route row. > The badge should replace that ! icon above the report. The full badge, chevrons and name, now sits in its place above the report's heading. > The rating should be easy, medium, expert, and impossible... what's the tight coming from? Where "Tight" came from: routes only get a rating once screening finishes and the AI grader answers. > No that's fine for the 5, I just want to be clear. I want to have a simple rating system for each route. | Rating | Badge mark | Colour | ![Turn-by-turn steps for US 101 on a map, each bend’s radius marked, beside Street View of the Cape Creek Tunnel](https://www.tomjohn.design/videos/whiteknuckle/turn-by-turn.mp4) > why is this driving the route twice and loading caltrans data for a road that is out of california? (going to the sun road) The last trace monitor has expired too. > there's pther data that overpass provides, can we get that as well? Buildings, satelite images, etc? ch actually offers beyond Overpass queries. > Also the map visual is much better. I'd rather use theirs and style it | Map tiles | Yes: the 2D route map's Map style. ![Stepping through the turns of Going-to-the-Sun Road, each one shown on the map](https://www.tomjohn.design/videos/whiteknuckle/sun-road-steps.mp4) ![Hovering the turns of Going-to-the-Sun Road on the map](https://www.tomjohn.design/videos/whiteknuckle/sun-road-map.mp4) > The map zooming interation is jittery - I want to make it smooth The map now zooms smoothly: every scroll, trackpad swipe and pinch changes the zoom a little each frame around the pointer, instead of jumping a whole level at a time. > Need you to research and plan on how to get lane closures, and affected areas for construction. It will not be possible to predeict lanes accurately for contrsutction, as cones and dividers can change, but if there's any data we can get let's dig into it > Also seasonal closures for roads or time of day would also need to be brought in. Chain restrictions, all that Plan: work zones, closures, seasonal and chain restrictions > go for it. make the icons and set up the functionality and i'll add the credentials later, just detail the steps for me when you're done The planner now reads closures, chain controls, work zones, seasonal closures and wind or winter alerts, and flags them on the route. > how is constuction or road closures shown on the map and the 3d encironment Mostly as ordinary findings on the route map. > let's not focus on weather alerts for now, but yes, add those to the 3d env Closures, lane closures and work zones now show in the 3D drive. > I'd want mapterhorn as a faster cheaper initial build, and only load finer detaild tiles on the actual route vs the entire scene. Reduced drive simulation time would be a hige beenefit and less cost overall from fetching data from the usgs endpoint I've built it: the drive's own ground still comes from USGS, and everything else in the scene now comes from Mapterhorn. ## Tunnels, Bridges, and Turns The easy part was putting the rig model on the map. The hard part was making the map drivable. To do that, I've had to make custom tooling for tunnel entrances and profiles, bridge trusses and length, roundabout dynamics, lane congruency, interstate interchanges, road lines, you name it. > how are we generating the models for complex highways? also, how are we generating them for bridges / tunnels / low passages? I want each of those to be reviewable in playback, I want to be able to see my rig under the clearance with a definition of how much is there, and I also want to see alternative routes that are blocked by a low clearance along my route, so that I don't accidentally take them if there was a detour. Before these changes, interchanges, bridges and tunnels weren't really modelled, and part of it was wrong. > bottom chart isn't respecting it's bounds. Make this an anchored bottom drawer. Get rid of the one to the left of it, move the controls out -- with the stats at the top of the road canvas, The truck and camper lines showing on context over the model. Some of those stats are not dealbreakers. > > Also, this turn by the AI is totally wrong. It could have easily followed the patch if it had done a line more like this . Also, this road in particular is gravel and does not have 2 lanes. The road drawing doesn't seem to be aware of off road portions or gravel roads. I need that context passed in -- it also seems to have routed through a partking lot. > > Route is inquestion is Dumbarton Quarry Campground to Yosemite Pines RV Resort, these screenshots are taken from the very beginning of the route. I've rebuilt the drive layout and fixed the bad turn and the parking-lot routing. > This is a better line for the turn, The truck can go over a median in order to make the trailer be able to make a turn. This is very common. The blue line swings the truck wide over the median into the other carriageway so the camper clears the corner. > and would not result in a violation. I see nothing abouyt these turns of conern, be sure that we're not over indexing on some of the issues that are causing a red validation The Paseo Padre turn now takes your line. > tunnels are great, but the visual is bad. How can we solve this? > Also something like this needs a next level of alert. Like it's literally going to cause an accident and there is no "don't go here" it's more like "you will desstroy your rig and there's no way you can do this" Screenshotting it from above the hill and from road level, with Show from the Clearances list. > Good, but also look at the map. This is driveable area . You're restricting the road path too much. The drive now uses the drivable area. > Better, but accentuate the top entry, and add a road-like sign over it in the middle that shows the hight. . Also the landscape is collapsing into the interior of the tunnel, tunnels should have a clear path to the other side for ones where there is a fit. I've fixed the tunnel visual and added the stronger alert. > Much better but I'm still seeing that slice of terrain inside of the tunnel The terrain slice inside the tunnels is fixed: each bore now runs clear from portal to portal, and through the short Tunnel 2 you can see daylight at the far end. > okay, I don't actually want that edge area to look like the road, I just need it to be there but shown as a shoulder and drivable area and not throw up errors for the route. 6 m past the travelled way, then a see-through apron band. > Also we're getting lots of glitchy and shimemry edges of roads. Not desired. Roads should be smooth and uniform, shoulders and gravel areas should be drivable and not throw errors, or maybe just throw very minor ones. Roads are now drawn uniform. > bridge models are not good. Need to evaluate how these are drawn and the elevation and path of them. This is taken on the bridge in Astoria Oregon I've fixed the Astoria bridge. ![The rig on the Golden Gate Bridge, built from satellite imagery and 3D tiles](https://www.tomjohn.design/videos/whiteknuckle/golden-gate-satellite.mp4) > okay but does this do anything for all bridges or just for this bridge. I need it to work for all bridges, not just generated ones. Nothing is specific to Astoria, but not every fix reaches every bridge. > something about the roads near that bridge iss off. I know these are a straigh road, I can't tell if there's something wrong with the imagry or with the logic to determine the roads. It was the logic, not the imagery, and it's fixed. > but also work on the fixes for all bridges. I want them all solved -- work until it's done, test a bunch, and then pr and merge when done Bridges now get their height and width from measurements wherever those exist, not just at Astoria. > when I zoom in on the map, I want more granulartity on the line segment to show where the issue lies, vs the enire segment being shown as blocked. I've changed the map so that, when you zoom in, a stretch is only coloured where each finding actually is. > bug with the bridge in astoria. gap here. Also, I need the edges of bridges like this to be a hard line, so the truck can't cross over it. There should be some road edges that are blocking. Also, we need to restrict the drivable area off the the road and outside of the environment, make a wall that is translucent and blocks the truck from going too far off the map area. I've fixed the Astoria gap, made bridge edges hard, added blocking road edges, and put a translucent wall round each stretch. > That astoria bridge also should have very different dimensions. the map is showing it as a uniform height. bring in the latest from main, see if there's anything different with bridges, and then revisit this one. it should be a very short bridge with a high life on one side, the data and dimensions should be available for it, when generating a map, we shouldn't just make a straight line, we should see if there are datasets about the bridge / tunnel / interchange and pull them in. Fixing the tests' types for the new unplaced result. > This needs to be a system for any bridge, not just this bridge. The Astoria bridge now rises only over its shipping channel and stays low for the rest, and every bridge's deck gets the same treatment from the National Bridge Inventory (NBI) data. > heigfht restrictions that are off of the route should also be hidden until you zoom in. Height restrictions off the route are now hidden until you zoom in. > Turnturning dynamics still aren't quite right. When driving a fifth wheel the most important factor is keeping the trailer in the lanes, not the truck. You need to make it so the truck can cross traffic lines when needed to keep the trailer in side of the lines. This is usually done by waiting for gaps in traffic and is the best way to drive and swing into traffic. Medians and opposing lanes are not a bad thing to cross over into in standard driving when making a trun, especially on an intersection. > > Also, you need to add in roudabouts. It's not red for a truck to need to take the back tires over the middle areas, unless they are landscaped or not meant for commercial traffic. Writing the harness now ( it routes with Valhalla's truck router, drives the route in detail, and dumps each finding plus the turn the planner chose at every junction. > crossing over intop another lane is worth a callout, but only a danger on if there is a corresponding blind turn from oncoming traffic, so you wouldn't be able to see if that was advisable. Turns and bends: the camper comes first > Okay so that roundabout would not be an issue . notice how it has the pavement on the outside of the curves. The rig would be able to rid over that, as that's what it's there for. Also that demo route has a bunch of other red alerts for totally fine instances of the trailer going off the road slightly. A trailer going into the shoulder or median is not cause for a "won't fit" determinination, it's more of a "hey heads up". We need to be much more specific about what "won't fit" actually means. It's for instances where we'd actually tip off the shoulder, run into a bridge, or actual dangerous routes. We're overusing our determinations here. I've cut back "won't fit" to the situations you listed. > Something is broken at this road section right before the roudabout > Same after Both are resulting in incorrect alerts and Fixed: the approach and exit at the Kings Beach roundabout now draw and drive cleanly, with no false alerts there. > Why is this showing a hit That "hit" was a false one, and it's fixed. > I want more thresholds for the amount that something is out of alignment for an error. This should not even register. . Add in some gradiation for the heatmap and make it so that a sustained issue is more taken into account than a blip or a small tolerance off the path. > > Also this error is very hard to determine if it's a false positive or not. The lidar here is likly showing a tree branch. How should we handle this? Google street view shows a very small tree on the side of the road that would never be an issue Small misalignments no longer register, the heatmap is graded and weighs sustained issues over blips, and lidar branches are now only a heads-up. > why didn't the truck follow the lane here. 8 ft inside the edge line. > turning dyanmics are still wrong. I had a task for this earlier. This turn should have had the truck cross over into the other lane to keep the trailer on the route. Doing this is not a red alert, it's a warning. Not on Priest Grade (it swings fine there). > Add a danger condition for when the truck has to cross over into the other lane with a blind turn adjacent to it so the driver would be unable to see oncoming traffic. I've added the danger condition: a new Blind oncoming lane finding for when the rig is over the centre line and the road ahead hides oncoming traffic. > Add some logic for road grade and issues relative to power and weight. I want to be able to see if brakes would be expected to overheat, when turnoffs are advised to let things cool. I also want to be able to pull in speed limits, add signs to the map for transitions on speed, and also add signage to the maps for speeds on turrns and grades. I've added grade, brake-heat and speed logic for each rig, plus speed signs on the route map. > I want those speed limit signs to also be in the 3d environment The speed limit signs now stand in the 3D scene when you drive a stretch, at the same places the route map shows them. > Need better logic for turns like this that are just on an intersection. This should be more of a light greenish yellow than yellow. It's just a turn. Looking into how the heat colour is computed for turns — reading the checks and heatmap code now. > Also note that the shoulders of the road were ignored, when they'd have led to extra turning room That turn now reads light greenish-yellow, and the planner uses the shoulders to swing wider. > okay the turning looks good, but what's going on with this road draw at that intersection. this shouldn't be possible. Reproduced the jagged left carriageway on my branch. > Looks like it should be a 4 lane highway with a median The jagged carriageway is on the base code too, so my change didn't cause it. > Google satelite for context The spikes, wedges and sawtooth edges at that intersection are gone. > very typical for initial load to have the rig not facing the right direction to the route. You can fix this. The rig now faces down the route from the moment a drive opens. > That after is just as bad as the before E 4th St now draws as one four-lane road: two lanes each way, the rig in the right-hand lane, a yellow line on the median side and the other carriageway beside it. > Still not good. This is a straight road with clear lanes. it should be not be shown as a jagged series of shapes E 4th St now draws as a straight four-lane road: two carriageways side by side, steady widths, lane dashes, and yellow lines either side of the median, all the way from the start of the stretch to where it curves into the junction. > Bad map reading with low bridge on the road here. It's the parking garage but is showing up on the streen for Lincoln city outlets in Oregon. Check to see why the low clearance was shown on the roab vs the parking lot, see if there's a broader issue. The 6′6″ clearance belongs to the outlets' garage driveway (OSM way 359891352), not to East Devils Lake Rd. > I'm seeing a lot of false yellows and oranges on highways and for relstively easy routes. I need you to create a ton of routes and some mechanism to dig into every single fault and find out why it would be determined an issue. Start with long routes you know to be easy, then work your way to more mountainous or hazardous states. I'm seeing highways not draing lanes, sudden right turns on 4 lane roads that shouldn't be suggested, etc. Could be the data, could be the rules, but it shouldn't be happeing. I want a lot and I mean a lot of routes generated and validated. > > Don't stop until you see that every easy route that should be eay is determined correctly. Fixed confirmed causes of unnecessary exits, missing lanes, misplaced road attributes, false sharp bends, and bogus grades. > I want an admin page that allows me to see all the routes that have been tested on a map. I want to keep testing more over time. > Weird rendering bug with this Cape Creek Tunnel on 101 in oregon. It's jumping up a lot and showing a strike but not a strike. This is actually a really interesting tunnel, as I'd absolutely want to be made aware of it before going. It's a 14'6" tunnel in the middle, but 11'6 on the side. because of the arched profile. I know I can fit in the middel, but I don't know how close to the middle I need to be... so this is the perfect situtation for this app to help me undertstand. What data do we have about that tunnel, and how could it be used to tell me about this. It's passible, for sure, but might be impassible if there is opposing traffic. This is a strange one and I can't tell by looking at it what I should do as a driver. perfect for the app to help me. The bigger finding is that after the fix the planner says you clear Cape Creek with 6″ to spare. > I want a specific icon for tunnels and bridges. > Is there a way to get the actual profile of the tunnel shape from the data we have? It would be great if it looked like the arch of the realtunnel Tunnels and bridges now each have their own mark. > But that's not how the tunnel shape actually works. the tunnel is much taller than that. It's only 14'6 at this point on the arc (1) and then is 11' 6" further down. This tells me that there's plenty of room for my rig, and to not be worried about it You're right; I had it backwards. > That's still not what the arch looks like. it looks like it's like 16' in the middle A round arch 16 ft in the middle changes the answer back, so I haven't changed the drawing. > It's not only round, it's straight on the sides. I think what I'm trying to figure out is less this tunnel, more all tunnels. How can we ensure that we have an accurate profile? Tunnel height is only one factor. > This will be crucial for this specific tunnel though, As it needs to tell you if you can drive through in your lane or if you need to span the middle. that's crazy important details. > further north on that route there's also this weird lump in the road. That does not exist The planner now tells you whether you fit through Cape Creek in your lane or have to take the middle: it says "Needs the middle, 2′1″ over the centre line". > Multiple instances of incorrect turns here on the 101 in Florence Oregon . This section is a 4 lane highway, there are no turns. [link] > > The route appears to have inaccurate data and is making the truck suddently turn into a different lane. > > We need to be able to detect this impropert routing and lane issue. The rules for mantaining the 4 lane highway should be adjusted to make this not happen. The Florence regression now produces zero false bend warnings, down from nine. > So why didn't you change the arch profile here to match the image I gave you? Is it because you don't have a way to get that actual shape from the data? There are two reasons I didn't draw it to match your photo. ![Whiteknuckle marking a coastal route Won’t fit as the camper drives US 101 through the Cape Creek Tunnel](https://www.tomjohn.design/videos/whiteknuckle/wont-fit.mp4) > Add an admin page for it and build it Admin › Tunnels is built and working locally at Nothing has been saved to the database yet: the dev server writes to the production database, so the first real save should be yours. > I want to analyze the judgement and scoring for specific bends and turns. I think we have too dramatic of scoring for bends in a road. Does the current scoring make a whole route expert if there's only one bend that's tight? does it taked into account how far the truck turns or how long it's over the lane? > okay, I want to have better visibility into this. I also want the judgement to be more nuanced. For example, crossing over lanes at an intersection is not at all a problem. crossing over lanes at highway speeds is. The relative speed of the turn needs to be taken into account. The number of lanes, if it's on a grade, the count of tuns close to each other or in a row. A long series of tight turns is way worse than a single big bend. a turn on a grade is a bigger deal than a turn on a flat area. a turn over lanes where there's 4 lanes is a non issue compared to a mountain road. A bridge over water near a coast is potentally an issue for wind vs a bridge over a river. Open a bend in Turn-by-turn to see its approach speed, estimated turn speed, directional lanes, grade, turn sequence and estimated lane pressure/duration. > These are great. I want to see a semantic score on each of them. For example, the turn speed here is really interesting as below the speed limit, right? Having a projected speed vs posted speed would be a really interesting scoring mechanism. Yes—the screenshot shows 13 mph projected against a 55 mph posted limit: 42 mph below, or about a 76% reduction. > I want that popover to have a clean design with scores aligned on the right, or the value in a chip with the appropriate semantic color. Add some exploration here: [link] B: Values in semantic-colored chips. > I'm not seeing the photos in here at all. Also, these would be better as cards with the image showing. The Tunnels list is now a grid of cards, each with the tunnel's best portal photo, and 236 of the 324 show one. > no photo should be grouped The tunnels without a photo are now grouped together at the end of the list, under a No photos 88 heading, after the 236 that have one. > add filters to the top > I want to see the resultant profile for this with a 13'4" rig in context, I also want to see where it might be a hit. > > Some of these are incorect How do I edit? > I also want to see a 3d representation of the tunnel > Move the screening score to the top left, use icons for each badge that's relevant to the thing being scored, and also add one that uses the same circular scoring icon as what's shown on the step Screening score at the top left throughout. > Move the badge to the rifght, aligned baseline with the title, get rid of rthe "screening" header > I like the labeling from A with the the badges from B > I want you to add all of the icons for this to [link] along with any other icons that are for road conditions Added 43 editable icons and sign variants to Icons and badges, covering popover factors, scores, road conditions, clearances, lanes, bridges, and wind. > Some of these could be combined. Speed, for example could be one row with posted and projected being merged into a single row. I think the judgement in the middle should be removed. The "sharp" "major sloping, etc. Those could be a tooltip for the badge, not needed for the row > I also got rid of the dividing lines Kept your dividers removed. > what's lane basis “Lane basis” is the lane width used to estimate how far the truck crosses the lane boundary. > updated: [link] ” Also, “Two-way” describes direction but loses the lane count—“1 each way” would preserve that context. > updated it, also make a better icon for turn angle The new icon uses two straight arms and a measurement arc. > better sequence icon [link] > I want the icons to all be 15x15, with 1px stroke. This allows the svg to have a centerline Updated the current Paper popover and icon library to 15 × 15 px with 1 px strokes. > All icons should be 15x15px. Not just these. Add all icons to this page. Add a rule so that new icons are added here and always 15x15 px with 1px stroke, high contrast gaps (at least 1px between shape forms) -- put new icons in their own frame until approved and then move into the main group [link] Added 62 product icons, each in its own Pending approval frame. > The icons themselves should be aligned to the pixel grid. Verified all 315 library icons and 9 popover icons. > Make streets icon more like a t intersection. Hitch isn't good, looks like a electrical icon. Orbit seems to be incomplete. Add arrows to clearances Hitch: receiver and tow ball > okay, now build out the new popover > on mobile that should load in it's own sheet with the selection centered and have back and forward arrows to go through each step incrementally Mobile steps now open in their own sheet, with the selected location centered on the map above it. > Part of the profuile is also defining the plane. I'm not seeing that. Here's also an example where the shape didn't get tied to the correct part of the image. The tunnel editor now measures the arch on the portal's face, shows the rig against the arch with any hits, and has a 3D view. > I want the tunnel and profile to show up as if they are an image, and I also want to see my real rig in the 3d model version > I also don't understand why each photo has a different model and profile. The goal should be to use the photos to determing the singular profile and model, and use the photos to cross reference it, not to have a unique profile for each of them Your real rig is now in the 3D view, which opens looking through the photo itself. > The dots should show their height when selected. Clicking or dragging an arch point now selects it and shows its height above the road beside it. > The crown value shouldn't change as I drag it. I should just be using the dots to correlate it, while the rigth side should show the actual values, I'd be able to override them. photos have more detail than the reported heights. The dots belong to the photo. > I also want the curves to be smooth, but allow new vector points to be added or the curves to be adjusted luike how the bezier tool works in vector tools The arch no longer moves while you drag, its heights are listed on the right where you can type over them, and each photo's reading is now a smooth curve you edit like a pen tool. > We've got a serious scoring issue. I just tested Nashville to Bowling green and it's coming back as "hard". . This is a freakin easy drive. > > one turn is totally screwing the entire route . We should not have a grading mechanism that determines that 200 mile drive with 5 feet of issues is hard. > > You need to simulate standard drives between enpouints and adjust accordingly. > > Update, the anaysis just came back as Moderate. Still wrong. There's nothing bad about this drive and we need to adjust accordingly. I found two causes already: the initial report shows the worst local screening label as the route’s headline, and the grading rubric explicitly puts “an isolated tight bend taken slowly” in Moderate. > Th admin tunnel control doesn't make a lot of sense. The goal isn't fordragging the dots to change the hight, the coal is for dragging the dots to show where the measurments are. For example, on the arch cape tunnel in oregon, the measurement is 14'9" but it;s actually taller in the middle. So I need to be able to show where that measurement corresponds to the arch. The two arches that are there don't make sense. just make it one. I ahd a prior request to make it more like a vector tool, but that's not working well. Get rid of the second line. > > Also, the 3d representation should be the 3d model, not the image. And the 3d "actual" version shoukd be shown as the first tile on the top of the page, before the images. The images are used to tune and create that model, they shouldn't each have their own representation. They're all different angles of the same thing. the goal is to define it so that an accurate model can be made. I've reworked the admin tunnel editor. > I need to be able to add new dimenstions by clikcing on the line. often those are on the phoot but not in the data > Dragging the line doesn't work. I need to be able to make this kind of shape and I can't with the current controls Click the line without dragging. > The mirrored points on the line don't make sense Each clearance will show once, on the side where you put it. > Let me zoom in on the image > *images The mirrored dots are gone: each dimension now shows once, on the side where you put or clicked it. > Changing the arch on one image shouldn't change others that are saved. It should be a matter of associating the arch to the different images, to find the right shape and where the dimentions match Each photo now keeps its own fit of the arch: its shape on that photo and where each dimension sits on it. > This still doesn't seem right. Here's an image showing a tunnel that's 13'10" on the edge, and 12'7" on the left, but the camper model is still showing that it won't fit, when in realy there looks to be plenty of room. I don't think what is implemented makes sense. I need to know what reported dimentions are, and then be able to correlate that with the image. I also need to be able to add in the missing data from the image, as they are almost always labeled with additional heights that are missing from the data sources > This still doesn't make any sense. What is the line? What are you buiolding? > > I want to be able to use the image, TO MAKE THE SHAPE. You're predefining the shape and making it something that can't me moved without breaking everything. I want to be able to determine the shape, then choose where the height SHOULD APPEAR on that shape, with the other dimensions being used to add additional points to reinforce the actual height vs reported height. > > I need you to stop trying to make what you have work, and actually look at the problem I have and what I'm trying to solve. The data is bad, the shapes are unknown, and the images contain addional data and the geometry. I was predicting a shape and then bending it to fit the numbers. > make this make sense. I adjusted the 3rd image, when to the 1st, and it's like this. > They're all images of the SAME THING. i should not be able to have wildly different profiles, but should be chosing how that profile works on that image > I need to be able to set an image as primary and then the others are just about mapping the entry to that image vs chosing new shapes The editor now has one shape per tunnel, set on a primary photo; the other photos only fit that same shape onto themselves. > Evaluate this route: > > I think it's giving the wrong guidance, not sure why the instructions are taking the route to the lower level of the GW bridge, as the top level is passible. Investigate that. The router isn't sending you to the lower level. > The bridge is like... way more than 14'. It's only got road signs on the upper level, those are likelt well over 14, maybe even 16'. You're right about the bridge: the span has open sky over the upper level and nothing limits height there. > This is an open top suspension bridge. There should not be a height issue at all. Agreed, the bridge itself has no height limit. > In the same way we have logic for specific tunnels, i want to have logic for bridges so that the spans are accurate to the real look of the bridge. This is only something we should do for larger bridges or those with clearances. Large bridges are now drawn from their real span layout, the same way tunnels get their arches: a hand-checked layout for specific bridges, otherwise one inferred from the National Bridge Inventory (NBI) record. > I want an admin page for bridges There's now a Bridges page in the admin pages, under Tunnels, and it loads and edits bridges on the dev server. > I want to see the 3d model of the bridges on that page -- for the ones that have one Each bridge's page on the admin Bridges page now opens with a 3D model of the bridge. ![The admin pages for the Golden Gate Bridge, a tunnel and the trucks](https://www.tomjohn.design/videos/whiteknuckle/admin-structures.mp4) > Roads with no shoulders should be treated as more of an issue than those with them. for example, I just drove hwy 53 in oregon this weekend outside of cannon beach on the way down to coos bay. The turns were VERY tight, but the worst part wasn't the grade or the turns it was that there was no shoulder, narrow lanes, and in the southbound direction, a hillside right next to the road -- so no margin for error. On the other side, there was a dropoff, so direction wouldn't have mattered. Compare that to the 101, with kinda similar turns, and it was nearly 3-4x more stressfull to drive because the 101 has broad shoulders almost the whole way. For a road with no shoulders, you actually have to drive more over the centerline most of the time vs only on turns. This adds a lot to the severity of the road rating. OR-53 now grades Expert; it was Hard. > I also want the drive to show that "comfort" path of needing to drive away from the edge of the road and into the other lane. This is a correct way of driving, and it means you have to slow a lot more around blind turns to check traffic, which increases breaking temps, which also increases fatigue and risk. This should be something the AI is aware of and shows up in the drive for these types of routes The drive now rides the comfort line on roads like OR-53. ## The drive There's a lot more here than putting in some depth data and getting the scene to load. I have to bring in data from each state, from different satellite providers, then I have to simulate it with the real models, and load in the textures while keeping it performant. Lots of weird quirks and edge cases. > Lots of dropped frames when driving. Poor performance. Optimize both. I want 60fps and no dropped frames when driving. Driving now holds 60 fps on the proof-of-concept stretch (New Priest Grade), with no dropped frames while playing, hand-driving, or streaming new ground at 16×. > do it for scrolling, rotating, zooming in and out, etc Every camera interaction you listed now holds 60 fps with no dropped frames: scrolling, rotating, R turns, zooming in and out, panning and pinch. > The bottom drawer that expands in the drive mode should be the same component as the playback controls, not a new drawer. Also, get rid of the blur, and make sure it also offsets the camera position to work with the expanded bottom drawer. I made all three changes to the drive drawer. ![Driving a route over satellite imagery, the sidebar listing why it won’t fit](https://www.tomjohn.design/videos/whiteknuckle/satellite-drive.mp4) > That chart is the playback line. Expanding this should make the straight line into the gradient one. Also, the right side of that panel should be moved into it's own info panel on the right. That info panel could show better graphics for the tilt of the truck, brake temps, fuel consumed, etc. We don't have those yet, but let's move these over for now to the right side so we can add them soon. The playback line and the elevation chart are now one track: opening the drawer turns the straight line into the elevation line. > I want to see the current route line on the bottom right of the screen, like a minimap, but floating over the UI. it would rotate with the camera and show a dot for the current position of the rig Orientation matches the scene's own route line. > not in a circle, over the content with just the line While you're driving, the minimap now sits at the bottom right of the scene, just above the drawer. > the mninimap line should also show the colors of the line as well The minimap line is now coloured the same way as the route line in the scene. > Make it bigger, remove the shadow The minimap is now 200 px instead of 128 px, and the shadow is gone. > That right sidebar should only be there if toggled on, and should push the lower content and be resizable Everything behaves as intended. > Keep the minimap orienter north up, but just have the dot have a lil triangle indicator showing the truck orientation Both changes work: the right panel is off until you open it, and the minimap now stays north-up with a small triangle on the rig's dot showing which way the truck faces. > OKay I'm changing my mind about it being floating. Make it in a circle with the map in it. The minimap is now a circle with Esri's topographic map inside, the same map the route planner uses. > I want to be able to share simulated routes wihout needing to login. add the share option. I want any simulated route to be shareable with a link Any simulated drive can now be shared with a link, and the person who opens it doesn't need to sign in. > Move the share button to the top right corner of the map, also add the simulate button there as there's no way to simulare currently. Show it floating in the map view. When the simulation is happenining, show that with a spiner. When inn simulation mode show the turn bu turn on the rgight , as wha'ts in production, but then add a share button to the top corner. A shared path would only have the right side list and the 3d simulation, but the left bottom side would ghave a CTA to request access if they're not signed in. I've moved Share and Simulate onto the map, put turn-by-turn beside the simulation, and given shared links a stripped-down view with a "Request access" button. > Simulate button disappears on hover. Need a better secondary hiver state I fixed the hover: Simulate now stays solid when you hover it, in both themes. > Add a toast/chip/etc to the top of the page when the simulate button is clicked. "Select range to simulate" have the areas outside of the path be greyed out. Remove the majority of the icons from the path, just show the heatmap on the lines. Have the confirm be "Start simulation (Xmi)" Picking a range to simulate is now focused, and the button says what it'll do. > move that chip to the bottom of the screen The "Select range to simulate" chip now sits centred at the bottom of the map, just above the map's credits. > I want a better start and end icon, something with an arrow I've drawn two arrow-based options for the Start and End handles in Paper. > Add some options for the approve and simulate UI to Paper: > [link] > > I want to see the start and the end, I want the controls for starting it to be clear and the same controls as to confirm it. I'm pucturing moving this to a pill at the bottom middle of the sccreent that morphs thorugh all the sates and shows the progress. > Show a few different options. Embeeded button, floating card, drawer, floating pill, etc > Floating pill is it. [link] > the share link is failing Sharing a long route should now work, but I haven't tried your exact route (it takes about 15 minutes to plan locally). > simulated playbacks need to be 60fps. They're dropping frames. Don't stop until it's 60fps Simulated playback now holds 60 fps on every route I tested, including a CPU slowed to half speed. > The simulated driginv scenes should be retained on refresh and saved so they can be viewed if you log out and come back. This should be the case for routes and repirts as well That notice is only the old test monitor expiring after its 20 minutes. > The conversation should also be saved Each trip's conversation is now saved to your account too, alongside its route, reports and simulated drive. > Is the simulation distance needed? I'd like to be able to drop the dot for the rig on any point of the map and just start driving, and load the first 25 miles but then stream in the next region after that in 25 mile chunks. The 25-mile cap isn't really about simulation. > okay so can we do the streaming then? no end? Just pick where to drive and start going and sream the next sections in in chuncks, but only have a loader if it gets to the end when there's nothing left, but also be able to dump the previous areas if they're far enough behind the drive? Drives now stream: pick a start on the route and it plays to the route's end. ![Driving Going-to-the-Sun Road through a tunnel, with speed, grade and clearance under the scene](https://www.tomjohn.design/videos/whiteknuckle/tunnel-dashboard.mp4) > 3d scenes are dropping a bunch of frames when driving. I found and fixed the main cause. ![From the route map into the drive, through a generated world of trees and hills](https://www.tomjohn.design/videos/whiteknuckle/map-to-drive.mp4) ![Choosing a stretch on the map and driving it in the generated world](https://www.tomjohn.design/videos/whiteknuckle/stretch-drive.mp4) > The share link gives access to way too much. It should only allow access to the route itself. Right now it lets you search, create new routes, and doesn't restrict the AI. This should only allow you to see the 3d scene or the overall route, not access the full application. Share links now open only the shared route and its 3D drive. > 2d / 3d toggle should be removed in favor of a drive button. After clicking on drive, you should be prompted to choose the starting point of the drive. > > This flow from route to drive is kinda tricky. I'm not sure if it should feel like google street view, if there should eb a start and end, if you should have to wait until things load, or if you should be able to driuve a full route. The full route is likely not helpful, and waiting fpr the drive to load is bad, but pregenerating the full route would also be bad. > > I want you to create a simple local prototyope of 10 ways to go into and out of driving mode. Create a contrived scene, fake the loading, but come up with some good ways to allow the user to start going into the scene and abck into the map. I've built the prototype: one page with ten ways into and out of the drive, a made-up 60-mile route, a 3D scene and faked loading. > I think picture in picture is really interesting. That could load right way in the bottom corner, and you could show the rig on the line, as well as over the elevation. Then if you click on the elevation line or a directiuon step, the rigwould jump there anc you could expand or collapse it, and vise versa for the map, which we already have for the minimap I've reworked 7 (Picture in picture) to work the way you described. > We don't need the zoom animation for this on load, since it's fixed. > on the 3d scene On load, the 3D scene no longer zooms in. > I also want to show an indication on the route where the scene has been generated, as that would be cached. When it's generating, I want to see the loading indication on that line. It should load in 5 mile or so chuncks The route now shows where the 3D scene has been generated, building in 5-mile chunks. > okay let's build this The drive now opens in the map's corner with every route, and the 2D/3D switch is gone. > I want the picture in pickture to be a circle. And when it's loading, I want to show a clear loading indication around the edges of that circle, like with a 3px border and a radial indication. We should explore some different treatments of this. > > I also want the transition between the collapsed circle and the map scene to be clean, I want the circle to move up to the middle of the screen on an arc and then grow to fill the canvas area, and then the map to come in from the bottom edge of the screen and fade into view. I want it to do the same thing when switching back to map, the circle will translate and follow an arc up and then start expanding about halfway to the middle of the screen. The drive's window is now a circle with a loading ring, and the switch between it and the map arcs and grows both ways. > Add in dialkit so I can tune the motion, curve, and interaction. Also, the expand button should be an icon only, andd add a badge with "Generating scene" in the middle of the card. Rather than ship DialKit in the planner's bundle, I'll load the panel lazily on the dev server only; production uses the shipped defaults. > loading state for routes is also in need of a line to show the route. I realize the route can't be generated right away but a quick route can be, so what I want is for the "best" normal car route with no restrictions to show up, with the loading indication along the entire line, and then I want it to start moving and changing as more data comes in Testing on a route nobody has screened yet, so the scan runs fresh: Ely to Eureka, Nevada. > Look at the minimap and bottom elements that I have in my tomjohn design portfolio. I'm going to make this similar. All four pieces are in: the DialKit panel, the icon-only Expand, the "Generating scene" badge, and the quick route line while a route is found. > I want the loading map line to grow from the the first stop and follow the path to each, like mycelium growing out and then changing, or the old branches fading away. Also on dark mode make the route line white with a black border vs black with a white border. The route line now grows while a route is being found, and on the Map ground in dark mode it's white with a black border. > Make this loader a shimmer over the line not a dashed edge The loader under the route is now a shimmer: while a stretch's 3D is built, its unbuilt part is a faint band with a light running along it, instead of the dashed edge. > yes, make that shimmer The ring round the drive's circle now shimmers like the route's band and the elevation line. > I want the expand icon to be arrows pointing out > Also, hovering over the drive image there should show an expand button in the middle of the UI > of the circle I added the Expand button in the middle of the drive's circle, but it still shows the approved Fit view icon. > B expand icon The library's Map and layers group has a free slot after Span end. > also clean up the pending approval panel > Add an all icons frame that just shows all the icons on dark and then another that shows all icons in light in a grid ts that mirrors the Paper library, so Expand has to go in there too to keep them in sync. > Just the icons, 15px away from each other Dark frame is complete (108 icons). ## A generated world I started just assuming I'd be able to overlay satellite data, but it's not so easy. Performance is an issue, reliability is a problem, and the main thing is that a flat image looks terrible on contours when there's bridges, interchanges and rivers. I've now switched to building out my own generated version of the world with trees, climates, and crops. > false negative on this line segment. Seaside oregon hwy 101. > > We need to improve the road drawing logic. When there are straight line roads, we should not be interpreting them in this way. It seems that the map or lidar data is taking president -- smoothing is the norm, these jagged shapes are no where in the satelite or map data > > Also, add an option to hide the route so I can see the full sat image, and also I want metadata of the current location when in drive mode. I also want to see the street names and the side streets in their vector appearance. I've got the dev server running and am now locating the Seaside stretch of US 101 so I can reproduce the wobbly road in a headless browser. > here's more further down the road. They're squashing to one lane, this is not where in the map data. We're getting bad results. That baseline run finished before my last update, and its results are already in it. > your screenshots are literally still showing that the roads are not being drawn properly. You can see it bending in incorrectly. THis should be a straight line on both sides. > That's a 2 lane highway with a median. What dataset do you have that is telling it to draw those bends and innter curves? I already compared that re-drive with the original code in my last message, and nothing has changed since. > I need you to use this route as a validation for the analysis. some of the falust appear to be inaccurate widths of the road but I need to confirm that. At places it showing that one of the lanes drops off on the sides, which would affect normal traffic not jsut trucks, so I think it's just inaccurate. If it's inaccurate, improve the interpretation of the data to remove the issue. You were right: the road widths were wrong, and I've fixed how the data is read. > We need a good looking skybox for the game I've replaced the flat pale-blue background with a sky dome. > The horizon is too grey. it barely shows up. Ideally I'd like the fade to be using the skybox color. The fog now fades distant ground into the sky behind it, using the same colour function the sky draws with, instead of a single grey. > this is a road in knoxville. We need to adjust the road drawing logic. RIght now it appears to be generating each segment individually and is using the satelite imagry way too much. tree cover and poor resolution will skew this. [link] > > Also, the roads should have continuity and not be fragmented. Roads do not suddenly jump and jumble, but are straight lines with curves or right angles. You need to evaluate this and other cities or other tree covered areas and refactor the road drawing logic so that a road is a clean line with lanes and not a series of fragmented pieces with random angles and sudden elevation changes. as part of this I want you to make an admin panel page where we expose the properties and logic of the road srawing, and add the ability for me to enter in an address and see how the road would be generated in that environment. I want to also be able to annotate and adjust those so they can be passed back into you to improve the drawing logic. Screening the whole Knoxville→Asheville trip takes 8 minutes locally, and the mi= range already opens the drive, so I'm adjusting the harness to wait for the 3D scene directly. > Look at your latest screenshot. This is getting cut off suddenly and there are still visible artifacts and random angles. This is not a good result You were right: the version you screenshotted wasn't acceptable. > Tons of rendering bugs with a complex route : [file]. I voiceover the issues, you can pull the transcript and the timestamps and start to fix them. > > [link] 2 of your route locally and checked it, and the fixes for the later parts of the video (Bronx interchanges, tunnel, GWB) are untested. ![A narrated screen recording for Claude, flying through a city interchange where the generated roads and ramps break apart](https://www.tomjohn.design/videos/whiteknuckle/annotating.mp4) > more laps and issues to resolve [file] The batch-2 fixes for the second recording are in and checked on the Bronx → GWB stretch. > More updates, getting better but still a lot of things that need to be resolved: [file] I've fixed this round's problems on the Bronx → GWB stretch and added the features you asked for. > way too big, blocking the UI. And showing up too far away. Need to be more contextual The clearance tags are smaller now, and only the one that matters shows. > See f you can find more data on how we can acurately render the 3d world with accurate roads, bridges, tunnels, etc. If we can't do it from the data we have, then we need to reevaluate that and get better data. It seems like we're fighting to make bad data into something good, vs operating on the best data and working backwards. If a long name would run past its cap, I'll shrink the letters rather than squash them. > The look is getting better, but the roads are still not being drawn thw way I want from a 3d model perspective. I want you to create a separate environment with some contrive roads, bridges, and terrain so we can tune it with dialkit for all of the visual road properties. I want to also have props for all of the ways that roads join together, be able to see just the lines that derive the model (lanes) and be able to work on this without the vague back and forth > Also, you still need to resolve this poor road appearance. There's so many random chuncks and pieces and poor intersections and not straight bridges The Road lab is built and running at /admin/road-lab, but the drive's roads aren't drawn by its model yet. > road lab loaded once thn I tweaked a value and it craqshed to a white screen and won't load again The lab crashed on the first rebuild after any change, and it kept crashing on reload because your saved values trigger a rebuild straight away. > There's many obvious issues with the layouts in here. You can browse then and find the problems. Intersecting pillars, bad or jagged lines, onrams not merging into the lanes. Also it's nearly impossible to pan and move through this 3d space I went through every prop up close and fixed what I found. > mismatch at the ends of onramps before they join the main road > Terrain data is drawing over lane lines > Names of roads and fine details need to be removed with zoom levels > Tunnels need to go through the terrain > Roads should have some visibiliy with opacity when occluded by buildings or terrain I'm reproducing the four reports in the Road lab (on-ramp end seam, ground over the gore paint, names/detail by zoom, tunnel cut) before fixing them. > Stoplights or stop signs? Likely should have an indication > Weird missing chunk of the road at intersection > Lines are incorrect, would have some line that's for a lane merging or beginning. Road lines don't go to the angle, they start or stp with specific lines. > Missing directional arrows on the road top, to show flow of traffic > terrain data overlapping with onramp > Need more examples of very complicated roads. Find a way to make all the roads in the test env join together, make a real city looking area, add buildings. First renders of the new world are in; a shader failed to compile, finding which one. > werid bridge and shoulder artifact > okay I want the styling here to be put onto the real road simulation Before shots now (the test browser still has the old drawing loaded). > Go all the way with the implementation. I'll let you run for a while but I want to see th simulated maps looking like the test ones. With the same resolutions for the roads meeting each other, removal of random segments, smooth transitions, no jank, z=index overlaps, etc. The drive now draws its roads with the Road lab's model and look, so the real route is styled like the test world. > now that we're not pulling in the satelite data, there's no reason that distant road paths should pop in, the route's information should load all together, or very much startinf at the begining of the route and working it's way toward the ends as the route is builsing. Also, we should draw all surrounding roads in the 3d space, which is different from what I'd said before, but that was driven by the satelite data. > > When lanes diverge, the shoulders shouldn't block that, it should follow the edges of the shape of the road, not the lanes. > > I'm, not sure how shoulders are logically determined, but they seem to be based on nothing. They randomly start and stop on roadways -- they should only exist where an actual shoulder does and have the accurate dimensions of the shoulder. Distant roads no longer pop in. > opposing lane dioping below world geometry > > jagged edges in map data - we should smoothe these shapes out so they're less jittery > > random fence looking things on the ground not sure what they are or where they're from/ > > support pole from above road intersects with lower road > > This road geometry isn't right, i don't know what it's supposed to be, but here it's showing a land dipping out from the middle of itself and there's random lanes starting and ending here . the real bridge would have smooth contours and structure. > > edge of road issue still not fixed > if we're casting shadows, the roads should as well ![The rig on a highway interchange in the generated world](https://www.tomjohn.design/videos/whiteknuckle/interchange.mp4) ![Ramps stacked over one another at the George Washington Bridge interchange in New York, the camper’s route running through](https://www.tomjohn.design/videos/whiteknuckle/gw-bridge.mp4) > I want to test some more region specific textures and trees for the environment. Just the flat green floor isn't as good looking as the actual satelite data. So I want you to generate a bunch of different tree asets that could be pulled in for different regions of the US -- pine trees, birch, oak, aspen, maple, brush, desert, palm trees, etc. the region would determine which assets would be pulled in, and the region would also determine the ground color and texture, as I don't want everywhere to be green, but I want colors for desert or dry regions, etc. Exploring how the plain ground and its trees are drawn today (Overture land cover colours plus one generic tree shape), then I'll design region palettes and tree assets. > I want the trees and shapes to be equally simple, so they don't blow up the geometry, and I don't want more than a few to be loaded per scene. I'm very performance conscious, so we need to make sure we're not making anything with complex geometry > also make an admin pane that shows the different regional foliage with properties that allow me to tweak it The plain 3D ground now takes its colours, texture and trees from the region it's in, and there's a new Regions admin pane for tuning it. > Merge this when ready, and then start working on farmland. I want it to be regionally specific, and show crops planted in rows and with some level of variety. I also want to add grasslands and other regionally specific topography. Again, performance is a major concern here, so be sure to make these work in a way that doesn't affect that. > Would also be cool to have some determination for rocky areas or other types of terrain that aren't covered so far All of it is drawn by the ground's shader, so it adds no geometry and no draw calls. ![Flying over the generated world along the route](https://www.tomjohn.design/videos/whiteknuckle/generated-flyover.mp4) ![A camper crossing a bridge over a coastal valley as the satellite imagery switches to generated hills, trees, beaches and water](https://www.tomjohn.design/videos/whiteknuckle/generated-world.mp4) ![A panel of region settings regrowing the same valley as desert, pine forest, coast and farmland](https://www.tomjohn.design/videos/whiteknuckle/regions.mp4) > trees are intersecting with the road > Aslo, we can reduce the count of them dramatically. We just need enough to get the point accross, and the further trees can be massivly simplified into just a basic texture or sprite ts: swap far chunks' trees to sprites, and re-clear planted trees whenever roads arrive. > Also they should be removed when in between the camera and the rig. Could be done with some masking and occlusion, but might be better if if they're removed altogether I fixed all three: trees no longer stand on roads, there are far fewer of them with distant ones drawn as sprites, and any tree between the camera and the rig isn't drawn at all. > parking lots are poorly represented in the rendered lanes. It's only showing the driving path and not the parking areas. Investigate if there's a way to resolve this. OSM maps most lot outlines, but nothing in the planner reads them, so only the aisles get drawn. > I want the rig to be able to drive on parking lots in the same way they do roads. Parking is another factor of this, and entry into a lot with accuracy is important. Not just for visualization, but also for navigation The rig now drives on parking lots the way it does on roads. > Parking lots should still have lanes, arrows, and parking spots if possible > I'm also seeing parking lot textures going up over building textures in that durham example Lots now have stall lines, aisle edges and arrows. > I need to add support for gravel and dirt roads, so they don't show up as paved when drawn on the map. Investigate how we can get that data and start some tests to determine how it can work. Also if there are other road types, bring them in as well. Gravel and dirt roads now draw as gravel and dirt in the 3D drive instead of asphalt. > Yes, add those fallbacks. What do you mean by 2? Yes, we also want to avoid unpaved roads. The federal fallbacks are in and routing now keeps the rig off unpaved roads. ## The rig I started with the truck and camper from my portfolio, but now I've got models for all Super Duty trucks in every trim, and every variation of Brinkley camper with a few different hitch types. > I need you to generate models for all of the brinkley 5th wheels and trailers. I also want you to generate models and driving characteristics for the most recent model years of all ford super duty trucks. Be sure to give them the right power, turning radius, etc. I want to be able to choose hitch type, etc eventually so this would work for much more than just the f450. The planner can now tow with any current Ford Super Duty and any Brinkley, each with its own size, steering, engine power, weight and hitch. > Add a start screen that allows me to select a different model and truck. Also, don't allow me to select a 5th wheel with a f150, as it's not capable of towing that. Two parts here: a start screen to pick the truck and trailer, and a rule that blocks pairings a truck can't tow. > Remember the truck selection in future sessions. Allow me to select if it's a goosneck or 5th wheel hitch as well. > And be sure that all of the trucks are powered and steer to their spec. Would be good to have options to select the different powertrains for each and show the power. I also want to know GVWR for each rig and the capacity ratings for each truck. > I also want the hitch values to be parametric, so that a user could add their own values and tune it to the accurate values > f350 has a dually and single axle variant The start screen is in: it opens first and lets you choose the truck, trailer and hitch, and it won't let you pick a trailer the truck isn't rated for. > seeing some issues with the overlap of the truck and trailers > I also want to see the visual selection on the middle of the screen at the starting point, instead of just the map. Show it in the middle of the right area, I want to see the truck and the camper together, with dimensions showing the overall length and dimensions. I fixed the overlap, and the start screen now shows the chosen truck and camper hitched together in the middle of the right side, with their dimensions. > update the art of the brinkleys to match the acual art they have/ right now everything is using too much og the G series, which is unique vs the others. Every Brinkley series now has its own art, matched to Brinkley's own photos. > I wnat to be able to drag to rotate on that screen. Dragging: left and right turns the camera around the rig, and dragging across the full width of the view is about half a turn. > the other models also need to have the correct body shape. Here's what you made for the x 2670, and what it actually looks like. Look at the incline of the roof, and the decals. Neither match., It. looks like you made a stubbed mode g, which the z is not. ts so each series has its own cap, roof line and livery, matched to Brinkley's photos rather than reshaped from the Model G. > Those campers all should have a "campside" profile photo > Why is there a difference between gooseneck "toms" and normal gooseneck? I have a stoc gooseneck, the only think my rig has that's unique is the toolbox in the bed. The Gooseneck (Tom's) option doesn't describe anything about your truck. > Why does that change the truck model and size? this should not be the case. > Also the stock goosneck for brinkley is a gen Y gootneck. Make the model match that. You were right: picking a hitch was swapping the whole truck, and that's fixed now. > Make it look more like this > here's a side view I've rebuilt the gooseneck coupler to look like your Gen-Y, mostly from your side view. > Now do the same precision that you did for the brinkleys but for the ford truck models. These are not great yet. The one from my portfolio was designed for the pixel look, so things got exaggerated. I want you to find the side profiles and photos from each and make sure they match > Those look really really really bad. The hood. Look at the hood. You need to find models of these online for reference. The free F-250 on Sketchfab is broken (exploded, missing materials). > Also be sure that the mirrors match I've rebuilt the Ford trucks from Ford's own drawings, and they now match them along their whole length. > I want you to take the new UI language and start explring the intiial page where you define the truck and camper. Work here: [link] > > I don't want this page to be a left form, i want controls to be adjacent to the items, I'd like it to feel like I can click on the trailer and change it, or I could clcik on the hitch and change it. This step should feel more like a video game, where I'm picking my racing rig, for example. This is a configuration page, not some kind of stuffy form. I've built the rig page on the Rig page in Paper as four 1280×800 screens. > These are good, but use more of the in game UI for this -- the sidebar, etc. I've redrawn the four screens in the planner's own layout. > Can tow shouldn't be the headline. The affirmative isn't a helpful thing to communicate to the user as the primary first text. The rig details should be the header. > > Get rid of this left side selection indication Never do this anywhere. The selected truck row also says "Can tow", which is the same affirmative. > Move these icons to the right I've made all three changes to the v2 screens. > get rid of this subtext . I removed "Payload is the closest" from the sidebar foot on all four v2 screens. > The rig preview is not working properly. I want the rig on top of the mountain, btu it should still be selectable and as far away as it was before it was put on top of the mountain. The scene should also not shift the camera right after load and each element should still be selectable. Also for some reaons clicking anywhere rright now moves the rig and it starts driving. The rig sits in the Pikes Peak summit lot again, at the same distance the preview used before, and every part can be picked. ![Choosing a truck and camper in Whiteknuckle, the rig drawn in 3D with its length and height](https://www.tomjohn.design/videos/whiteknuckle/rig-builder.mp4) > Add admin pages for all rvs and models. I want to be able to see all the models that are currently added, analytics on which ones are being used, and also I want to be aware of the ones that have been request. I want an agent to be able to pull in the needed details from a rig that's been requested so that when I add it, the 3d model can be generated. I'm looking at [link] for the data, investigating pricing. I've added RVs and Trucks pages to the admin, plus a drafting agent that pulls a requested RV's specs from its maker's own pages and flyer. > Group them better by model, I don't need rows for every permution. The catalogues now show one row per model instead of every configuration: RVs went from 50 rows to 7, and Trucks from 97 to 6. > I also want to see the 3d model for the rig on the top of the side panel. 3D model at the top of the panel > I also want to see which models are missing a 3d asset. RVs and Trucks now have a 3D column showing which models have their own 3D asset. > The new button doesn't work on the top of the header. Move it relative to the current seletion at the top of the left panel. Rig + buttons also don't add a rig/truck, they justopen the toggle. The idea is to be able to add multiple trucks or camper or trailers and be able to switch between them In a clean Chrome tab, New worked from both Trips and Your rig: it opened an empty route. > No at the top of the list. Also let's regroup the rig a bit. A rig is the combo of a truck, trailer, and hitch. Have a row for the combo, make editing it being you to a subview that shows the rig details. If there's only one, then there's no nesting needed and the top level one has the full thing. If you create a new rig, you'd need to choose which parts of it are together. It would default to the same truck as before, as it's not very common to have multiple different trucks, but it is to have multiple trailers or hitches. New trip is now the first row of the trips list, and Your rig is now built around rigs (a truck, camper and hitch together). > Generate accurate 3d models and dimensions / power etc for all of the requested trucks from alpha testeers. The requests include both Mega Cab and crew-cab Rams, single and dual rear wheels, gas and diesel GMCs, and specific older model years. > find the most recent model year body style and use that for each The new powertrains and configurations pass the catalogue checks, and the app shows Ram’s 430 hp and 1,075 lb-ft correctly. > These models are basic and terrible. I want each of them to be as close to the real model as the super duty ones are. This requires curves, profile shots, multiple angles, and fine details. Share some of the geometry and attributes from the existing ford models, but what you've made is unusable. Rebuilt the 23 added configurations using profile shots and multiple-angle references, with curved body panels, distinct grilles and lamps, shaped fenders, inset windows, detailed wheels and bed hardware. > now add the ability to select a color Save, reload, shared links, keyboard selection, and discarding an unsaved color all passed in the browser. > After you're done there, add rules for future truck generation. I also want you to review the power sizing, turning radius, etc for every model and variation so that it's accurate. These notes should also be there for camper and hitch generation. Accuracy is the most important factor Updated PR 99 with saved paint colors, specification corrections, and generation rules for trucks, campers and hitches. > add swatches next to the color names Added matching swatches beside every color name and pushed to PR 99. > backwalls of 3d models should not be shown. We can simplify the interior of trucks and campers. I fixed it with a one-line change, and I didn't need to simplify the interiors to do it. ## The UI The app UI has been more involved than I thought. This is more than a routing app, but there's a ton of detail that I want to give to the user. It's also a map + simulator + AI chat + turn by turn... there's a lot of simplification that I still have to do. > I want to improve the design and structure of the different parts of the app. First, let's explore the route list and guidance. [link] > > Then let's explore the chart and data presentation (stats, truck overlaps, etc) [link] > > Then, I want to work on camera and map controls and labeling. [link] > > The goal for these UI is to present the user with only the needed information. To not have explanitory text. To have action oriented button. To only have one primary CTA per page. To not layout shift. To have clear representations of heirarchy, lists, and related items. To have obvious colors with priminent semantic colors and treatments. To have alerts and badges that are iconic, reuse road information signs, and are clear to understand. > > I want the app to be a minimal as possible, only showing the information that's needed in the current task. I want data to be simple and presentational, with thin lines and clear data presentation, not visual noise or excessive labelling. > > I want layouts that will work well for tablet and mobile as well as dekstop. > > I also want you to riff on different application layouts. I always lean towards the left list panel with a right canvas, but I want you to explore many different structures for the pages and app data. > > I also want you to explore better loading states, generations, and indetermine progress bars. Things that give the user a key into … > Another few apps that i'd like to pull some inspiration from: > - Strava > - Flighty > - Robinhood > - Waze > - Tesla > - Airbnb > > I don't want yout to copy their styles, I want you to use their ethos to inform your explorations. Maybe combing them, pulling pieces from them, or just having a few more references for their layouts and heirarchies. > > Then, after all of those are done, I want you to tell me which one you think is worth futher exploration. > oh and rivian Stats board is in good shape. > I don't like this chart or section . It could be simplified dramatically, the charts should / could be unified. There are 18 exploration boards in the Paper file (six directions across Route, Stats and Map) plus a new Layouts page and Progress page. > OKay, take your reccomendations and generate the full flow and strcture here: [link] > > I will say, though, I think you still have too much visual complexity in that. Dividers, explanitory text, excessive secondary text, too many fonts, excessive different cards or wrappers or different radii, too many large labels, callouts that look similar to buttons, text buttons that could be icons, etc. you're also not gracefully revealing more content with hovers, interactions, states that show more nuance or data when approached, etc. One example is the chart and progress. They were unified yes, but the elevantion is taking up so much visual room, and is secondary. Show it as something that could be revealed, but ensure the progress is the most important part. > > you've also got a sidebar rail that is using icons that may not be obvious, and multiple different presentations (fonts, cards, position, etc) for stats while driving. Unify elements that should be read together. group common items. be brutal in removing things unless absolutely needed, and be sure to hide excessive complexity to debload the app UI when it's in a resting state. Show more context with hovers, after taps, etc. Convey meaning with motion, lean more into adjacency and elemenst that could be grouped. > > Question every element. Remove anything that doesn't need to be there or helps the user understand what they need to … The full flow and structure are now on the Amalgum page in Paper, with a working prototype at (it loads with no console errors). > Not bad. But I think you removed too much. Now do another cut, building on this slightly and make things a little more anchored. Not floating panels. We're getting closer, I think we need to add a little back, but also show the detail when expaned so that it doesn't feel like a kids toy The new cut is on the Anchored page in Paper ( with a working prototype at (it loads with no console errors). > okay. build it The anchored design is now built into the app. > get rid of this left edge focus and selection and make a rule that it should not ever be used in the app for rows and cards. md now has a rule that no row or card ever uses one. > I want the oconography and signage in the app to be simplified, just show the icon in the color that corresponds to the danger level, we don't need the sign shape everywhere, but do show that for extreme or severe issues like low bridges, tipping hazards, etc. tsx) and where it's used, then I'll start the dev server to see the current look. > also thes look like uturn sign/icons.. Make a better one that's more about a tight turn Status icons are now just the glyph in its danger colour. > make sure that ios and other mobile browsers don't zoom when inputs are selected I've stopped mobile browsers zooming in when someone taps a field. > Add light mode support The planner, admin, privacy and sign-in pages now switch to light when your system is set to light. > I want the drive button to be replaced by a "simulate" button. That when pressed starts generating the route simualtion in the background and then only tells the user that it's ready to see when it's done, and then caches it so they can come back and view it. The user can still jump into the route while it's being generated. I also want a new top level view for the app for you to create and manage those trips. > > Let's populate the top level view with some of the more iconic trips that are pre-cached so they can see how it works first. > > Let's riff on this top level view in paper [link] > > This would be the entry screen after login. I want to see a few layouts. use the sidebar, show a preview, make sure they're visual and show some information like miles, starts, etc. Try cards, lists, or an overall map view with all routes. I've put four layouts for the trips screen on the Routes page in Paper, plus a fifth board showing how the Drive button becomes Simulate. > Try another one with A, but have an all routes full US map that shows the routes all there on the map as the null selection. Satellite reads well at country scale and keeps continuity with the selected view, so I'll use it. > In the top oif the nav add "Your rig" below "Trips" as top level items. Selecting your rig would show the rig picker in the canvas area I added two new boards to the Routes page in Paper, to the right of the earlier ones. > The rig details would show up in the sidebar under the selection. The left sidebar is relative to the top item that's been clicked I've updated the A2 · Your rig board in Paper so the sidebar follows the selected top item, and checked it in a screenshot. > For the rig sidebar, add a header for truck, Camper, and hitch. Add a plus button to the right of each header to allow a new rig to be added. Each item in the list would be selectable. Instead of the black background. show the rig on top of a high point on a map. Find a location that's iconic and has a parking spot, make sure it's cached, I want to show the rig sitting up there. I've made a new board in Paper, A3 · Your rig, garage on Red Mountain Pass, below the A2 Your rig board. > I want it on a mountain top parking lot. The very top. Moutains around it. Not on a road. This is about the destination. The Your rig board in Paper now shows the rig parked on the Pikes Peak summit lot at 14,115 ft. > build it The planner now opens on a Trips screen, Simulate runs in the background with a ready notice, and Your rig shows your rig parked in the Pikes Peak summit lot. > on hover of these how a popover with the report That notice is the old bake watcher expiring; the bake had already finished, so nothing changes. > I need to add user settings, details, permissions, preferences. It should be in the sidebar. Show me the designs in Paper first: [link] I've put four designs on the Settings page in Paper, side by side. > I don't want settings to be only in the sidebar. We can make it a modal Got it: Settings will open as a modal from the account row, laid over whatever's on screen. > that way it's accisble anywhere. Look at the commandbar from my portfolio and the one from prism for reference Settings is now a modal: a ⌘K command bar you can open from anywhere in the planner, with Settings as a page inside it, the way Prism does it. > This is great. We also need to add search to the top level panel of the app, above the home page. I've added a search field to the top of the sidebar's home panel, under the logo and above Trips and Your rig. > The road level icons could use some work and need to follow thr 15px guidelines. Make some better ones for ascent and descent I've drawn three new ascent/descent pairs on the 15 px grid and put them in Paper's Pending approval board. > Those lines look too thick in the UI. they should be 1px Thinning every icon in the route rows to 1 px, not only the new grade pair. > Do a combo of A and B. A wedge with an arrow > And do a riff of C where the line segment is an arrow in the middle as it goes up or down Every icon in turn by turn now draws a 1 px line. > Add separation between the arrow lines and the other lines I separated each arrow from the other lines in D, D′ and E. > flip these vertically [link] > these are what I want: [link] Your closed pair (F) is now the approved Climb and Descent icon, in Paper and in the planner. > get rid of this seconary line of text, it's in the popover, not needed on the directions list row I removed the second line from every row in the directions list, so each row is now just its title, with the distance and badge on the same line. > Remove the word "turn" from the rows, so it's just "Right onto" "Left onto" Re-running the tests after the wording change. > Blocking rows, like this caltrans advisory should get the X icon and the whole row should have a lighter red background. These are blocking and actually need to stop the driving simulation so the user knows. They can play after, but these need to be very very obvious All three changes are in: the KPRA advisory now shows the won't-fit badge, blocking rows have a light red fill, and the drive stops at each one. > The left icon should be the solid red bg one. there's no need for 2 icons in the row > we've also got these 2 icons which can be merged into one. Blocking rows now have one icon, the solid red octagon on the left, with no badge on the right. > still seeing both here I misread your last screenshot the first time. > some icons are 1px stroke, others have a border. All should be 15x15 and 1 px stroke, color should be shown with a be behind the left icon, the right icons can be eliminated. Also the rows can be half as tall. Waiting on the route to load for a before shot; writing a small capture script. > Let's make the tun by turn steps a subitem on the left side vs being their own panel on the right. There would be a back button o nthe top of the list > Proposed rows are a little too short, try 32px > For 2 lines I want the first line to align with the icon, secondary lines would be under it > Make the background of the icons a diamon shape, similar to a road sign, make the blocking ones an octogon > Make locations or waypoints have a circular background behind the icon. Turn-by-turn now opens inside the left panel, in the conversation's place, with a back button at the top of the list. > also, these error states look bad, and the row layout can be improved. > > I want to see all instances of rows in the app with a large variatey of different data and icons populating them, so we can unify all row instances. > > Anything that has a leading icon, text, secondary text, or subhead text and sometimes can be hovered or clicked should be counted as a row. This is direction lists, loadin lists, the rows for direction selection, etc. I want a single uniform row to be the output of this vs the array of them we have now. put them here: [link] Fresh route screens live, and the running rows are now 26 px with the approved Loading arc. > The icons are misaligned with the shapes. > make the diamonds 23x23 > same with the stop signs and circles > some of the icons are not centered in the 15x15 square -- the bridge for example Each library frame lays out its icon and label differently, so matching by text order is unreliable. > rows should be 34px tall > minimum i mean The icons are now centred on their shapes, and the rest of your changes are in the One row proposal in Paper. > Rows should be structured more like this so the icon always stays aligned wirth the first line [link] > Show some example rows with the sequential connnecting line treatement between eachrow's icon Every row in the One row proposal now uses your reference row's structure, and there's a new In sequence section (just after Leads and states) showing the connecting line. > Make the lines further away from the icons, like 6px > or 4px I went with 4 px, because 6 px didn't fit. > okay go ahead and build this Every list in the planner now uses the one row from the Paper proposal. > The API data failing should not be getting the stop sign treatment. Those are application failurtes, not route ones. Failed API reads and other app errors no longer use the stop sign. > Trips can get a rectangle icon. Their difficulty would be indicated with a chip on the right side Paper is rebuilding in the background; running the tests meanwhile. > left and right side of chips and the gap between icon and text is too big, also make the chip text not semibold Trips now lead with their route icon on a rounded rectangle, and their level ("Fits", "Watch", "Tight", "Won't fit") is a chip at the end of the row. ## The homepage (and brand) I asked Claude to generate about 50 variations of a brandmark. First time I've done this before. It took a while but the one I chose jumped right out. ![My Paper boards of Whiteknuckle's brand: marks, road letters, knuckle marks, danger signs and W curves, with the chosen mark in context](https://www.tomjohn.design/images/content/whiteknuckle/brand-boards.webp) ![Two boards of twenty marks each, Knuckle marks and Danger signs, the yellow W curve I chose among the signs](https://www.tomjohn.design/images/content/whiteknuckle/brand-signs.webp) I also wanted to make the homepage a three.js scene, but without all of the scene bloat, so I precompiled these with a limited camera viewing angle and made them work like an Instagram reel on mobile. > We need to set up a landing page for this, something to avoid it being used for now. > With a form and a way for people to add their info to get notified. > Generate 50 different logo variations here: [link] > > I want to try something minimal, something that implies bends in a road, the steering wheel, elements of the app, driving, WK, etc. It needs to be clear, could tie in with the word mark, could be abstract, but needs to read clearly in an idon. I've added 50 logo marks to the Logo page of your Paper file, all on one artboard called Marks · 50. > The w and n could be bends in a road, with semantic colors. Might be a bad idea but try it 20 different ways. also try it with the wordmark and a "road" around it with curves > 20 of those too Got it: 20 variations of the W and n as road bends, and 20 of the wordmark with a curving road around it. > This idea is interesting, but could be made into an abstract lettermark [link] > This is also interesting, but the hand could be a W and N somehow [link] > 20 of each of those > Also explore road signs that show turns, something that would be immediately recodnizable as a danger road size for RVers or truckers, like a low bridge or tight turns or something. 20 of those as well All five new sets are on the Logo page: 100 more designs on top of the original 50. > This. Do 20 more varaitons on this. Make it also one where it's "intersecting" the N, like crossing roads or something [link] I've added 20 variations of 19 W curve on a new W curve · 20 artboard on the Logo page, to the right of the Danger signs. > More of this, with the colors on accurate portions of the line (curves) [link] Duplicates are landing next to their source, so the order is scrambled. > then make some workmarks with this. Try different fonts, use the W in the word in some, put ot over the word in others. [link] Both sets are on the Logo page in Paper. > Here's the one I like [link] . How use it and generate a bunch of different screenshots of it in context, on a home screen of a phone, on the app store, on a billboard, etc. Use the GPT Astra skill to wire it up. > > The catchphrase will be "Know before you go" or something like that. come up with some other clever ones that could work. I've made 10 scenes of your chosen mark in context: the amber W-curve tile with "Whiteknuckle" in Geist Bold. > I want this to be a decent form, not just that basical input. Also make sure that it's able to gather some more detail The landing page now has a full signup form in a card next to the name, and it's checked in both the browser and on the server. > Add a RV field. Get rid of the dimensions and state I added an RV field and took out height, length and state. > Change notes to "What would you use Whitenuckle.app for?" I spelled it Whiteknuckle to match the domain, since "Whitenuckle" in your message looked like a typo. > After you do that, start making some updates to this page here: [link] > > I want you to take the design language that's been riffed on in the product and come up with 10 different marketing page languages and explorations. Do not make them overly long. I want to use screenshots from the app, and also I want to have the hero panel have this section. > This sign up section I mean On the Paper Website page there are now 10 marketing-page directions, each with the signup form in the hero and real screenshots from the app. > I like the full video as the primary of the hero from 4, but I think the copy is better for 6. I think there should be a few panels showing the different parts of the App UI. > > Hero (sign up and video) > Route (full end to end with issues) > Segment (Zoom in on specific area to see issues) > Drive (show the driving experience to see it in context > Your rig (show all of the different trailers and tucks it supports) > > Also try that inverted. Give me 10 variations of this. > > Avoid the eyebrow headings. Make it simple. Show it in dark and light mode. Add a footer. The 10 variations are on Paper's Website page, each in dark (top row) and light (row below), for 20 pages. > Everything is way too tight. Also, I'd want those panels to be scroll based with the same UI on the side, not 3 separate panels I rebuilt all 10 variations on Paper's Website page with more room and a single scroll-driven section in place of the separate panels. > Add in some real routes to show how it works on the site. The hwy 120 is a good one, but find 4 other routes that are notorious for being tricky for campers and show how it works. > Let's do this hero: [link] with these scroll states: [link] > And not just California ones. Find other states I built the combined page in Paper as "Landing · Dark": the hero from V9 (Stats), the scroll section from V10 (Editorial), a new routes section, then the footer. > Make a version that's just the hero with a video playing a route from start to finish. I'll provide that video. Add Alpha callout. I want to have something live that can get launched quickly The landing page is now just the hero, and it's ready to ship except for your video: PR 23. > Too tall. there's no reason this should scroll. Tightening it so it fits one screen at laptop heights: Name and Email share a row, Rig, Truck and RV share a row, the notes box is shorter, and the headline scales with screen height. > Fix the header The landing page now fits on one screen with no scrolling, and the header has its own row. > okay use this video [file] The video plays behind the hero, the credit sits along the bottom, and nothing scrolls. > Don't use blurs on the home page. Your video is in, and the page is ready to go live: PR 23. > The form is blocking the video. Let's find some layouts that don't do that > Rather, it's blocking the focal point of the video > Change the text at the top to "request access" I made four layouts in Paper ("Hero · A" to "Hero · D" on the Website page) that keep the centre of the video, where the rig is, clear. > restart the server > where's the paper frames? They're on the Website page of the White Nuckle file. > Yeah let's do C with the 2 step form com couldn't be reached from here. > Use this logo [link] The landing page header now uses the logo from Paper: the amber tile with the W-and-arrow mark, the bold "Whiteknuckle" wordmark, and the Alpha pill after it. > Make the primary button color use that yellow. Bring that branded color more into the app site. > Red yellow white/black and green will be the brand colors. > Center the logo on the top of the page > undo that, move the form and reqeust access to the header on the right > Add a gradient behind the header Two things to fix: the header gradient needs to be stronger, and on the phone the button runs off the right edge. > Add a "created by Tomjohn" to the lower right side, link to my site from that Two more fixes: the header gradient is still faint over the bright sky, and "You're on the list" should sit flush right. > Let's change it to not be a video. I want that to actally be the real driving environment in the header, just restyrict the controls and fix the zoom. > Make the camera follow the rig along the path, have clicking and dragging rotate around the rig as it's moving (this also needs to be in the app as well). Make clicking pauise the route. make it 1x speed. Ensuire that the loading time and assets are cashed so it's not fetching them like it does in the app. > Allow a little zooming in and out, but not to the level of the full app > Show the name of the route on the left side of the map, show 3 other routes, that you can click on and change it to. > > Show the name of the rig on the right, with 3 other options for other trucks and campers, to allow swapping between them Repeat visits load in about 10 s, but only 135 of the 2,100 data responses came from the browser cache. > Update the favicon to use the logo. Update the site description to be accurate. Add a privacy policy, enable vercel analytics. (links in the bottom right). Generate an OG image with GPT Image 2.5. Update the H1 to be "Know before you go." then move the current H1 into the subtext, with "Plan the drive your rig can acutally make. Know every tight turn, low pass, long grade before you hit the road." > Allow clicking on the annotations on the path, show the details on the right in a panel. > The things on the side of the page shouldn't be in cards, have a line on the side indicating selction, the others greyed out. Smaller font, like 16px. For the one on the right it would be line on the right. Simulate the route for all routes and rigs so that there's no generation on selection, also on seelction have it swap instantly to the new route and selection > no cards here > Make those a dropdown. bottom right corner of the screen > Going to the sun is not allowed for any trailer... ever. remove it and find a viable alternative > Or soemthing where there are known clearance issues The landing hero is now the planner's own live scene instead of the video. > Stack the dropdowns on top of each other. The route and rig dropdowns are now stacked in the bottom-right corner, route on top and rig below. > remove the bg color from them The dropdowns no longer have a background fill, so the scene shows through them; only their thin outline is left. > When the truck does over the annotations, show them over the top of the rig. reduce the size of those annotations dramatically 0 ft into the oncoming lane". > make this the homepage > The home page is super slow to start the animation. I need you to find a way to make it as instant as possible. I don't want the environment to be reliant on any external systems, I want it to be cachaed and ableto be fetched for playback as soon as the page loads Reading how the home page's scene loads its data so I can bake it into static files. > I'm seeing a single thread that's blocking anything from loading on the environment. > We don't need distant data, we can have aggressive fog to hide far away assets and can laziloy load them as the drive speed is fixed. Fog can hide the distance, and ground ahead of the rig can load while it drives, since the speed is fixed. > We can also dramatically compress the images for distant objects as well, as those are not likely to be in view The home page no longer needs anything outside the site to play. > This is better, but it;s still crazy slow to start. I need at least the 3d scene to load as quickly as possible, even if the full route can't. We can fake this, We don't need it to be the real route, we just need it to look like it's happening. I need the site and 3d scene to srat playing 1s after page load. Each road has a 12-second film of its drive, recorded from the planner's own scene, which plays straight away. > The video is good, but it;s too short, and the time to load the real scene is still wayyy too long. The lane survey keeps its measurements in a LaneSurvey object. > I need that scene to load and play as instantly as possible, even if the textures aren't in. The video is a stop gap, but the real version is that we have an ultra simple one that loads only what can be loaded in a very short amount of time and then gradually fills out the page. I can't deal with waiting for everything to load before the scene paints. Run until you can get a workable 3d version loading in sub 5s, ideally sub 1s 69 s after the page loads, and it never waits for everything: textures, buildings and the rest fill in after it starts. > mobile landing page layout needs work. Make it better > We don't need the inputs on moble. fix it to a single route and rig type I've reworked the mobile landing page and taken the route and rig pickers off it as you asked. > move the H1 to the bottom just above the CTA > Make the confirmation statement more of a card with centered text above the next form. > and do the same for desktop Mobile now frames the rig above the headline, and the card looks right on desktop. > Actually, let's bring back the other routes, and make it feel like a tiktok or instagram reel swipe to go between the different routes. Simplify the layout to feel more like that surface. On tap, show the cta and the text. The > The 4th route with the bridge isn't a good one. Replace it with beartooth pass and then add a 5th showing the rig going through an urban area with roundabouts > Move the map credits in to a "map credits" link next to my name and privacy. Add a primary button CTA in the lower left with the text "Try" which also opens the pause CTA tsx reloads the page, which would break a bake in progress. > And above that, add a share button which brings up the browser share sheet tsx (Edit only that block). > The name of the location should be on the left bottom, the button stack on the right bottom. The share button shouldn't have a background. primary CTA should be sized to the text, with 16px padding on the sides. The agent is still researching, not baking. > Add a little subtext under the name of the route. Also for each map, pick a different rig to show. Adding a fifth rig means baking scenes for every route again, which the agent can do in the same pass. > The subtext would be the name of the rig, the distance, and a little about the route. Like a caption. make it about 2 sentences, tapping on it would expand to show the full thing with a gradient under it for legibility being less transparent and further up the page. The default caption should ellipse at 2 lines. > Make the button say "request access" stacked text. The caption, per-road rigs and stacked button are in. > Remove the share button. Tapping the caption should make the text go full width and "push up" the CTA fading it away. Add some more padding to the top of the CTA button. like 12px > On page load I want the scene to bounce slightly to show that it can be scrolled. Make sure that the CTA remains fixed. The text should also be fixed but change after the scroll happens. tsx edits, which will apply automatically the moment the agent's current bake finishes: removing Share, the load-time bounce that peeks at the next road, and the caption changing once a swipe settles. > Fade out the bottom 3 links when the caption is expanded Opening the caption now fades out the three bottom links (Map credits, Privacy, Created by Tomjohn) along with the "Request access" button. > The request access should be shown after tap, centered on the screen, h1 above, input, cta. hide everything else, pause the video add a slitch skrim. Tapping the drive or the "Request access" button now opens a centred sign-up over the paused drive. > Replace the h1 with the logo on mobile > on that cta screen " It sits centred above the email field and fades in with the form. > change the mobile scenes to be videos, truncate the tet to 1 line before expand. pr and merge when done On phones, the home page's reel now plays a video of each road instead of building the 3D scene, and the caption shows one line until it's tapped. > Add the H1 text below the header on the top of the page on mobile. pr and merge when done. > > videos need to be faster to load, I'm seeing stuttering and slow loading times > could be my internet, but if theres anything there, investigate. also have a static image as the first frame vs a black screen > videos dont' seem long enough or they're getting stuck. add in a compressed version for a fast load if the bandwidth doesn't allow for it > don't allow the mobile ones to pause playback That notice is just the filming monitor expiring; it isn't needed anymore. > the videos or 3d scene on mobile are not playing at all fix that Cause: the page deliberately held the drive at its first frame whenever the device has Reduce Motion on. > move the name of the current route into the h1. Know {route name} before you go. make sure there's no content shift with each. pr and merge when done > desktop and mobile. Move it out of the bottom on mobile On a phone: the road's name is gone from the bottom. > make the request access button full width on mobile, under the description, make the description right above it, change the skrim button to submit, make it the same button as the requst, but have a transition move it up, fade in the logo and the input, have tapping the description skrim fade it back, not the request access skrim > unstack the request access button. > also the bounce needs to be more delayed -- be sure that's working > and make the swiping up infinite so it loops after the last one On production, swiping round from the last road to the first works in both directions. > The home page isn't playing the scene for way too long. I'm still not happy with the delay and time it takes to render the scene. It needs to start instantly. > > Also, make the name of the drive the dropdown, add a chevron to the right of it and have it in a span, same size text as it is now, clicking just cycles the value, not an actual dropdown Profiling a local production build under a throttled connection to find what the scene waits on. > Eliminate details that aren't needed from the scene. Restric the rotation to only 20 degrees, and remove the objects behind the camera. Don't load in the full rig model right away, generate a texture png and overlay it over a simplified model while the higher polygon one is brought in. Load a lower detailed version of the map. Fix the camera, etc. you need to be brutal about why it's there, not just render the full scene and have the user wait. It needs to start right away. No excuses. The assets should be as minimal as possible and gradually get more complex if needed. I cannot deal with this page taking any longer than the asset size to load. 3 s instead of the 3–11 s I measured on production at the start. > A little zoom is fine, a little tilt is fine Rebaking all five roads (posters included) in the background; I'll keep src/ untouched while it runs. > Make the name of the route a single line below the words "See if your rig fits on". Then rewrite the subhead to say "With Whiteknuckle, simulate your route to see how your rig actually fits. Know every turn, grade, bridge, and and tunnel before you hit the road." > I want these banner to show the data ticking up and down as the values change. . The value of the text number should change colors to match where it goes over the thresholds to danger. > replace the video on mobile as well with this, I'd like to test it to see if it's better. On mobile, when the CTA skrim is open, hide the text in the chips on the scene. > > Also, limit the data on the badge to just a few words, even if there is more. I don't want a giant long badge > Highlight the route span like this > I want the camera to always be from the side back of the rig. Right now it's too fixed as the rig takes turns, so the angles don't look good All of your notes are in. ![Whiteknuckle’s landing page asking to see if your rig fits on New Priest Grade, Million Dollar Highway, Tail of the Dragon and other roads](https://www.tomjohn.design/videos/whiteknuckle/landing-page.mp4) ## Work and media - [A truck towing a fifth-wheel camper up a narrow mountain road in 3D, warnings listed where it crosses into the oncoming lane or nears the edge](https://www.tomjohn.design/videos/whiteknuckle/route-planner.mp4): I built a big rig route planner that lets me drive my camper on tight roads and uses sat and elevation data to determine if the route works or not based on my actual axles, wheelbase, and towing dimensions. Think I might have to monetize this one... it's so helpful. Will need some more work though. ([Original Post (X)](https://x.com/tomjohndesign/status/2112764056197345486)) - [The camper on a 3D mountain road beside a list of warnings and the route’s elevation profile](https://www.tomjohn.design/videos/whiteknuckle/better-route.mp4): I have created something beautiful. Finally a way to find a better route. ([Original Post (X)](https://x.com/tomjohndesign/status/2113008351751864402), [Thread (X)](https://x.com/tomjohndesign/status/2112764056197345486)) - [Whiteknuckle marking a coastal route Won’t fit as the camper drives US 101 through the Cape Creek Tunnel](https://www.tomjohn.design/videos/whiteknuckle/wont-fit.mp4): It's amazing how one project leads to another. Made a game, learned a bit about [@threejs](https://x.com/threejs). -> Remade my portfolio using a similar pipeline, added a 3d model of my truck and camper for funsies. ---> And now I've made http://www.whiteknuckle.app to show that camper on my actual routes. There's many driving apps that tell you "good" routes for big rigs. But none of them tell you the grade, tight turns, TIGHT clearances along the way. They just say "trust me bro" and give you a route. But that gets you in some SKETCHY situations going around a blind curve into another lane (because you have to or you'll be over a cliff) while suddenly staring at a bridge that you'll only make it under by 3 inches with no way to stop. Not fun. So I built an app with - AI route guidance and alternatives based on difficulty, not duration. - Alerts for problematic routes based on the height and length of your rig. - Turn prediction with realistic turning dynamics, truck bed length, hitch dimensions and location. - Data from the DOT, open source lidar, multiple maps, state lane data, satellite imagery - and even more. I posted this yesterday in one of my RV facebook groups and got 100 signups in 5 hours. Some people begging to pay. I knew this was a problem for me, but it turns out I'm for sure not alone. This new world of making software is WILD. A week of work is all it took so far. 2 years ago I could have maybe raised seed money with the idea... now I have the actual app. ([Original Post (X)](https://x.com/tomjohndesign/status/2114744993625813011)) - [Turn-by-turn steps for US 101 on a map, each bend’s radius marked, beside Street View of the Cape Creek Tunnel](https://www.tomjohn.design/videos/whiteknuckle/turn-by-turn.mp4): It's amazing how one project leads to another. Made a game, learned a bit about [@threejs](https://x.com/threejs). -> Remade my portfolio using a similar pipeline, added a 3d model of my truck and camper for funsies. ---> And now I've made http://www.whiteknuckle.app to show that camper on my actual routes. There's many driving apps that tell you "good" routes for big rigs. But none of them tell you the grade, tight turns, TIGHT clearances along the way. They just say "trust me bro" and give you a route. But that gets you in some SKETCHY situations going around a blind curve into another lane (because you have to or you'll be over a cliff) while suddenly staring at a bridge that you'll only make it under by 3 inches with no way to stop. Not fun. So I built an app with - AI route guidance and alternatives based on difficulty, not duration. - Alerts for problematic routes based on the height and length of your rig. - Turn prediction with realistic turning dynamics, truck bed length, hitch dimensions and location. - Data from the DOT, open source lidar, multiple maps, state lane data, satellite imagery - and even more. I posted this yesterday in one of my RV facebook groups and got 100 signups in 5 hours. Some people begging to pay. I knew this was a problem for me, but it turns out I'm for sure not alone. This new world of making software is WILD. A week of work is all it took so far. 2 years ago I could have maybe raised seed money with the idea... now I have the actual app. ([Original Post (X)](https://x.com/tomjohndesign/status/2114744993625813011)) - [Choosing a truck and camper in Whiteknuckle, the rig drawn in 3D with its length and height](https://www.tomjohn.design/videos/whiteknuckle/rig-builder.mp4): It's amazing how one project leads to another. Made a game, learned a bit about [@threejs](https://x.com/threejs). -> Remade my portfolio using a similar pipeline, added a 3d model of my truck and camper for funsies. ---> And now I've made http://www.whiteknuckle.app to show that camper on my actual routes. There's many driving apps that tell you "good" routes for big rigs. But none of them tell you the grade, tight turns, TIGHT clearances along the way. They just say "trust me bro" and give you a route. But that gets you in some SKETCHY situations going around a blind curve into another lane (because you have to or you'll be over a cliff) while suddenly staring at a bridge that you'll only make it under by 3 inches with no way to stop. Not fun. So I built an app with - AI route guidance and alternatives based on difficulty, not duration. - Alerts for problematic routes based on the height and length of your rig. - Turn prediction with realistic turning dynamics, truck bed length, hitch dimensions and location. - Data from the DOT, open source lidar, multiple maps, state lane data, satellite imagery - and even more. I posted this yesterday in one of my RV facebook groups and got 100 signups in 5 hours. Some people begging to pay. I knew this was a problem for me, but it turns out I'm for sure not alone. This new world of making software is WILD. A week of work is all it took so far. 2 years ago I could have maybe raised seed money with the idea... now I have the actual app. ([Original Post (X)](https://x.com/tomjohndesign/status/2114744993625813011)) - [Whiteknuckle’s landing page asking to see if your rig fits on New Priest Grade, Million Dollar Highway, Tail of the Dragon and other roads](https://www.tomjohn.design/videos/whiteknuckle/landing-page.mp4): It's amazing how one project leads to another. Made a game, learned a bit about [@threejs](https://x.com/threejs). -> Remade my portfolio using a similar pipeline, added a 3d model of my truck and camper for funsies. ---> And now I've made http://www.whiteknuckle.app to show that camper on my actual routes. There's many driving apps that tell you "good" routes for big rigs. But none of them tell you the grade, tight turns, TIGHT clearances along the way. They just say "trust me bro" and give you a route. But that gets you in some SKETCHY situations going around a blind curve into another lane (because you have to or you'll be over a cliff) while suddenly staring at a bridge that you'll only make it under by 3 inches with no way to stop. Not fun. So I built an app with - AI route guidance and alternatives based on difficulty, not duration. - Alerts for problematic routes based on the height and length of your rig. - Turn prediction with realistic turning dynamics, truck bed length, hitch dimensions and location. - Data from the DOT, open source lidar, multiple maps, state lane data, satellite imagery - and even more. I posted this yesterday in one of my RV facebook groups and got 100 signups in 5 hours. Some people begging to pay. I knew this was a problem for me, but it turns out I'm for sure not alone. This new world of making software is WILD. A week of work is all it took so far. 2 years ago I could have maybe raised seed money with the idea... now I have the actual app. ([Original Post (X)](https://x.com/tomjohndesign/status/2114744993625813011)) - [A narrated screen recording for Claude, flying through a city interchange where the generated roads and ramps break apart](https://www.tomjohn.design/videos/whiteknuckle/annotating.mp4): Turns out making the whole world drivable from satellite + road data + other sources isn't as easy as it sounds. This is a section of a 20 min video of me annotating with a screencap to Claude, it's much faster than giving individual screenshots. It pulls out the audio, and then creates subagents to investigate all the issues I mention in the transcript. This will probably be baking until... tomorrow? ([Original Post (X)](https://x.com/tomjohndesign/status/2116258148390670570)) - [A camper crossing a bridge over a coastal valley as the satellite imagery switches to generated hills, trees, beaches and water](https://www.tomjohn.design/videos/whiteknuckle/generated-world.mp4): I realized after about a week of trying to make satellite data work for https://whiteknuckle.app it would be easier to create a generated texture world instead. I'm coming for you Apple maps... ([Original Post (X)](https://x.com/tomjohndesign/status/2117341278044344756)) - [A panel of region settings regrowing the same valley as desert, pine forest, coast and farmland](https://www.tomjohn.design/videos/whiteknuckle/regions.mp4): A few reasons why. A - Performance. Downloading all of those images in batches is heavy, and some areas have better coverage than others. Also, the high res endpoints are 'spensive. I'll still keep them in for a fallback, but not for primary visualization. B - Flat images on contoured maps. Bridges and rivers are problematic. They lead to very bizarre artifacts, and confusing visuals. C - Consistency. I can now style everything how I like, which may not be accurate to the real images, but we're all used to this for in-car nav, so this will work. If I add a carplay side of this later, this will be perfect. D - POI and Accuracy of data. In some places, the sat images disagree with the lidar/gov data/etc. They could be made to work, but I, again, don't want to spend the $ to get that level of satellite data. E - Just cooler. I get total control over the look and feel of the world. I've now generated different trees, added logic to make them render differently for elevation, region, added crops, grasslands, palm trees, rocks, deserts... I want to be sure this doesn't just read the same as an existing maps data. I want to make it my own version. ([Original Post (X)](https://x.com/tomjohndesign/status/2117341279902486680), [Thread (X)](https://x.com/tomjohndesign/status/2117341278044344756)) - [Ramps stacked over one another at the George Washington Bridge interchange in New York, the camper’s route running through](https://www.tomjohn.design/videos/whiteknuckle/gw-bridge.mp4): Interchanges are going to be my white whale... I'm likely going to have to have the precompiled and served to the user vs trying to calculate them at runtime. This is the GW bridge in NYC. Yeah, not easy. It's taken about a week of testing and overnight prompts to even get it looking this good. Claude is kiiiinda okay at spotting issues here when debugging in headless chrome, but I'm learning that it doesn't seem to understand that roads aren't usually sideways. ([Original Post (X)](https://x.com/tomjohndesign/status/2117347403619856655), [Thread (X)](https://x.com/tomjohndesign/status/2117341278044344756)) - [The camper on a route via I-40 through my generated world of hills and trees, the road's clearances listed beside it and its elevation below, the view swapping between the drive and the map](https://www.tomjohn.design/videos/whiteknuckle/intro.mp4) - [A route’s problem spots on the map, then the camper driving them over satellite imagery](https://www.tomjohn.design/videos/whiteknuckle/route-map-drive.mp4) - [Stepping through the turns of Going-to-the-Sun Road, each one shown on the map](https://www.tomjohn.design/videos/whiteknuckle/sun-road-steps.mp4) - [Hovering the turns of Going-to-the-Sun Road on the map](https://www.tomjohn.design/videos/whiteknuckle/sun-road-map.mp4) - [The rig on the Golden Gate Bridge, built from satellite imagery and 3D tiles](https://www.tomjohn.design/videos/whiteknuckle/golden-gate-satellite.mp4) - [The admin pages for the Golden Gate Bridge, a tunnel and the trucks](https://www.tomjohn.design/videos/whiteknuckle/admin-structures.mp4) - [Driving a route over satellite imagery, the sidebar listing why it won’t fit](https://www.tomjohn.design/videos/whiteknuckle/satellite-drive.mp4) - [Driving Going-to-the-Sun Road through a tunnel, with speed, grade and clearance under the scene](https://www.tomjohn.design/videos/whiteknuckle/tunnel-dashboard.mp4) - [From the route map into the drive, through a generated world of trees and hills](https://www.tomjohn.design/videos/whiteknuckle/map-to-drive.mp4) - [Choosing a stretch on the map and driving it in the generated world](https://www.tomjohn.design/videos/whiteknuckle/stretch-drive.mp4) - [The rig on a highway interchange in the generated world](https://www.tomjohn.design/videos/whiteknuckle/interchange.mp4) - [Flying over the generated world along the route](https://www.tomjohn.design/videos/whiteknuckle/generated-flyover.mp4) - [My Paper boards of Whiteknuckle's brand: marks, road letters, knuckle marks, danger signs and W curves, with the chosen mark in context](https://www.tomjohn.design/images/content/whiteknuckle/brand-boards.webp) - [Two boards of twenty marks each, Knuckle marks and Danger signs, the yellow W curve I chose among the signs](https://www.tomjohn.design/images/content/whiteknuckle/brand-signs.webp)