What this is made from.
A new Next.js / React concept for TRR, using actual resources from the linked design mix. These are the specific sources and how they were used.
MotionSites — Cordex
The free Cordex manufacturing prompt was retrieved using its Copy prompt action. Its glass capsule navigation, sticky video stage, normalized scroll progress, and eased video-seek algorithm are adapted into React in TruckHero. The video is encoded with one keyframe per frame, as the prompt specifies. The cable footage, copy, and long page takeover are replaced with TRR’s selected truck film, business content, and a shorter hero. MotionSites
The repair section — actual Magic UI source
BentoGrid and BentoCard now render the asymmetric repair, call, and address composition. This is the actual MIT-licensed React component downloaded from the Magic UI registry through BentoGrids. TRR supplies the photography, text, sizing, palette and keyboard-focus CSS. The original snapshot and MIT license are in references. Magic UI component
The call section — CTA Gallery / enjoylelick
Recreated the specific inspected composition: edge-to-edge photography, centered headline, capsule action, and a short supporting line, grouped together following placement feedback. A distinct component-inspection image replaces the product photo; the truck film is used only in the hero. This gallery supplies visual reference, not React source. View reference
The visit/footer — Footer.design / Basement Studio
Recreated the inspected black footer: stacked navigation, small contact block and legal copy. The oversized wordmark was removed following feedback. Adapted the contact area to TRR’s address, hours and directions. No Basement brand assets or code copied. View reference
Engine assembly section
New eight-second conceptual engine assembly footage generated with Grok Video. The section reuses the MotionSites Cordex scroll-to-video pattern: scrolling advances the assembly alongside one stable shop introduction. This is conceptual imagery, not a mechanical instruction or a claim about available engine-rebuild services.
Engine text motion — Kinetics
Adapted the inspected Stagger Entrance CSS: 14px vertical travel and cubic-bezier(.16,1,.3,1), extended to 700ms and triggered once with IntersectionObserver. The engine remains scroll-controlled; captions no longer cycle or fly across the screen. Kinetics reference
TRR content and imagery
The TRR wordmark and selected seven-second truck film come from the existing TRR concept workspace. Generated imagery illustrates a repair setting; it does not depict the actual premises or staff. Phone and weekday hours were checked against the public Waze listing on September 13, 2026. Unit B comes from the existing Google-listing research. General repair is the confirmed baseline; specific repairs and availability require a call.
Prototype boundary
Local preview only. Call links open the phone handler; directions open Google Maps. There is no booking submission, payment flow, or implied appointment confirmation.