DEV Community: Jacko (Nightlit)

I built a 3D free-kick game in three.js: Magnus curl in 10 lines, floodlights and a keeper that reads your shot

Jacko (Nightlit) — Thu, 22 Oct 2026 07:46:23 +0000

I'm a solo dev and I just shipped Efectazo, a free free-kick football game that runs in the browser, on phones and desktop: https://efectazo.pages.dev

You swipe to shoot, and the shape of your swipe becomes curl on the ball. Here's how the main pieces work.

The ball: gravity, drag and a Magnus force

The physics module is plain JS with no three.js in it, so I can run it headless in tests. Each substep adds three forces to the ball:

// Magnus: CM * (w x v)
export function accel(b, wind) {
  const [vx, vy, vz] = b.v;
  const rx = vx - wind[0], rz = vz - wind[1];
  const sp = Math.hypot(rx, vy, rz);
  const [wx, wy, wz] = b.w;
  const mx = wy * rz - wz * vy, my = wz * rx - wx * rz, mz = wx * vy - wy * rx;
  return [-KD * sp * rx + CM * mx,
          -G - KD * sp * vy + CM * my,
          -KD * sp * rz + CM * mz];
}

Quadratic drag slows the ball, and the cross product of spin and velocity pushes it sideways (side spin) or down (topspin dip). Spin decays exponentially, so the bend gets stronger late in the flight, which is what makes a good free kick look right.

From swipe to shot

Direction comes from the first 40% of the swipe
Power from swipe speed, height from swipe length
Side spin from how much the swipe curves

So if you draw a banana, the ball bends like one.

The goalkeeper

The keeper has a reaction delay, predicts where the ball will cross the line (better keepers read the curl better), and dives with limited speed and reach. A save only happens when the ball actually hits his limbs, so it never feels scripted. The wall (0 to 6 players) jumps when you kick.

Rendering

three.js r160, MeshStandard/Physical materials, PMREM image-based lighting
Two shadow-casting "floodlight" directional lights with PCF soft shadows
A procedural grass shader (mowing stripes plus detail noise) instead of a big texture
ACES filmic tone mapping, bloom, and a slow-motion replay with depth of field after goals
Quality tiers with an Auto mode that drops a tier if the frame rate stays under ~47 fps for 2 seconds, which matters a lot on phones

The game around it

40 career levels, a seeded Daily Challenge (5 shots, with an emoji grid you can share), an endless Arcade mode and Cups. Coins unlock balls, boots, kits, stadiums (night, day, sunset, rain, snow) and celebrations. English and Spanish. It's free, with an optional one-time Pro upgrade.

Play it here: https://efectazo.pages.dev (also on itch: https://nightlit.itch.io/efectazo)

I'd love to hear how it runs on your device and how the curl feels. Happy to go deeper on any part in the comments.

I built a no-sign-up glow-up challenge tracker as a single-file PWA

Jacko (Nightlit) — Thu, 22 Oct 2026 06:17:43 +0000

"Glow-up challenges" (30, 60, 75 or 90 days of small daily habits) are all over TikTok, but most trackers for them want an account, a subscription and your progress photos on their servers before you've checked off day one.

So I built GlowStreak: pick a challenge, tap your habits each day, keep your streak, share a "Day X" story card. No sign-up, English and Spanish, installs to your home screen.

The constraints I set

No backend. Everything lives in localStorage on the device. No accounts means no password resets, no GDPR export requests, and nothing to breach.
Photos never leave the phone. Progress photos are stored locally and only ever rendered into a share card when you hit share.
One file. The app is a single index.html with inline CSS and JS, plus a manifest and a tiny service worker. It deploys to Cloudflare Pages in seconds.
Bilingual from day one. All strings sit in one EN/ES dictionary; language defaults from navigator.language.

The bits that were fun

Streaks without a server. A day key is just YYYY-MM-DD in local time, and a streak is "walk back from today while every habit is checked". Doing it in local time (not UTC) matters a lot when someone checks in at 11:50 pm.

The share card. It's drawn on a 1080×1920 <canvas> (Stories size), turned into a File, and handed to the Web Share API with navigator.canShare({files}). On browsers that can't share files it falls back to a download.

Feeling native. Spring-y cubic-bezier transitions, a progress ring with stroke-dashoffset, small navigator.vibrate taps on Android, and a confetti burst when the last habit of the day is checked. Small things, but they're what make people come back on day 2.

Presets

Gentle 75 (miss a day, log it, keep going), Glow-Up 60, Balanced 75, Monk Mode 30, a 30-Day Walk, and Lock-In 90, or your own habits.

Try it / roast it

👉 https://glowstreak.pages.dev

I'd love feedback on the onboarding flow and the share card. What would make you actually open a habit app on day 14?

I built a colour-season analysis app as one HTML file (with a live camera "drape" mirror)

Jacko (Nightlit) — Thu, 22 Oct 2026 06:00:43 +0000

Colour analysis is huge on TikTok right now: people hold coloured fabric ("drapes") under their face to see whether they're a Soft Summer, a Deep Winter, and so on. The paid apps in this space do very well, but most of them want an account, an app install, or a selfie uploaded to a server before you see anything.

So I built Paleta (https://paletacolor.com): a free colour-season quiz plus a live camera drape mirror, in English and Spanish, that runs entirely in the browser.

What it does

A short quiz maps you to one of the 12 seasons (rule-based scoring, not AI).
You get your season, your 6 best colours and a shareable palette card.
The drape mirror opens your front camera and frames your face with a band of colour, so you can flip between palettes and see which shades brighten your skin and which make you look tired.
No sign-up. The camera stream never leaves the device.

How it's built

One self-contained index.html. HTML, CSS, JS, fonts (subsetted woff2) and season data all inline. No framework, no build step for the core app.
Camera mirror: getUserMedia({ video: { facingMode: 'user' } }) feeds a hidden <video>, and each frame is centre-cropped, mirrored and drawn to a <canvas> with the colour drape painted around the face. No ML, no uploads, so it stays smooth on cheap phones.
Share card: drawn on a <canvas> and exported with toBlob(), then handed to the Web Share API (navigator.share({ files })) with a download fallback.
i18n: a tiny dictionary object with EN/ES strings, language picked from navigator.language and switchable.
PWA: a manifest plus a small service worker that caches the single page, so it opens offline and installs to the home screen.
Hosting: Cloudflare Pages, free tier, deployed through the Pages direct-upload API.
Payments: an optional $4.99 one-time "Plus" unlock uses a Stripe Payment Link that redirects back with a flag. No backend at all (yes, that's spoofable; for a $5 unlock I'm fine with it for now).

Things I learned

Mobile Safari needs playsinline and muted on the <video> or the camera preview goes fullscreen.
Lighting matters more than any algorithm. The app tells you to face a window in daylight, which improves results more than any code could.
Bilingual from day one is cheap when the whole app is one file, and the Spanish-speaking colour-analysis community is underserved.

Try it here: https://paletacolor.com. I'd love feedback, especially on the camera mirror on different phones.

I built a free Splitwise alternative that needs no sign-up

Jacko (Nightlit) — Wed, 21 Oct 2026 00:49:27 +0000

Every group trip I've been on ends the same way: someone opens a spreadsheet, someone else says "I'll pay you back later", and two weeks later nobody remembers who paid for the Airbnb. Splitwise solves this, but its free tier now caps how many expenses you can add per day, and everyone in the group has to make an account.

So I built Parejo: https://getparejo.com

It's a small web app (works on any phone, installable as a PWA) for splitting trip and group costs. I'm Jacko, an indie maker from Mexico City, and this is one of a few small free apps I've shipped this month.

What it does

No sign-up. Open the page, create a group, add people, add expenses.
Unlimited expenses on the free plan.
Any currency. Pay dinner in euros and the hotel in dollars; it converts.
Fewest payments to settle up. Instead of everyone paying everyone, it works out a short list of "A pays B" transfers.
Share by link. Friends open the link and see the same balances, and can add their own expenses and merge them back.
WhatsApp-friendly summary image of who owes whom.
English and Spanish.

A few technical choices

No backend, no accounts. Groups live in your browser's localStorage, and receipt photos (a Pro feature) stay in IndexedDB on your device.

The whole group lives in the share link. The group is packed to compact JSON, compressed with deflate-raw (the browser's CompressionStream), base64url-encoded and put in the URL fragment (#g=...). Fragments are never sent to the server, so sharing a group doesn't upload anything. When a friend adds expenses and sends their link back, the two copies merge as a union by member/expense id, with tombstones for deletions.

Money in integer cents. Every amount is stored in cents, and splits allocate the leftover cent deterministically so balances always sum to exactly zero. The core money logic is a separate pure module with tests, including a fuzz test that generates 400 random groups and checks that every one settles to zero in at most n−1 transfers.

Settling up. It's a greedy match: sort debtors and creditors by amount and repeatedly pair the largest debtor with the largest creditor. Not provably minimal in every case (that's a hard problem), but it never needs more than n−1 payments and in practice it's what you'd do by hand.

Pricing (honest version)

Splitting is free with no limits. There's an optional one-time Trip Pass ($4.99) for one group or Lifetime ($14.99) that adds receipt photos, CSV/PDF export, custom categories and removes the "Made with Parejo" watermark on the summary image. No subscription.

Try it / tell me what's broken

https://getparejo.com (there's a "See an example" button if you just want to poke around).

I'd love feedback, especially on the settle-up screen and the share-link flow. What would make you switch from whatever your group uses now?