Vibe Coded ⚡

A joyful collection of open-source tools and digital experiments, crafted with code for fun.

Vibe Coded is a static, zero-build-step showcase site for small browser tools, web components, and "stories" — all written in vanilla JavaScript, modern CSS, and semantic HTML. It is published at https://yikesable.github.io/vibe/ and lives in this repo as a collection of self-contained HTML pages that share a common design system.

The projects here are almost exclusively developed in collaboration with AI assistants, guided by Pelle Wessman. The AI handles the bulk of the boilerplate and implementation, which allows for rapid prototyping and exploration of ideas that would otherwise take too long to build from scratch. It's an experiment in understanding the tool — its strengths and its limits — not blindly adopting it.

---

✨ What's inside

The site is organized into a few sections, each a folder of standalone HTML pages:

Section	Folder	What it is
Component Explorations	component-explorations/	Deep dives into a single web component, e.g. <vp-pie-menu> — a radial context menu.
Tools & Utilities	codepen-converter/	Useful little browser tools, e.g. the CodePen Converter — split a single HTML file into its parts for CodePen, with a rich editor.
Reusable Components	components/	Drop-in Web Components shared across pages: <kinetic-background> and <code-block>.
Stories & Slides	stories/ · slides/	Long-form, narrative pages: JSDoc Type Safety, Beyond the Word List, and the Manifesto for Digital Liberation.

The entry point is index.html, a bento-box landing page that links out to each of the above.

---

🎨 Design system

The visual identity is a Y2K-inspired, dark-mode neon aesthetic, defined once in styles/vibe.css and reused across every page. That file also serves as an AI design brief — the single source of truth for the look and feel of any new page.

Core conventions:

• Tailwind CSS via the CDN play script (no build step).
• Google Fonts: Chakra Petch for headlines, Inter for body.
• Color: dark background (--dark-bg) with a vibrant --pop-pink accent and --glow-color for neon effects.
• Layout: .main-container for centering; Bento Box grid for content modules (.bento-item / .bento-item-static); .cta-button for actions.
• Components: every page uses <kinetic-background> for the floating particle background and <code-block> for any code snippets.
• Accessibility: prefers-reduced-motion is respected to disable animations.

---

🧩 Reusable components

Both are dependency-free Web Components that load their own dependencies from a CDN inside their module — no bundler required.

<kinetic-background>

A self-contained Web Component that renders a mouse-interactive particle background using Three.js (loaded from a CDN). It encapsulates all logic in a Shadow DOM, manages its own animation lifecycle, and honours the user's motion preferences. Drop the script in and add the tag:

<script type="module" src="./components/kinetic-background.js"></script>
<kinetic-background></kinetic-background>

<code-block>

A Web Component that renders a syntax-highlighted code block (via highlight.js) with a copy-to-clipboard button, re-indents the source, and styles itself within its Shadow DOM. Feed it a <pre> or a <script type="text/template">:

<script type="module" src="./components/code-block.js"></script>
<code-block language="javascript">
  <script type="text/template">
    const greeting = 'hello';
  </script>
</code-block>

⚠️ These components are marked EXPERIMENTAL — USE WITH CAUTION on the site.

---

🚀 Getting started

The site is entirely static. You can open any HTML file directly in a browser, or run the included dev server for live-reload:

npm install      # installs browser-sync and the dev tooling
npm run dev      # starts browser-sync and opens the site

Requirements: Node.js ≥ 22 (see engines in package.json).

There is no build, compile, or transpile step — the dev script just runs browser-sync. Everything ships as authored.

---

🛠️ Project conventions

This repo follows the HUG Principle — Humane, Usable, Guided — borrowed from the wider @voxpelli project conventions (documented in .github/copilot-instructions.md):

• Humane: prioritize accessibility, semantic HTML, and developer experience. Code is commented to explain why.
• Usable: prefer the platform — vanilla JS and modern CSS over frameworks. A few lines of clear, standard code beat a "magic" dependency.
• Guided: avoid dependencies that require a build step unless absolutely necessary; if one is added, explain the trade-off.

Supporting tooling:

• ESLint (eslint.config.js) via @voxpelli/eslint-config, configured for the browser environment.
• TypeScript (tsconfig.json) via @voxpelli/tsconfig (node20 base, with DOM libs), used only for type-checking the components/** — no emitted build.
• Knip (.knip.jsonc) for unused-code detection.
• Renovate (renovate.json) for dependency updates, extending github>voxpelli/renovate-config.

---

📄 License

MIT © Pelle Wessman