Valorant Kill Feed Generator

Generate Valorant-style kill feed banners for your clips — pick agents, weapons or abilities, team colors, headshots and wallbangs, then export as a transparent PNG.

Live: killfeed.hndr.xyz · Source: github.com/hendraaagil/killfeed

Features

• Agents — every playable agent (portraits from valorant-api).
• Loadout — weapons or the killer agent's abilities.
• Team colors — editable teammate/enemy colors (defaults #67C4A1 / #F15A4A).
• Yellow outline — teammate outline with glow / inner styles.
• Extras — headshot, wallbang, and swap (who kills who).
• Live preview — fit-to-width, fixed 72px banner.
• Export — one-click transparent PNG (html-to-image).

Stack

• React 19 + TypeScript + Vite
• Tailwind CSS v4 (@theme tokens)
• Bun, Oxlint, Prettier
• Data: valorant-api.com

Development

bun install
bun run dev        # start dev server
bun run build      # typecheck + production build
bun run lint       # oxlint
bun run format     # prettier --write
bun run gen:data   # regenerate src/data/valorant.json

Data

Agent and weapon data is prebuilt into src/data/valorant.json (bundled at build time — no runtime API calls). scripts/generate-data.ts fetches from valorant-api.com and trims to the fields the app uses.

Regenerate locally with bun run gen:data, or run the Update Valorant data GitHub Action (workflow_dispatch) — it regenerates and commits the JSON only when it changes.

Credits

Game & assets by VALORANT · data from valorant-api.com · media from VALORANT Wiki · font Barlow.

Not affiliated with or endorsed by Riot Games.