DEV Community: Ovi ren

I Built an AI Website Roaster — Paste a URL, Get Absolutely Destroyed

Ovi ren — Sun, 12 Apr 2026 10:39:46 +0000

Kooked is an AI-powered website roaster built with Next.js, Supabase Edge Functions and LLaMA 3.3 70B. Paste any URL and get a brutally sarcastic, shareable roast.

You know that feeling when you look at a website and think "who approved this?" — well, now you don't have to silently suffer. I built Kooked, an AI-powered website roaster that does the judging for you.

👉 Live app: kooked.vercel.app
🐙 GitHub: github.com/iamovi/kooked

What Is Kooked?

Paste any URL. Kooked scrapes the site's content, feeds it to LLaMA 3.3 70B, and delivers a long, ferociously sarcastic, deeply detailed critique — complete with a shareable link to the full roast.

Yes, it ends with at least one kind thing to say. Sometimes.

Features at a Glance

Brutal AI Roasts — Three extensive roast paragraphs explicitly prompted for maximum sarcasm and word count
Shareable Roast Pages — Every roast gets a unique URL (/roast/[id]) you can send to anyone
Global History Feed — A live sidebar showing all websites roasted in the last 24 hours, powered by Supabase Realtime
Favicon Fetching — Each roast card shows the target site's real favicon via Icon.Horse
Dark / Light Mode — Clean monochrome design with a single fiery orange accent

The Tech Stack

Layer	Tech
Frontend	Next.js 15 (App Router), React, Tailwind CSS
UI Primitives	Radix UI Dialog
Backend API	Supabase Edge Functions (Deno)
AI Model	Groq API — Meta LLaMA 3.3 70B Versatile
Web Scraping	Jina Reader API (`r.jina.ai`)
Database	Supabase PostgreSQL + Realtime
Favicon Service	Icon.Horse
Icons	Lucide React

How It Works

Here's the flow from paste to roast:

User pastes URL
      ↓
Next.js calls Supabase Edge Function
      ↓
Edge Function fetches page content via Jina Reader
      ↓
Content sent to Groq (LLaMA 3.3 70B) with a spicy system prompt
      ↓
Roast saved to Supabase PostgreSQL
      ↓
Unique shareable URL generated
      ↓
Global feed updated via Supabase Realtime

One of the things I'm most happy about: the AI prompt and Groq API key live entirely inside the Supabase Edge Function — they're never exposed to the browser. The client only ever talks to the Edge Function endpoint.

The Prompt Engineering

Getting LLaMA 3.3 to be actually funny and actually brutal took some iteration. The final prompt explicitly:

Demands three long, detailed paragraphs (no lazy one-liners)
Specifies maximum sarcasm and roast depth
Requires ending with at least one genuine compliment (balance is key 😅)

Running It Locally

1. Clone & install

git clone https://github.com/iamovi/kooked.git
cd kooked
npm install

2. Set up environment

Create .env.local:

NEXT_PUBLIC_SUPABASE_URL=https://your_project_id.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key

3. Set up the database

npx supabase db push

4. Deploy the Edge Function

npx supabase login
npx supabase link --project-ref your_project_ref
npx supabase secrets set GROQ_API_KEY=your_groq_api_key
npx supabase functions deploy roast

5. Start the dev server

npm run dev

What I Learned

Supabase Edge Functions are underrated. Running Deno-based serverless functions that sit right next to your database, handle secrets properly, and deploy in seconds is a genuinely great developer experience.

Jina Reader is a cheat code for web scraping. Prefixing any URL with r.jina.ai/ returns clean, readable markdown from any webpage — no Puppeteer, no parsing headaches.

Groq + LLaMA 3.3 70B is fast. Inference is quick enough that the roast feels snappy, which matters a lot for user experience.

What's Next?

A few ideas I'm considering:

[ ] Rating/voting on roasts
[ ] Roast categories (design, copy, performance, etc.)
[ ] Side-by-side website comparison roasts
[ ] A "defend your site" mode where the AI argues the opposite

Try It & Contribute

The project is open source under the MIT License.

🌐 kooked.vercel.app
⭐ github.com/iamovi/kooked

Go roast something. Your competitor's landing page is waiting. 🔥

Stop Writing Bad Commit Messages — The Complete Conventional Commits Guide

Ovi ren — Sun, 15 Mar 2026 13:49:41 +0000

I'll be honest — I used to write terrible commit messages.

fixed stuff. update. ok now it works. Sound familiar?

It wasn't until I came back to one of my own projects after a few months and had absolutely no idea what I'd done or why, that I realized I was basically leaving myself (and anyone else) completely in the dark.

So I went deep on Conventional Commits, built this guide as a reference for myself, and now I'm sharing it here. It's the most complete version I could put together. Bookmark it, share it with your team — and let's never write a useless commit message again.

Why Does This Even Matter?

You might be thinking — it's just a commit message, who cares?

Here's the thing. Three months from now, you will care. A new teammate will care. The person reviewing your PR will care.

Bad commit history looks like this:

fixed stuff
update
wip
changes
ok now it works
final final FINAL

That tells you nothing. Good commit history looks like a story — you can scroll through it and actually understand what happened, when, and why.

On top of that, good commits unlock real automation:

Automatic changelog generation
Automatic semantic versioning
CI/CD tools that understand your history
git bisect that actually helps you find bugs

This is also the standard used by Angular, Vue, Electron, ESLint, and thousands of other major open source projects. Once you get it, you won't go back.

The Format

It's simpler than it looks:

<type>(<scope>): <description>

[optional body]

[optional footer(s)]

Part	Required	Description
`type`	✅	Category of change
`scope`	❌	Area of the codebase affected
`description`	✅	Short summary of the change
`body`	❌	What changed and why
`footer`	❌	Breaking changes, issue refs, co-authors

A couple of rules to remember:

Always leave a blank line between the description and body
Always leave a blank line between the body and footers
The ! symbol after type/scope means it's a breaking change

Types — What Goes Where

This is the part most people get wrong. Let me break down every type so there's no guessing.

`feat` — New Feature

Something new that users or API consumers can actually see or use.

feat: add dark mode toggle
feat(auth): add OAuth2 login support
feat(api): add pagination to /users endpoint

→ MINOR version bump (1.0.0 → 1.1.0)

`fix` — Bug Fix

Something was broken. Now it isn't.

fix: resolve crash on empty search input
fix(cart): correct total price calculation
fix(mobile): fix nav menu not closing on tap

→ PATCH version bump (1.0.0 → 1.0.1)

`chore` — Maintenance

All the boring-but-necessary stuff that doesn't touch production behavior or tests.

chore: update dependencies
chore: remove unused imports
chore: clean up .gitignore
chore(deps): bump lodash from 4.17.20 to 4.17.21

→ No version bump.

`docs` — Documentation

README updates, inline comments, JSDoc, wikis, changelogs — anything that's purely documentation.

docs: add installation guide to README
docs(api): document rate limiting behavior
docs: fix broken links in CONTRIBUTING.md

→ No version bump.

`style` — Code Formatting

Whitespace, semicolons, import ordering — the stuff your formatter handles. Nothing that changes how the code actually runs.

style: format files with prettier
style(button): fix inconsistent spacing
style: remove trailing whitespace

⚠️ Don't confuse this with CSS or visual UI changes. Use feat or fix for those.

→ No version bump.

`refactor` — Code Restructuring

You rewrote something internally — cleaner, simpler, better organized — but the behavior didn't change and no bug was fixed.

refactor: extract validation into separate module
refactor(auth): simplify token refresh logic
refactor: replace forEach with map in data transform

→ No version bump.

`test` — Tests

Adding, fixing, or updating tests. No changes to production code.

test: add unit tests for useAnimeList hook
test(api): add integration tests for /search endpoint
test: fix flaky timeout in auth tests

→ No version bump.

`perf` — Performance

Made something faster without changing what it does.

perf: debounce search input to reduce API calls
perf(images): add lazy loading to anime cards
perf: memoize expensive genre filter computation

→ PATCH version bump in some configs.

`ci` — CI/CD Config

GitHub Actions, CircleCI, Jenkins workflows — anything that touches your pipeline config.

ci: add automated deployment to Vercel
ci: fix failing lint step in GitHub Actions
ci(docker): update Node.js base image to 20-alpine

→ No version bump.

`build` — Build System

Webpack, Vite, tsconfig, package.json — anything related to how your project gets built.

build: migrate from CRA to Vite
build: add path aliases to tsconfig
build(deps): add recharts as dependency

→ No version bump.

`revert` — Reverting a Commit

Something went wrong. You're going back.

revert: revert "feat: add experimental offline mode"

Always mention the hash in the body so others know exactly what was undone:

revert: revert "feat: add experimental offline mode"

Reverts commit a1b2c3d.
Caused a regression in the login flow on Safari.

Extended Types

These aren't universal, but you'll see them in larger codebases:

Type	When to use
`security`	Patching a security vulnerability
`hotfix`	Urgent production fix
`i18n`	Internationalization changes
`a11y`	Accessibility improvements
`infra`	Infrastructure changes (Terraform, Docker, K8s)
`init`	Initial project setup
`wip`	Work in progress — should never stay on `main`

Scopes — Be Specific About What You Touched

Scopes are optional, but once your codebase grows past a certain point, they become really valuable. They tell you where the change happened at a glance.

feat(auth): add JWT refresh logic
fix(navbar): resolve dropdown z-index issue
chore(deps): update react to 18.3.0

A few rules:

Lowercase only
One or two words max
Pick one name and stick to it — auth and authentication being used interchangeably is confusing

Common patterns:

# By feature
feat(auth), feat(chat), feat(search), feat(dashboard)

# By layer
fix(api), fix(ui), fix(db), fix(hooks)

# By platform
fix(mobile), fix(ios), fix(web)

# By component
style(AnimeCard), refactor(useAnimeList), test(anilist)

Writing a Good Description

This is where most people slip up. The description is the short summary after the colon — and there are a few rules that matter more than you'd think.

✅ feat: add login page
❌ feat: Added login page
❌ feat: adding login page.
❌ feat: Add Login Page

Imperative mood — write it like a command. add, not added or adding
Lowercase the first word (unless it's a proper noun)
No period at the end
Under 72 characters — so it doesn't get cut off in terminals or GitHub
Be specific — fix episode count not updating after progress change is infinitely more useful than fix bug

The Commit Body — Use It More Than You Do

Most people skip the body entirely. That's a mistake.

The body is where you explain why you made the change — and that's the part that's actually hard to figure out later. The diff already shows what changed.

Here's a good example:

feat(chat): wire recommendations through AniList API

Previously recommendations were pulled from a static local array
of 20 hardcoded titles. Every user got the same suggestions
regardless of what genres they asked for.

Now recommendations query the AniList GraphQL API directly,
filtering by genre and sorting by popularity. Results are
dynamic and always current.

Note: adds a 300-500ms delay on recommendation requests.
Debounced to avoid hammering the endpoint.

Future you will thank present you for this.

Footers — Small Details That Matter

Closes #42
Fixes #17
BREAKING CHANGE: description of what broke
Co-authored-by: Jane Doe <jane@example.com>

Closes #42 is worth the two seconds it takes to type — GitHub and GitLab will automatically close the linked issue when the commit lands on your default branch. It creates a clean paper trail between the code and the original task or bug report.

Breaking Changes

Two ways to flag them:

Method 1 — The ! symbol:

feat!: change exportList to return Promise
feat(api)!: remove deprecated v1 endpoints

Method 2 — Footer:

feat(api): update authentication flow

BREAKING CHANGE: API tokens are no longer accepted as query params.
All requests must include the Authorization header instead.

Both together (best option for clarity):

feat(api)!: remove query param authentication

BREAKING CHANGE: API tokens are no longer accepted as query params.
All requests must include the Authorization header instead.
Migration guide: https://docs.example.com/migration/v2

→ MAJOR version bump (1.0.0 → 2.0.0)

Real-World Examples

Everyday commits

feat: add anime search bar to header
fix: resolve infinite scroll triggering on page load
chore: remove console.log statements
style: format components with prettier
docs: add JSDoc to useAnimeList hook

With scope

feat(chat): add quick action buttons for common queries
feat(stats): add genre breakdown pie chart
fix(card): fix episode progress bar overflow on mobile
fix(anilist): handle null description from API gracefully

Full commit with body and footer

fix(anilist): handle rate limiting from AniList API

AniList enforces a 90 requests/minute rate limit. Under heavy
search usage (fast typing), the app was hitting this and showing
blank results with a cryptic 429 error in the console.

Added exponential backoff retry logic with a max of 3 attempts.
Added a user-facing toast notification when retries are exhausted.

Closes #12

Breaking change

feat(export)!: change exportList format from array to object

Previously exportList returned a raw array of Anime objects.
It now returns an AnimeListState object with `animes` and
`lastUpdated` fields, consistent with the internal state shape.

BREAKING CHANGE: importList now expects an AnimeListState object.
Old JSON backups using the array format will no longer import correctly.
Run the migration script at scripts/migrate-backup.js on old files.

What NOT to Do

Vague descriptions

# Bad
fix: fix
feat: update
chore: stuff

# Good
fix: prevent crash when anime list is empty
feat: add episode progress tracking to anime cards
chore: remove unused StatusBadge variant

Wrong type

# Bad — this is a fix, not a style change
style: fix broken layout on mobile

# Bad — this is a feat, not a refactor
refactor: add search history dropdown

# Good
fix: fix broken layout on mobile
feat: add search history dropdown

Too many changes in one commit

# Bad
feat: add dark mode, fix mobile nav, update README

# Good — three separate commits
feat: add dark mode toggle
fix(nav): fix mobile menu not closing on route change
docs: update README with dark mode usage

Uppercase or period

# Bad
feat: Add new search functionality.

# Good
feat: add new search functionality

How This Connects to Versioning

This is where it gets really powerful. Conventional Commits maps directly to Semantic Versioning (MAJOR.MINOR.PATCH):

Commit Type	Version Bump	Example
`feat`	MINOR — `1.0.0` → `1.1.0`	New feature added
`fix`	PATCH — `1.0.0` → `1.0.1`	Bug fixed
`perf`	PATCH — `1.0.0` → `1.0.1`	Performance improved
`BREAKING CHANGE` or `!`	MAJOR — `1.0.0` → `2.0.0`	API changed
Everything else	No bump	Docs, chores, style, etc.

Tools like semantic-release and release-please can read your commit history and automatically bump the version, generate a changelog, tag a release, and publish to npm — all without you touching a single config value manually.

Setting Up commitlint

You shouldn't rely on willpower to keep commit messages clean. Automate it.

Install

npm install --save-dev @commitlint/cli @commitlint/config-conventional

Configure

// commitlint.config.js
export default {
  extends: ['@commitlint/config-conventional'],
};

Test it

echo "feat: add login page" | npx commitlint
# ✅ passes

echo "added login page" | npx commitlint
# ❌ fails with error

Add Git Hooks with Husky

Now wire it up so it runs automatically on every commit:

npm install --save-dev husky
npx husky init
echo "npx --no -- commitlint --edit \$1" > .husky/commit-msg

Done. From this point on, any commit that doesn't follow the convention gets rejected before it even goes through. No more sneaky fix: stuff messages slipping in.

Commitizen — For Teams That Need a Guided Prompt

If your team keeps forgetting the format, commitizen gives everyone an interactive prompt instead:

npm install --save-dev commitizen cz-conventional-changelog

Add to package.json:

{
  "config": {
    "commitizen": {
      "path": "cz-conventional-changelog"
    }
  }
}

Run npx cz instead of git commit and you'll see:

? Select the type of change:
❯ feat:     A new feature
  fix:      A bug fix
  docs:     Documentation only changes
  style:    Changes that do not affect meaning
  refactor: A code change that neither fixes a bug nor adds a feature
  perf:     A code change that improves performance
  test:     Adding missing tests or correcting existing tests

No memorizing required.

Tips for Teams

1. Agree on scopes upfront. Pick a list, write it down somewhere, and stick to it. Consistency matters more than the specific names.

2. One change per commit. If your description needs the word "and", split it into two commits.

3. Commit often, squash before merging. Work in messy WIP commits locally, then clean them up into proper conventional commits before opening a PR.

4. Body = why, not what. The diff shows what changed. The body is for context that won't be obvious six months from now.

5. Reference issues every time. Closes #42 takes two seconds and creates a permanent connection between your code and the original task.

6. Enforce with tooling, not discipline. People forget. Linters don't. Set up commitlint + Husky and take it off your plate.

Quick Cheatsheet

FORMAT
──────────────────────────────────────────────────────────
<type>(<scope>): <description>

[optional body]

[optional footer(s)]


TYPES
──────────────────────────────────────────────────────────
feat        New feature                → MINOR version bump
fix         Bug fix                    → PATCH version bump
chore       Maintenance, no app change → no bump
docs        Documentation only         → no bump
style       Formatting, no logic       → no bump
refactor    Restructure, no behavior   → no bump
test        Tests only                 → no bump
perf        Performance improvement    → PATCH version bump
ci          CI/CD config               → no bump
build       Build system / deps        → no bump
revert      Revert a commit            → depends
feat! / BREAKING CHANGE  Breaking API  → MAJOR version bump


DESCRIPTION RULES
──────────────────────────────────────────────────────────
✅ Imperative mood   → "add feature" not "added feature"
✅ Lowercase start   → "fix bug" not "Fix bug"
✅ No period at end  → "update config" not "update config."
✅ Under 72 chars    → keep it short and specific


FOOTER TOKENS
──────────────────────────────────────────────────────────
Closes #42
Fixes #17
BREAKING CHANGE: description of what broke
Co-authored-by: Name <email>


EXAMPLES
──────────────────────────────────────────────────────────
feat: add anime search by genre
feat(chat): wire recommendations through AniList API
fix: resolve crash on empty input
fix(anilist): handle null description gracefully
chore(deps): bump vite from 5.4.0 to 5.4.19
docs: add setup instructions to README
style: format files with prettier
refactor: extract query strings into constants
test: add unit tests for useAnimeList hook
perf: debounce search input to reduce API calls
ci: add GitHub Actions deploy workflow
build: migrate bundler from webpack to vite
revert: revert "feat: add experimental offline mode"
feat!: rename AnimeStatus values to uppercase

Useful Tools

Changelog Generation

Tool	Description
conventional-changelog	Generate changelogs from commit history
git-cliff	Highly configurable changelog generator
release-please	Google's automated release PR tool

Automated Releases

Tool	Description
semantic-release	Fully automated versioning and publishing
standard-version	Versioning using semver and conventional commits

Editor Integrations

Editor	Extension
VS Code	Conventional Commits
VS Code	Commitizen Support
JetBrains	Built-in conventional commit support
Vim/Neovim	coc-git

i built a social platform where everything vanishes after 24 hours

Ovi ren — Tue, 03 Mar 2026 04:44:50 +0000

genjutsu is a fast-paced, developer-focused social network where everything vanishes every 24 hours. share code, connect with fellow builders, and stay in the loop without the clutter of a permanent history.

live link: genjutsu-social.vercel.app
source code: github.com/iamovi/genjutsu

screenshots

in a world of digital permanence, genjutsu offers a temporary space for ephemeral thoughts. whether it's a quick code snippet, a late-night epiphany, or a daily progress update, it lives for 24 hours and then disappears—leaving no trace.

key features

24-hour lifespan: every post, comment, and interaction has a strictly enforced 24-hour timer.
developer first: optimized for sharing code and technical insights.
real-time connection: built for instant engagement with a community of builders.
manga aesthetic: a clean, high-contrast visual style inspired by japanese manga.
zero clutter: start every day with a fresh feed and a clean slate.

why genjutsu?

most social platforms are designed for the long term, which often leads to performance anxiety or a fear of being "on the record" forever. i designed genjutsu to remove that pressure. it's a place to be experimental, raw, and authentically you, knowing that your mistakes or half-baked ideas won't follow you around for years.

the tech stack

frontend: react with vite
styling: tailwind css for that crisp manga look
animations: framer motion for smooth transitions
backend: supabase for real-time magic
deployment: vercel

roadmap

i am just getting started. some things on the horizon include:

ephemeral messaging (whispers) that also vanish after 24 hours.
social mini-games to play together within the platform.
dynamic open graph images for better social sharing.
progressive web app (pwa) support for a native feel.

join the loop

genjutsu is open source. i built this for the developer community, and i would love for you to be a part of it. whether you want to fix a bug, suggest a feature, or help with the manga-inspired design, your input is welcome.

if you are interested in helping out, please check the CONTRIBUTING.md file on github. let's build something ephemeral together.

no archives, no legacy, just what's happening now.

introducing KeysAndFingers, an open source multiplayer typing racer

Ovi ren — Sun, 22 Feb 2026 11:51:13 +0000

so, i built Keys&Fingers, a multiplayer typing racer and practice solo, that runs in the browser and also ships as a windows desktop app. here's what it does and how it works.

vs racing mode

the standout feature is vs mode — two players race each other in real-time using room codes. both players see each other's keystrokes as they happen. the race doesn't start until both players hit ready, so there's no scrambling. the winner get random anime waifu as a reward at the end of race.

solo mode

practice solo, enhance your typing skills, see typing history and keyboard heatmap to see your typing faults and more.

what else it does

keysandfingers covers the core typing test basics — real-time wpm, cpm, and accuracy tracking per keystroke. it's built with react, typescript, and vite. there's a live version at: https://keysandfingers.vercel.app and a windows desktop app available in the releases: https://github.com/iamovi/KeysAndFingers/releases/

there's also a theme studio for full customization — fonts, colors, effects — with settings that persist automatically.

tech stack

react + typescript
vite for bundling
real-time sync for vs mode via room codes

the codebase is lightweight by design. no unnecessary dependencies. the windows desktop app is packaged separately and runs on windows 10 and 11.

why i made it

most typing test tools are either too minimal to be interesting or too bloated to be fast. i wanted something that felt snappy, had a real multiplayer mode, and was fully open source. the project is under the mit license.

links

live app: https://keysandfingers.vercel.app
docs: https://iamovi.github.io/KeysAndFingers/
github: github.com/iamovi/keysandfingers

download windows app: click here or, visit docs/ gh releases.

contributions are open. fork it, make a branch, send a pull request.

anilogin: a reactive authentication ui with anime character gaze tracking

Ovi ren — Mon, 16 Feb 2026 14:38:28 +0000

authentication forms are usually boring. text fields, a submit button, maybe some validation messages. but what if your login page could feel alive? what if an anime character reacted to what you typed?

that's exactly what anilogin does.

what is anilogin?

anilogin is a reactive authentication interface that features an animated japanese anime character who responds to your typing in real-time. the character watches what you type in the email field, politely closes their eyes when you enter your password, blinks naturally, and displays contextual thought bubbles based on your interactions.

you can try the live demo here: https://iamovi.github.io/AniLogin/

technical implementation

the project is built with modern web technologies:

react with typescript for type safety and component architecture
vite for blazing fast development and optimized builds
tailwind css and shadcn/ui for consistent, responsive design
custom animation logic for character interactions

the character system

the most interesting part of this project is the character animation system. it's not just a static image with some basic transforms. the implementation includes:

context-aware eye animations: the character's eyes respond to which input field you're focused on. when you type in the email field, the eyes track your text input. when you switch to the password field, the character respectfully closes their eyes with the thought bubble "I'm closing my eyes! I'm not seeing your pass! 🙈"

frame-accurate eyelid blinking: the character blinks naturally using physics-based timing. the blinks aren't random - they follow realistic patterns that make the character feel alive.

cel-shaded anime aesthetic: the character design follows authentic japanese animation principles with proper cel-shading techniques, giving it that classic anime look.

dynamic feedback system: the thought bubble changes based on what you're doing. typing in different fields, submitting the form - each action triggers contextually relevant thoughts from the character.

the interaction algorithm

the core of the interaction is input field tracking. here's how it works conceptually:

detect which input field currently has focus
track the content being typed in real-time
apply appropriate character animations based on field type
for password fields, trigger eye-closing animation
for email fields, show active watching state
smooth transitions between states with easing functions
sync the eyelid animations to maintain natural blinking patterns

the result is a character that genuinely seems to be paying attention to what you're typing, while respecting your privacy when entering sensitive information.

why build this?

beyond the novelty factor, this project explores several interesting frontend challenges:

real-time interaction design: how do you make animations feel responsive without being distracting? how do you balance personality with privacy?

performance optimization: tracking input events and updating character animations needs to run smoothly without janking the rest of the ui.

accessibility considerations: animated interfaces need careful handling. the character provides visual feedback, but the form itself remains fully functional with or without the animations.

component architecture: separating the character logic from the form logic while keeping them synchronized requires thoughtful component design.

getting started

want to run it locally? the setup is straightforward:

git clone https://github.com/iamovi/AniLogin.git
cd AniLogin
npm install
npm run dev

the project uses a standard react + vite setup, so if you've worked with modern frontend tooling, you'll feel right at home.

potential use cases

while this started as an experimental ui project, there are practical applications:

engaging landing pages that need to stand out
educational platforms where character interaction enhances learning
gaming-related authentication where the aesthetic matches the product
portfolio pieces for frontend developers specializing in interactive design
prototyping tools for testing user engagement with animated interfaces
privacy-conscious applications that visually demonstrate data protection

technical details worth noting

the project demonstrates several advanced frontend techniques:

custom hooks for animation: the character system uses custom react hooks to manage animation state, making it reusable and testable.

input event handling: form field interactions trigger character state changes smoothly without blocking user input.

responsive calculations: the character animations work consistently across different screen sizes and viewport dimensions.

state management: user interactions, character state, and form validation all need to stay synchronized. the architecture handles this without prop drilling or overly complex state patterns.

the privacy consideration

one of the most thoughtful aspects of anilogin is how it handles password entry. when you focus on the password field, the character immediately closes their eyes and displays a reassuring message. this isn't just a cute animation - it's a visual metaphor for privacy and security that helps build trust with users.

final thoughts

anilogin shows that authentication doesn't have to be purely functional. with thoughtful design and solid technical implementation, even something as mundane as a login form can become memorable and build user trust through personality.

the code is open source under the mit license, so feel free to fork it, learn from it, or build something entirely new with the concepts.

check out the live demo: https://iamovi.github.io/AniLogin/

grab the source: https://github.com/iamovi/AniLogin

what would you add to make it even more engaging? drop your thoughts below.

i built runtexts - a cli tool for automating message sending

Ovi ren — Sun, 08 Feb 2026 15:29:53 +0000

so i made this thing called runtexts. it's a python cli tool that automates typing and sending messages. basically you tell it what to type, how many times, and how fast, and it does it for you.

similar project with nodejs `ssspeedx`

https://github.com/iamovi/ssspeedx

what it does

sends messages automatically with custom delays
simulates typing (fast bot mode or slow human mode)
has both cli and gui interfaces
can run infinitely or for a set number of times

why i built it

honestly i got tired of manually testing chat interfaces during development. needed something quick to spam test messages without wearing out my keyboard. turned it into a proper package because why not.

how to use it

install from pip:

pip install runtexts

or install manually from github:

git clone https://github.com/iamovi/project_runtexts.git
cd project_runtexts
pip install .

run it:

runtexts

or use the gui:

runtexts gui

tech stack

python
pyautogui for keyboard automation
tkinter for the gui
packaged for pypi

legitimate use cases

before someone asks - yes this can be misused. don't do that. use it for:

testing chat applications you're building
automated testing scenarios
learning automation basics
any situation where you have permission to send bulk messages

important

don't use this for spam, harassment, or anything shady. only use it on platforms and applications where you have explicit permission. violating terms of service or annoying people isn't cool. this tool is for legitimate automation and testing purposes only.

what i learned

dealing with cross-platform keyboard automation has its quirks. building a simple gui that doesn't look terrible takes more effort than expected. pyautogui behavior varies slightly across different operating systems.

the code is on github if you want to check it out or contribute: https://github.com/iamovi/project_runtexts

that's it. hope someone finds it useful.

snakension - a browser extension for playing snake when you're offline

Ovi ren — Sat, 07 Feb 2026 09:15:42 +0000

play snake when your internet dies with this extension,

ever lost your internet connection and wished you had something to do? that's what snakension is for. it's a browser extension that gives you the classic snake game right in your browser, and it automatically notifies you to play when you go offline.

what it does

snakension is straightforward. it sits in your browser extensions and lets you play snake whenever you want. the neat part is that it detects when you lose your internet connection and sends you a notification suggesting you play the game while you wait for your connection to come back.

the extension saves your high score locally, so you can keep track of your best performance. the game itself is clean and responsive with smooth controls.

how to install it

since this isn't on the chrome web store yet, you'll need to install it manually. here's how:

download the zip file from the latest release
unzip the file somewhere on your computer
open your browser's extensions page:
- chrome: chrome://extensions/
- edge: edge://extensions/
- brave: brave://extensions/
enable developer mode (usually a toggle in the top right)
click "load unpacked"
select the unzipped snakension folder

that's it. the extension will now appear in your toolbar.

features

offline detection that sends notifications when you lose internet
saves your high score
responsive controls for smooth gameplay
clean, simple interface
works on chrome, edge, and brave

what makes this different

you might be thinking "i can just play snake in a browser tab." true, but here's why snakension is different:

automatic offline detection - it actively notifies you when you go offline, turning a frustrating moment into an opportunity to play
always accessible - it's pinned to your browser toolbar, no need to bookmark a site or remember a url
works completely offline - unlike web-based games, this doesn't need any internet connection at all once installed
no distractions - just the game, no ads, no tracking, no unnecessary features

it's about having something useful built right into your browser that's actually there when you need it.

what's coming next

i'm planning to expand it into a mini arcade with more classic games added over time.
the goal is to make this a go-to offline gaming hub in your browser. contributions are welcome - if you have suggestions for games or want to help build them, open an issue on github.

the tech

it's built with vanilla javascript, html, and css. no frameworks, no dependencies. the game logic is classic snake - you move around collecting food, growing longer, and trying not to crash into yourself or the walls.

the background script handles the offline detection by listening to the browser's connection status. when it detects you've gone offline, it triggers a notification that opens the game.

open source

the whole thing is open source under the mit license. you can check out the code, fork it, modify it, or contribute on github.

if you're interested in building browser extensions or just want a simple game to play when your internet drops, give it a try.

visit the project page

i turned my portfolio into a bootable operating system (windows portfolio)

Ovi ren — Thu, 05 Feb 2026 12:58:05 +0000

tfish (a windows themed portfolio template with fully functional terminal and other features)

a portfolio that boots like an actual computer

live demo: iamovi.github.io/tfish

source code: github.com/iamovi/tfish

the backstory

i wanted to make a portfolio. but not just any portfolio. i wanted something that would make people go "wait, what?" when they opened it.

so i built tfish - a fully interactive terminal-based portfolio that simulates an entire operating system experience. complete with BIOS boot sequence, login screen, draggable desktop icons, and a functional terminal.

because why show your projects in a normal grid layout when you can make people boot into your portfolio like it's 1995?

what makes it different

it's not just themed, it actually boots

most "terminal-style" portfolios are just green text on a black background. tfish goes further:

BIOS boot sequence with that authentic loading feel
actual login screen (username: user, password: pass)
draggable desktop icons that you can move around
working start menu with themes and wallpaper options
multiple terminal themes (ubuntu, windows cmd, powershell, hacker, retro)
customizable wallpapers
window management with minimize/maximize/close

built with modern tech

under the hood, it's React + TypeScript + Vite. shadcn/ui for components. tailwind for styling. everything you'd expect from a 2025 web app, packaged in a throwback OS interface.

the terminal commands

once you boot in, you can use actual commands:

help - see all available commands
about - learn about me (shows a profile picture and bio)
skills - view technical skills
projects - browse my projects
resume - download my resume
contact - get contact information
waifu - fetch random waifu in the terminal
joke - fetch jokes in terminal
clear - clear the terminal
exit - close the terminal
more commands will be added...

type them in. it feels real. that's the point.

screenshots

boot sequence	desktop view

terminal view	themes

how to use it yourself

yes, it's a template. yes, you can use it for your own portfolio. here's how:

# clone it
git clone https://github.com/iamovi/tfish.git
cd tfish

# install dependencies
npm install
# or
bun install

# run it
npm run dev
# or
bun dev

then customize it:

1. update your info in src/components/Terminal.tsx

change the welcome message, about section, skills, projects, and contact info. it's all in one file.

2. change the username

replace 'ren' with your username throughout the terminal prompts.

3. update the login screen

edit src/components/LoginScreen.tsx with your name.

4. swap the wallpaper

replace public/frieren.jpg with your own image.

5. customize desktop icons

edit src/components/DesktopIcons.tsx to add or remove icons.

6. add your own commands

create new terminal commands in the COMMANDS object.

full customization guide is in the github readme.

adding your own terminal theme

want a custom theme? add it to the theme switcher:

case 'yourtheme':
  return {
    bg: '#000000',           // background
    text: '#ffffff',         // text color
    prompt: 'user@host:~$',  // prompt
    header: 'Your Theme',    // window title
    welcome: WELCOME_MESSAGE,
    caret: '#ffffff'         // cursor
  };

i've included ubuntu, windows cmd, powershell, hacker, and retro themes by default. make your own.

deployment

build it:

npm run build
# or
bun run build

deploy the dist folder to:

vercel
netlify
github pages
anywhere that hosts static sites

why did i make this

honestly? because tech portfolios have gotten boring. everyone has the same hero section, the same project cards, the same "scroll down to learn more" animation.

i wanted something that felt different. something that made you interact with it. something that reminded you of the first time you opened a command line and felt like a hacker.

also, i just really like terminals.

coming soon

i'm actively working on adding more features to make this even more immersive:

youtube player - watch videos without leaving the OS
music player - play your favorite tracks in the background
file explorer - browse through a simulated file system
notepad - take notes in a classic text editor
calculator - because every OS needs one
games - maybe some retro games to kill time
custom apps - build and add your own desktop applications

this project is actively maintained, so expect regular updates with new features!

the tech stack

react - component framework
typescript - type safety
vite - build tool
tailwind css - styling
shadcn/ui - ui components
lucide-react - icons

try it yourself

live demo: iamovi.github.io/tfish

source code: github.com/iamovi/tfish

contributions

it's open source (MIT license). fork it. break it. make it better. send a PR. i'm open to new themes, new commands, new features.

if you end up using this for your portfolio, i'd love to see it. tag me or send a link.

final thoughts

tfish is what happens when you combine nostalgia for old operating systems with modern web development. it's a portfolio that doesn't take itself too seriously but still looks professional enough to send to actual employers.

it's for developers who want their portfolio to be a conversation starter. who want people to remember them because they had "that terminal portfolio that actually boots."

use it. customize it. make it yours.

that's all. go boot your portfolio.

live demo: iamovi.github.io/tfish

source code: github.com/iamovi/tfish

made with ❤️ by ovi ren, for developers who appreciate a good terminal

i made buttons that run away from you (prank projects)

Ovi ren — Tue, 27 Jan 2026 17:38:00 +0000

button-will-react

a collection of untouchable buttons that will make your users question their clicking abilities

so here's the thing

two years ago i created a project called button-will-react. i've been adding new pranks to it regularly since then. but writing about it? that's the part i've been procrastinating on. now here we are.

the concept is simple: what if buttons just... didn't let you click them? what if they had a mind of their own and decided that your cursor wasn't worthy? revolutionary stuff, i know.

what's in the box

this collection includes 10 + different button pranks, each more annoying than the last:

1. sign-in button

an untouchable sign-in button. try clicking it. try using enter. it will throw an alert at you like it's personally offended.

2. propose

the classic "will you be my valentine" but the "no" button is impossible to click. because consent is important, but also, your partner should say yes.

3. valentine

a fun way to propose on valentine's day. assuming you want your relationship to start with mild frustration.

4. get_partner

enter your preferences and get a partner (spoiler: it's me).

5. love_on_hover

contributed by tahsin zidane. hover and get love. it's the most wholesome one here, which isn't saying much.

6. boom_btn

click the button and boom. i won't tell you what happens. that would ruin the surprise.

7. love_on_hover_v2

tahsin zidane strikes again with version 2. because why make one when you can make two.

8. starboy69

an internet meme login project. if you know, you know.

9. button_lol

Inspired from Project 1 but with a different approach.

10. cursor_possession

your cursor afraid of button. lol.

THIS PROJECT IS ACTIVELY MAINTAINED, NEW PROJECTS WILL BE ADDED REGULAR, LOOK FOR NEW PROJECT IN PROJECT GITHUB REPOSITORY!

use it yourself (because why not)

here's the plot twist: you can actually add this to your own projects with a cdn. because apparently i thought "let me make this easy for other people to annoy their users too."

<script src="https://cdn.jsdelivr.net/gh/iamovi/button-will-react@cdn/dist/min/v1.0.0/move.min.js"></script>

<button class="button_will_react">click me!</button>

that's it. add the class button_will_react to any button and watch your conversion rates drop.

why though

honestly? because it's funny. because sometimes web development should be about making people smile (or scream in frustration). because not everything needs to be a serious productivity tool or a groundbreaking framework.

it's harmless. it's silly. it's been sitting in my github for two years collecting dust and a respectable 23 stars from people who also appreciate chaos.

try it

the project is live at iamovi.github.io/button-will-react

the code is on github at github.com/iamovi/button-will-react

it's mit licensed, which means you can do whatever you want with it. use it for pranks. use it for april fools. use it to test your users' patience. i won't judge. and yes, i'm still adding more pranks to the collection, so check back occasionally if you're into that sort of thing.

contributions and open source

this project is fully open source under the mit license. that means:

use it for personal projects
use it commercially
modify it however you want
fork it and make it your own
no attribution required (though always appreciated)

basically, do whatever you want with it. turn it into a library. use it for your portfolio. prank your friends. integrate it into your company's internal tools. i don't care, it's yours now.

shoutout to tahsin zidane for contributing the love_on_hover projects. turns out other people also enjoy making buttons that mess with users.

want to add your own button prank? pull requests are welcome. the only requirements: it has to be harmless and funny. malicious code stays out, chaos is welcome in.

author

Ovi ren
main creator and developer of the button-will-react project

final thoughts

if you're looking for a serious, production-ready ui component library, this isn't it. but if you want to add a little chaos to your next project, or just need a good laugh, give it a try.

i keep adding new button pranks when inspiration strikes (or when i should be doing something more productive). because apparently this is what i do with my free time.

that's all. go forth and make some buttons that refuse to be clicked.

Glitch - A Modern Animated Portfolio Template

Ovi ren — Sun, 25 Jan 2026 07:20:17 +0000

I recently built a portfolio template called Glitch, and I wanted to share it with the dev community. It's designed for developers and creatives who want something more engaging than the usual portfolio sites but don't want to sacrifice performance.

Demo

You can check it out live here: iamovi.github.io/glitch

Why I built this

Most portfolio templates fall into two camps - either they're super minimal and boring, or they're packed with animations that tank performance. I wanted something in between. Something that feels modern and interactive but still loads fast and runs smoothly.

What's inside

Here's what I used to build it:

React 18 + Vite + TypeScript
GSAP for animations (it's just really good at this)
Tailwind CSS for styling
shadcn/ui components
Framer Motion for some declarative animations

The main features are:

Glitch text effects (hence the name)
Magnetic buttons that react to your cursor
Smooth scroll animations
Fully responsive
Pretty decent performance thanks to GSAP's context API

Setup

It's pretty standard React stuff:

git clone https://github.com/iamovi/glitch.git
npm install
npm run dev

Or use bun if that's your thing.

Making it yours

All the content lives in src/components/sections/. Just update:

Hero.tsx - your name and what you do
About.tsx - bio and skills
Work.tsx - add your projects to the array
Contact.tsx - email and socials

For styling, the theme is in tailwind.config.ts and global styles are in src/index.css.

Deployment

Standard Vite build:

npm run build

Everything ends up in dist/ ready to deploy wherever you host static sites.

Some notes

The animations use GSAP ScrollTrigger which is really powerful once you get the hang of it. I tried to keep the code pretty clean so it's easier to understand if you want to modify things or learn from it.

It's all MIT licensed so feel free to use it however you want. The repo is here: github.com/iamovi/glitch

Let me know if you end up using it or have suggestions for improvements.

Made by Ovi ren

repoana - github repository health analyzer

Ovi ren — Fri, 23 Jan 2026 13:57:51 +0000

what is repoana?

repoana is a web application that analyzes any public github repository and gives it a health score from 0 to 100. it breaks down the analysis into five key categories and provides specific recommendations for improvement.

why i built this

as a developer, i often wonder how healthy a repository is before deciding to use it or contribute to it. is it actively maintained? does it have good documentation? is the community engaged? repoana answers these questions instantly.

how it works

just paste any github repository url and get:

overall health score: a comprehensive 0-100 rating
category breakdown: detailed scores across five areas:
- documentation quality
- code quality
- maintenance status
- community engagement
- activity level
smart recommendations: prioritized suggestions for improvement

technical details

built with:

react for the ui
vite for fast development
github rest api for data
lucide react for icons

the scoring algorithm weighs different factors:

documentation (25%): readme, license, contributing guidelines, templates
code quality (20%): issue close rate, pr merge rate, response times
maintenance (25%): commit frequency, contributor activity, last update
community (15%): stars, forks, watchers, health metrics
activity (15%): recent issues, prs, and commits

try it out

live demo: https://iamovi.github.io/repoana/

no signup required. works with any public github repository.

github api limits

works without authentication (60 requests/hour). for power users, add a github personal access token to get 5,000 requests/hour.

source code

the project is open source under mit license.

github: https://github.com/iamovi/repoana

contributions welcome. if you find it useful, consider giving it a star.

future plans

historical tracking of health scores
comparison between multiple repositories
export reports as pdf

made by @iamovi
under MIT license.

Zappp ⚡ - A Lightning-Fast Alternative to VS Code Live Server

Ovi ren — Tue, 20 Jan 2026 12:45:10 +0000

Ever wished you had VS Code's Live Server extension as a standalone CLI tool? Meet Zappp - a simple, fast static file server with live reload functionality that you can run from anywhere.

Why I Built Zappp

As developers, we've all been there: you're working on a quick HTML/CSS/JS project, need to test it locally, and reach for Python's SimpleHTTPServer or VS Code's Live Server. But what if you're not in VS Code? What if you want something you can run from any terminal, on any project, instantly?

That's why I created Zappp - a zero-configuration development server that just works.

Features That Make Development Easier

🚀 Zero Configuration

No config files, no setup. Just run zappp and you're live.

zappp
# Server running at http://localhost:3000

🔄 Automatic Live Reload

Edit your files and watch the browser refresh automatically. No manual reloading, no browser extensions needed.

📁 Beautiful Directory Listing

No index.html? No problem. Zappp shows you a clean directory listing so you can navigate your project easily.

🌐 Network Accessible

Want to test on your phone or share with a colleague? Zappp binds to 0.0.0.0 by default, making your dev server accessible on your local network.

🎨 Developer-Friendly Error Pages

Beautiful, informative error pages help you debug issues faster.

🔒 Built-in Security

Protection against directory traversal attacks keeps your file system safe.

Installation

Install globally with npm:

npm install -g zappp

That's it. You're ready to go.

Usage Examples

Basic Usage

# Start server in current directory
zappp

# Serve a specific directory
zappp ./dist

# Custom port
zappp -p 8080

# Open browser automatically
zappp -o

# Combine options
zappp ./public -p 5000 -o

Real-World Scenarios

Scenario 1: Quick HTML Prototype

cd my-landing-page
zappp -o
# Browser opens automatically, live reload active

Scenario 2: Testing on Mobile

zappp -h 0.0.0.0
# Visit http://192.168.1.x:3000 on your phone

Scenario 3: Production Build Preview

npm run build
zappp ./dist -p 8080

How It Works

Zappp is built on three core technologies:

Node.js HTTP Server - Fast, reliable static file serving
File System Watcher - Detects changes in your project
WebSocket - Real-time communication for live reload

When you run Zappp:

It spins up an HTTP server to serve your files
A file watcher monitors your directory for changes
A WebSocket connection is injected into HTML files
On file change, the server notifies the browser to reload

Simple, elegant, effective.

Command Options

Option	Alias	Description	Default
`--port <number>`	`-p`	Port to use	3000
`--host <host>`	`-h`	Host to bind to	0.0.0.0
`--open`	`-o`	Open browser automatically	false
`--help`		Show help message
`--version`	`-v`	Show version

Why Choose Zappp Over Alternatives?

vs Python SimpleHTTPServer

✅ Live reload built-in
✅ Faster startup
✅ Better error handling
✅ Modern WebSocket-based updates

vs VS Code Live Server

✅ Works outside VS Code
✅ Can be used in any terminal
✅ Programmable (use in npm scripts)
✅ Lighter weight

vs http-server

✅ Live reload included
✅ Zero configuration
✅ Simpler CLI interface

Perfect For

🎨 Frontend prototyping
📱 Testing responsive designs
🧪 Quick experiments
📚 Local documentation viewing
🎓 Teaching and demos
🚀 Build output preview

What's Next?

Zappp is actively maintained and I'm planning to add more features day by day...

Try It Today

npm install -g zappp
cd your-project
zappp -o

Give it a spin and let me know what you think! Contributions are welcome on GitHub.

Get Involved

⭐ Star the repo

🐛 Report issues

🤝 Contribute

Happy coding! ⚡

Fun Fact

The name of this project zappp is actually inspired from Electro Wizard Character in Clash Royale!

Have you tried Zappp? What features would you like to see next? Drop a comment below!

DEV Community: Ovi ren

I Built an AI Website Roaster — Paste a URL, Get Absolutely Destroyed

What Is Kooked?

Features at a Glance

The Tech Stack

How It Works

The Prompt Engineering

Running It Locally

1. Clone & install

2. Set up environment

3. Set up the database

4. Deploy the Edge Function

5. Start the dev server

What I Learned

What's Next?

Try It & Contribute

Stop Writing Bad Commit Messages — The Complete Conventional Commits Guide

Why Does This Even Matter?

The Format

Types — What Goes Where

feat — New Feature

fix — Bug Fix

chore — Maintenance

docs — Documentation

style — Code Formatting

refactor — Code Restructuring

test — Tests

perf — Performance

ci — CI/CD Config

build — Build System

revert — Reverting a Commit

Extended Types

Scopes — Be Specific About What You Touched

Writing a Good Description

The Commit Body — Use It More Than You Do

Footers — Small Details That Matter

Breaking Changes

Real-World Examples

Everyday commits

With scope

Full commit with body and footer

Breaking change

What NOT to Do

Vague descriptions

Wrong type

Too many changes in one commit

Uppercase or period

How This Connects to Versioning

Setting Up commitlint

Install

Configure

Test it

Add Git Hooks with Husky

Commitizen — For Teams That Need a Guided Prompt

Tips for Teams

Quick Cheatsheet

Useful Tools

Changelog Generation

Automated Releases

Editor Integrations

Further Reading

i built a social platform where everything vanishes after 24 hours

screenshots

key features

why genjutsu?

the tech stack

roadmap

join the loop

introducing KeysAndFingers, an open source multiplayer typing racer

anilogin: a reactive authentication ui with anime character gaze tracking

authentication forms are usually boring. text fields, a submit button, maybe some validation messages. but what if your login page could feel alive? what if an anime character reacted to what you typed?

what is anilogin?

technical implementation

the character system

the interaction algorithm

why build this?

getting started

potential use cases

technical details worth noting

the privacy consideration

`feat` — New Feature

`fix` — Bug Fix

`chore` — Maintenance

`docs` — Documentation

`style` — Code Formatting

`refactor` — Code Restructuring

`test` — Tests

`perf` — Performance

`ci` — CI/CD Config

`build` — Build System

`revert` — Reverting a Commit

similar project with nodejs `ssspeedx`