CircleOn.me is a browser tool for student athletes making recruiting videos. They paste a YouTube link or upload game film, click on themselves at each key play and get back an MP4 with freeze-frames, an animated circle and optional music. There is a free tier, and paid plans run through Stripe.
Who uses it, and for what
- A high-school player circles themselves in a full match so college coaches can follow them on every play.
- A parent turns a season of YouTube game film into a short recruiting video without paying an editor.
- A club coach on the Pro plan exports highlight clips for several players each month.
- The founders check signups, revenue, marketing attribution and render status in the admin dashboard.
How it’s built
- A browser studio where you click to place and resize circles on a YouTube or uploaded video. Drafts save locally and sync to Firestore.
- Exports render on Modal workers that fetch the video through rotating proxies and build the MP4 with FFmpeg. Firestore listeners show the status as it changes.
- Cloud Functions enforce plan limits, credits and refunds, handle Stripe webhooks and block re-registering for extra free exports.
- Typed content modules generate a page for each sport, position and division, deployed from CI to Firebase Hosting.
Stack
In numbers
- About 78 Vue components and 29 composables
- 15 Cloud Functions: callables, Stripe webhook, Firestore triggers and scheduled jobs
- 4 plans (Free, Single credit, Plus, Pro) on Stripe subscriptions and one-time credits
- Serverless FFmpeg render pipeline on Modal: freeze-frames, circle overlays, music, watermark
- 81 programmatic SEO pages in the sitemap (sports, positions, divisions, how-to guides)
- Admin dashboard with 5 tabs: users, payments, proxies, growth attribution and activity
- 136 commits, about 78% by us
Website
Video studio
Athlete dashboard
Admin dashboard
All screens show invented demo data.