Social Image Generation
Relevant source files
The following files were used as context for generating this wiki page:
Social Image Generation refers to the process of creating and maintaining Open Graph and X (Twitter) assets for The Driving Fly project. These assets provide visual previews when the website is shared on social media platforms, highlighting the current state of the advertising auction and the experimental vehicle.
The system uses a combination of built-in image generation tools for static social assets and real-time canvas transformations for dynamic advertiser artwork. While social preview images are versioned and stored in the public/social/ directory, the live car livery is managed through a separate pipeline that fits advertiser logos to the 3D model geometry.
Sources: apps/website/SOCIAL-IMAGES.md:3-8, apps/website/README.md:143-149
Social Preview Assets
The project maintains specific versioned assets for social sharing. These images are JPEG-encoded and resized for delivery, with metadata in the site layout referencing their versioned URLs.
Current Assets
| Asset Type | File Path | Dimensions |
|---|---|---|
| Open Graph (Wide) | public/social/driving-fly-wide-v3.jpg | 1200 × 630 |
| X / Square | public/social/driving-fly-square-v3.jpg | 1080 × 1080 |
Sources: apps/website/SOCIAL-IMAGES.md:5-10, apps/website/src/app/layout.tsx:24-42
Generation Logic
Social images are updated using a generative tool to perform precise text corrections on existing v2 images. The generation prompt enforces the preservation of the original car rendering, typography, colors, and composition while updating auction-specific text.
Sources: apps/website/SOCIAL-IMAGES.md:12-16
The diagram shows the transformation flow from v2 source images to final v3 social assets.
Sources: apps/website/SOCIAL-IMAGES.md:7-16
Integration with Site Metadata
The generated images are linked within the RootLayout of the Next.js application. The metadata object defines how social platforms should display the site content using the versioned assets.
- OpenGraph: Configures
siteName,title, andimages(pointing to the wide and square v3 files). - Twitter: Configures the
summary_large_imagecard and references the wide v3 image.
Sources: apps/website/src/app/layout.tsx:21-55
Live Livery Artwork Processing
While static social images are pre-generated, the project generates dynamic advertiser artwork for the car's livery in real-time within the browser.
Processing Steps
- Canvas Fitting: The browser fits the uploaded logo to the selected car surface.
- Transformation: The system applies user-defined scale, rotation, and positioning (horizontal/vertical).
- Cropping: The exact spot boundary defined in the model geometry crops any artwork overflow.
- Encoding: The final transformed artwork is encoded as a PNG for upload to R2 storage.
- Thumbnailing: A separate logo thumbnail (up to 512 pixels) is prepared from the original upload.
Sources: apps/website/README.md:143-152
Artwork Flow Diagram
The sequence illustrates how user-generated artwork is processed locally before being stored and broadcasted.
Sources: apps/website/README.md:143-157, apps/website/src/components/auction-site.tsx:100-140
Technical Implementation Details
Geometry Projection
The layout and positioning of ad spaces on the vehicle are defined in layout.json and projected using a Blender script. This ensures that generated social graphics and live previews remain consistent with the physical geometry of the car model.
Sources: apps/mini-livery/rebuild-layout.py:35-60
Key Data Structures
| Component | Description |
|---|---|
slot_id | Stable key used for pricing, reservations, and livery placement. |
logo_surface | The full-area mesh role for individual advertiser material assignment. |
availability_marker | Dashed borders and mesh text hidden when a placement is active. |
Sources: apps/mini-livery/README.md:33-45, apps/mini-livery/rebuild-layout.py:90-105
Media Previews
The system generates rendered previews for the repository and website media page, including mini-livery-front.png, mini-livery-rear.png, and mini-livery-top.png. These serve as authoritative references for spot placement.
Sources: apps/mini-livery/README.md:21-23, apps/website/src/app/media/page.tsx:75-90
Social image generation ensures that shareable previews reflect the current state of the experiment while maintaining a consistent visual identity. Dynamic artwork processing complements this by allowing real-time livery updates upon payment confirmation.
Sources: apps/website/SOCIAL-IMAGES.md:18-20, apps/website/README.md:154-159