Boxting Labs · .github

This is the special .github repository for the Boxting Labs GitHub organization. The contents of profile/README.md are rendered on the public org profile page.

It also holds the source for the animated intro GIF used across our GitHub presence and website.

What's in here

Path	Purpose
profile/README.md	Markdown rendered on the github.com/boxting profile.
assets/boxting-intro.gif	The rendered intro animation embedded in the profile.
assets/boxting logo.png	Source brand lockup (icon + wordmark).
intro-video/	Remotion project that produces boxting-intro.gif.

The intro animation

The 5-second intro (1200×600, 30 fps) is built with Remotion — a React-based framework for programmatic video. It composes:

1. The orange hexagon logo scales and rotates into place with a gentle floating idle motion.
2. The boxting wordmark draws on letter-by-letter — each glyph traces its outline, then fills in (DM Sans 800).
3. The LABS tag fades up underneath with a tightening letter-spacing.
4. The final lockup holds for ~1.7 s so the GIF loops seamlessly.

Updating the animation

Prerequisites

• Node.js 20+ and npm.
• macOS, Linux, or Windows. Remotion uses Chrome Headless Shell, which is downloaded automatically on first render.

Install

cd intro-video
npm install

Preview in the Remotion Studio

npm run dev

This opens the Remotion Studio in your browser. You can scrub the timeline, tweak props live, and see the composition update instantly.

Render a still frame (fast feedback loop)

npx remotion still BoxtingIntro out/preview.png --frame=40

--frame is zero-based, so at 30 fps --frame=30 is the one-second mark.

Render the final GIF

npx remotion render BoxtingIntro out/boxting-intro.gif --codec=gif

Then copy the result into the repo's assets/ folder so it's picked up by the profile README:

cp out/boxting-intro.gif ../assets/boxting-intro.gif

The profile README at profile/README.md references ../assets/boxting-intro.gif — keep that filename stable to avoid breaking the embed.

Project layout

intro-video/
├── public/
│   └── boxting-logo.png         # Source brand lockup (read via staticFile())
├── src/
│   ├── Root.tsx                 # Composition registration (size, fps, duration)
│   ├── Composition.tsx          # The actual animation
│   └── index.ts                 # Remotion entry point
└── package.json

The whole animation lives in intro-video/src/Composition.tsx. The composition is registered in intro-video/src/Root.tsx where width, height, fps, and duration are defined.

Working with Remotion

A few things worth knowing if you're new to Remotion:

• Animations use useCurrentFrame() + interpolate(). CSS transition and @keyframes are forbidden — they don't render correctly because Remotion renders each frame independently.
• Assets go in public/ and are referenced with staticFile("filename.png").
• Fonts are loaded via @remotion/google-fonts/<FontName>. We use DMSans at weight 800 to match the wordmark.
• The stroke draw-on effect uses SVG <text> with stroke-dasharray and an animated stroke-dashoffset, plus a fill-opacity ramp that kicks in just before the outline completes.

Full docs: remotion.dev/docs.

Claude Code skills (optional)

This project was scaffolded with help from the Claude Code remotion-best-practices skill, which encodes Remotion conventions (using interpolate, Sequence, staticFile, etc.) so generated code follows the framework's rules.

If you use Claude Code and want to install the same skill set:

# In your Claude Code session, ask:
"Install the remotion-best-practices skill"

Or run /find-skills inside Claude Code to browse and install skills interactively. Skills are stored under ~/.claude/skills/.

Contributing

See CONTRIBUTING.md for the full guide.

License

The Boxting Labs logo and brand assets are © Boxting Labs. The code in this repository is provided as-is for organizational documentation purposes.