Skip to content

CONTRIBUTING.md

Latest commit

 

History

History
82 lines (56 loc) · 3.54 KB

CONTRIBUTING.md

File metadata and controls

82 lines (56 loc) · 3.54 KB
Raw

Contributing to boxting/.github

Thanks for helping shape how Boxting Labs shows up on GitHub. This repo is small and mostly visual, but a few conventions keep changes reviewable.

What you can contribute

  • Profile README updates — copy edits, new links, project highlights (profile/README.md).
  • Intro animation tweaks — timing, easing, colors, new transitions (intro-video/src/Composition.tsx).
  • Brand asset swaps — only when the canonical Boxting Labs logo changes.
  • Docs — clarifications to this guide or the root README.

Workflow

  1. Fork the repo (external contributors) or create a feature branch (members).
  2. Branch naming: feat/<topic>, fix/<topic>, docs/<topic>, chore/<topic>.
  3. Open a PR against main with a short description and — for visual changes — a before/after screenshot or GIF.
  4. One topic per PR. Don't bundle a logo change with a README rewrite.

Animation changes

Before opening a PR that touches intro-video/:

  1. Preview locally with npm run dev and scrub the timeline — make sure transitions still hit cleanly.

  2. Re-render the GIF and update assets/boxting-intro.gif:

    cd intro-video
npx remotion render BoxtingIntro out/boxting-intro.gif --codec=gif
cp out/boxting-intro.gif ../assets/boxting-intro.gif

  3. Keep the filename boxting-intro.gif — the profile README embeds it by name.

  4. Keep the GIF under ~5 MB so the profile page loads fast. If you need more visual fidelity, consider increasing easing rather than resolution.

  5. Don't commit intro-video/out/ — it's gitignored. Only the final asset in assets/ ships.

  6. Don't commit intro-video/node_modules/ — also gitignored.

Remotion rules to remember

  • Use useCurrentFrame() + interpolate() for all animation. No CSS transitions or keyframes — they break frame-by-frame rendering.
  • Place assets in public/ and reference them with staticFile().
  • Load fonts via @remotion/google-fonts/<FontName>. Don't import font CSS yourself.
  • Use <Sequence from={x}> for delayed entrances instead of conditional rendering.

See remotion.dev/docs for the full reference.

Commit messages

Short, imperative, and scoped. Examples:

feat(intro): add letter-by-letter wordmark draw-on
fix(intro): widen logo crop region to prevent clipping
docs: add contributor guide
chore: bump remotion to 4.0.461

Don't add co-author trailers.

Code style

  • TypeScript everywhere in intro-video/.
  • The project uses Prettier + the Remotion flat ESLint config. Run npm run lint from intro-video/ before pushing.
  • Components are small and pure. If a piece of the animation grows past ~80 lines, split it.

Visual & brand guidelines

  • Primary orange: as defined in the source logo PNG — don't sample variants.
  • Wordmark font: DM Sans 800. Don't substitute.
  • Background: solid white for the intro. Don't introduce gradients or textures without a brand review.
  • Letter spacing: tight (-0.04em) for the wordmark, wider (0.3em) for LABS.

Reporting issues

Open a GitHub issue with:

  • What you saw (with a screenshot/GIF if visual).
  • What you expected.
  • The OS + Node version if it's a render or build issue.

Questions

For anything ambiguous — design direction, scope, brand — open a draft PR or an issue and ping a maintainer rather than guessing. Visual changes are easier to discuss against a concrete proposal.