blog.dunce.party

autotronic

autotronic.dunce.party

CROSSPOST FROM https://github.com/potatolover68/autotronic/blob/main/README.md

so named because the first skin i made was an autotronic karambit

An interactive web viewer for CS:GO weapons in the style of a Trading Card.

this site's art is licensed under the CC BY-NC-SA 4.0 this sites code uses https://micku7zu.github.io/vanilla-tilt.js/ under the MIT License

the code is under the AGPL v3 license

csgoitems.blend: https://drive.google.com/file/d/1HVAFL85yoonOeP3hxbas3MG7Wcs3OLJP/view?usp=sharing

Features

Card Creation Guide

Tools Required

Card Creation Process

  1. Blender Setup

    • Use csgoitem.blend to render your weapon images
    • weapons are exported with Source2Viewer as a gltf then imported into blender where it is manually lit and exported at high quality

  2. Figma Layout

    ![screenshot](dev/Screenshot 2025-02-13 173930.png)

    • Create an outer frame of 450x630 pixels
    • Inside this, create Frame 1 at 300x420 pixels
    • Place your rendered weapon image inside the outer frame

  3. Image Export Process

    1. Export Frame 1 (300x420)
    2. Upscale the exported image by 4x to achieve 1200x1680 final resolution
    3. This will be your final card image

Card Design Specifications

Adding New Cards

  1. Create your card following the process above
  2. Add the card information to weapons.json:
{
  "name": "Weapon Name",
  "category": "Category",
  "image": "./assets/weapon_front.png",
  "image-alt": "Weapon Name Front",
  "card": "./assets/weapon_card.png",
  "card-alt": "Weapon Name Card",
  "link": "optional-steam-market-link"
}

Development

Setup

  1. Clone the repository
  2. Open index.html in a modern web browser
  3. No build process required - it's pure HTML, CSS, and JavaScript

File Structure