diff --git a/apps/typegpu-docs/src/components/ControlPanel.tsx b/apps/typegpu-docs/src/components/ControlPanel.tsx
index 63e6fd559c..c7b15a22a2 100644
--- a/apps/typegpu-docs/src/components/ControlPanel.tsx
+++ b/apps/typegpu-docs/src/components/ControlPanel.tsx
@@ -1,5 +1,7 @@
 import cs from 'classnames';
 import { useAtom, useAtomValue, useSetAtom } from 'jotai';
+import DiscordIconSvg from '../assets/discord-icon.svg';
+import GithubIconSvg from '../assets/github-icon.svg';
 import { useId, useState } from 'react';
 import { runWithCatchAtom } from '../utils/examples/currentSnackbarAtom.ts';
 import {
@@ -328,6 +330,18 @@ export function ControlPanel() {
           </div>
         </>
       )}
+
+      <div className="mt-auto hidden items-center justify-between pt-2 text-tameplum-800 text-xs md:flex">
+        <div>&copy; {new Date().getFullYear()} Software Mansion S.A.</div>
+        <div className="flex items-center gap-3">
+          <a href="https://discord.gg/8jpfgDqPcM" target="_blank" rel="noreferrer">
+            <img src={DiscordIconSvg.src} className="opacity-75" alt="discord logo" />
+          </a>
+          <a href="https://github.com/software-mansion/TypeGPU" target="_blank" rel="noreferrer">
+            <img src={GithubIconSvg.src} className="opacity-75" alt="github logo" />
+          </a>
+        </div>
+      </div>
     </div>
   );
 }
diff --git a/apps/typegpu-docs/src/components/ExampleCard.tsx b/apps/typegpu-docs/src/components/ExampleCard.tsx
index 8f79e1fda2..62ab723b5a 100644
--- a/apps/typegpu-docs/src/components/ExampleCard.tsx
+++ b/apps/typegpu-docs/src/components/ExampleCard.tsx
@@ -2,6 +2,8 @@ import type { Example } from '../utils/examples/types.ts';
 import { ExampleLink } from './ExampleLink.tsx';
 
 export function ExampleCard({ example }: { example: Example }) {
+  const isDev = example.metadata.dev;
+
   return (
     <ExampleLink exampleKey={example.key} key={example.key}>
       <div className="flex h-36 items-center justify-center overflow-hidden bg-gray-100">
@@ -20,22 +22,12 @@ export function ExampleCard({ example }: { example: Example }) {
           <span className="font-semibold text-gray-400 text-lg">No thumbnail</span>
         )}
       </div>
-      <div className="p-3">
-        <h3 className="mb-2 font-semibold text-black text-lg">{example.metadata.title}</h3>
-        {((example.metadata.tags && example.metadata.tags.length > 0) || example.metadata.dev) && (
-          <div className="flex flex-wrap gap-1">
-            {example.metadata.dev && (
-              <span className="rounded-full bg-rose-700 px-2 py-1 text-white text-xs">DEV</span>
-            )}
-            {(example.metadata.tags ?? []).map((tag: string) => (
-              <span
-                key={tag}
-                className="rounded-full bg-indigo-100 px-2 py-1 text-indigo-800 text-xs"
-              >
-                {tag}
-              </span>
-            ))}
-          </div>
+      <div className="flex items-center justify-center gap-2 p-3">
+        <h3 className="font-semibold text-black text-lg">{example.metadata.title}</h3>
+        {isDev && (
+          <span className="shrink-0 rounded-full bg-red-600 px-2 py-0.5 text-[10px] font-bold uppercase tracking-widest text-white">
+            dev
+          </span>
         )}
       </div>
     </ExampleLink>
diff --git a/apps/typegpu-docs/src/components/ExampleLayout.tsx b/apps/typegpu-docs/src/components/ExampleLayout.tsx
index adf7228584..926afe2cf4 100644
--- a/apps/typegpu-docs/src/components/ExampleLayout.tsx
+++ b/apps/typegpu-docs/src/components/ExampleLayout.tsx
@@ -2,12 +2,11 @@ import { useSetAtom } from 'jotai';
 import type { ReactNode } from 'react';
 import { useId, useRef } from 'react';
 import CrossSvg from '../assets/cross.svg';
-import DiscordIconSvg from '../assets/discord-icon.svg';
-import GithubIconSvg from '../assets/github-icon.svg';
 import HamburgerSvg from '../assets/hamburger.svg';
 import {
   codeEditorShownAtom,
   experimentalExamplesShownAtom,
+  groupExamplesByCategoryAtom,
   menuShownAtom,
 } from '../utils/examples/exampleViewStateAtoms.ts';
 import { SearchableExampleList } from './SearchableExampleList.tsx';
@@ -52,14 +51,16 @@ function SideMenu() {
     experimentalExamplesShownAtom,
     true,
   );
+  const [groupByCategory, setGroupByCategory] = useHydratedAtom(groupExamplesByCategoryAtom, false);
   const scrollRef = useRef<HTMLDivElement>(null);
   const experimentalExamplesToggleId = useId();
+  const groupByCategoryToggleId = useId();
 
   return (
     <aside className="absolute inset-0 z-50 box-border flex w-full flex-col bg-white md:static md:w-75 md:rounded-2xl">
-      <header className="p-5">
+      <header className="px-5 py-3">
         <div className="grid place-items-center">
-          <a href="/TypeGPU" className="box-border grid h-20 cursor-pointer place-content-center">
+          <a href="/TypeGPU" className="box-border grid h-12 cursor-pointer place-content-center">
             <img className="w-40" src="/TypeGPU/typegpu-logo-light.svg" alt="TypeGPU Logo" />
           </a>
         </div>
@@ -74,22 +75,9 @@ function SideMenu() {
         <hr className="my-0 box-border w-full border-tameplum-100 border-t" />
       </div>
 
-      <div className="my-5 min-h-0 flex-1 overflow-y-auto px-5" ref={scrollRef}>
-        <section className="mb-5 space-y-2 border-tameplum-100 border-b pb-5">
-          <h1 className="font-medium text-lg">Welcome to examples page</h1>
-          <p className="text-sm">
-            Test out the power of our TypeScript library and get to know TypeGPU.
-          </p>
-          <a
-            href="/TypeGPU/why-typegpu"
-            className="bg-gradient-to-r from-gradient-purple-dark to-gradient-blue-dark bg-clip-text text-sm text-transparent underline"
-          >
-            Learn more about TypeGPU here
-          </a>
-        </section>
-
+      <div className="my-3 min-h-0 flex-1 overflow-y-auto px-5" ref={scrollRef}>
         <SearchableExampleList
-          excludeTags={experimentalShowing ? [] : ['experimental']}
+          excludeApis={experimentalShowing ? [] : ['~unstable']}
           scrollContainerRef={scrollRef}
         />
       </div>
@@ -98,28 +86,30 @@ function SideMenu() {
         <hr className="my-0 box-border w-full border-tameplum-100 border-t" />
       </div>
 
-      <label
-        htmlFor={experimentalExamplesToggleId}
-        className="flex cursor-pointer items-center justify-between gap-3 p-5 text-sm"
-      >
-        <span>Experimental examples</span>
-        <Toggle
-          id={experimentalExamplesToggleId}
-          checked={experimentalShowing}
-          onChange={(e) => setExperimentalShowing(e.target.checked)}
-        />
-      </label>
-
-      <div className="flex justify-between px-5 pb-5 text-tameplum-800 text-xs">
-        <div>&copy; {new Date().getFullYear()} Software Mansion S.A.</div>
-        <div className="flex items-center gap-3">
-          <a href="https://discord.gg/8jpfgDqPcM" target="_blank" rel="noreferrer">
-            <img src={DiscordIconSvg.src} className="opacity-75" alt="github logo" />
-          </a>
-          <a href="https://github.com/software-mansion/TypeGPU" target="_blank" rel="noreferrer">
-            <img src={GithubIconSvg.src} className="opacity-75" alt="discord logo" />
-          </a>
-        </div>
+      <div className="flex items-center gap-2 px-5 py-3 text-xs text-gray-600">
+        <label
+          htmlFor={experimentalExamplesToggleId}
+          className="flex flex-1 cursor-pointer items-center justify-between gap-2"
+        >
+          <span className="whitespace-nowrap">Experimental</span>
+          <Toggle
+            id={experimentalExamplesToggleId}
+            checked={experimentalShowing}
+            onChange={(e) => setExperimentalShowing(e.target.checked)}
+          />
+        </label>
+        <div className="h-4 w-px shrink-0 bg-tameplum-100" />
+        <label
+          htmlFor={groupByCategoryToggleId}
+          className="flex flex-1 cursor-pointer items-center justify-between gap-2"
+        >
+          <span className="whitespace-nowrap">Grouped</span>
+          <Toggle
+            id={groupByCategoryToggleId}
+            checked={groupByCategory}
+            onChange={(e) => setGroupByCategory(e.target.checked)}
+          />
+        </label>
       </div>
     </aside>
   );
diff --git a/apps/typegpu-docs/src/components/ExampleView.tsx b/apps/typegpu-docs/src/components/ExampleView.tsx
index 0f7db4f4e4..b2932f6130 100644
--- a/apps/typegpu-docs/src/components/ExampleView.tsx
+++ b/apps/typegpu-docs/src/components/ExampleView.tsx
@@ -118,20 +118,20 @@ export function ExampleView({ example, common }: Props) {
           )}
 
           {codeEditorShown && (
-            <div className="absolute z-20 h-[calc(100%-2rem)] w-[calc(100%-2rem)] bg-tameplum-50 md:relative md:h-full md:w-full">
+            <div className="absolute z-20 h-[calc(100%-2rem)] w-[calc(100%-2rem)] overflow-hidden rounded-tl-xl bg-tameplum-50 md:relative md:h-full md:w-full">
               <div className="absolute inset-0 flex flex-col justify-between">
                 <div className="h-12 pt-16 md:pt-0">
-                  <div className="flex h-full overflow-x-auto border-gray-300">
+                  <div className="flex h-full gap-1 overflow-x-auto border-b border-tameplum-100 px-1">
                     {editorTabsList.map((fileName) => (
                       <button
                         key={fileName}
                         type="button"
                         onClick={() => setCurrentFilePath(fileName)}
                         className={cs(
-                          'text-nowrap rounded-t-lg rounded-b-none px-4 text-sm',
+                          'shrink-0 -mb-px h-full rounded-t-lg border-b-2 px-4 text-sm font-medium transition-colors',
                           currentFilePath === fileName
-                            ? 'bg-gradient-to-br from-gradient-purple to-gradient-blue text-white hover:from-gradient-purple-dark hover:to-gradient-blue-dark'
-                            : 'border-2 border-tameplum-100 bg-white hover:bg-tameplum-20',
+                            ? 'border-purple-500 bg-white text-purple-700 shadow-sm'
+                            : 'border-transparent bg-tameplum-100 text-tameplum-600 hover:border-tameplum-300 hover:bg-tameplum-200 hover:text-tameplum-900',
                         )}
                       >
                         {fileName}
diff --git a/apps/typegpu-docs/src/components/SearchableExampleList.tsx b/apps/typegpu-docs/src/components/SearchableExampleList.tsx
index 26ae6eddde..a0d97d9eeb 100644
--- a/apps/typegpu-docs/src/components/SearchableExampleList.tsx
+++ b/apps/typegpu-docs/src/components/SearchableExampleList.tsx
@@ -1,7 +1,9 @@
 import Fuse from 'fuse.js';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { examples } from '../examples/exampleContent.ts';
+import { groupExamplesByCategoryAtom } from '../utils/examples/exampleViewStateAtoms.ts';
 import { type Example, exampleCategories } from '../utils/examples/types.ts';
+import { useHydratedAtom } from '../utils/useHydrated.ts';
 import { ExampleCard } from './ExampleCard.tsx';
 
 function ExamplesGrid({ examples }: { examples: Example[] }) {
@@ -17,46 +19,92 @@ function ExamplesGrid({ examples }: { examples: Example[] }) {
 const DEV = process.env.NODE_ENV === 'development';
 const TEST = process.env.NODE_ENV === 'test';
 
+const HIDDEN_API_IDS = new Set(['~unstable']);
+
 export function SearchableExampleList({
-  excludeTags = [],
+  excludeApis = [],
   scrollContainerRef,
 }: {
-  excludeTags?: string[];
+  excludeApis?: string[];
   scrollContainerRef?: React.RefObject<HTMLDivElement | null>;
 }) {
   const [query, setQuery] = useState('');
+  const [groupByCategory] = useHydratedAtom(groupExamplesByCategoryAtom, false);
+  const [selectedTags, setSelectedTags] = useState<string[]>([]);
+  const [selectedApis, setSelectedApis] = useState<string[]>([]);
+  const [filterOpen, setFilterOpen] = useState(false);
 
   const allExamples = useMemo(
     () =>
       Object.values(examples).filter(
         (ex) =>
-          !ex.metadata.tags?.some((tag) => excludeTags.includes(tag)) &&
+          !ex.usedApis.some((api) => excludeApis.includes(api)) &&
           (DEV || TEST || !ex.metadata.dev),
       ),
-    [excludeTags],
+    [excludeApis],
+  );
+
+  const availableTags = useMemo(
+    () =>
+      Array.from(new Set(allExamples.flatMap((ex) => ex.metadata.tags ?? []))).sort((a, b) =>
+        a.localeCompare(b),
+      ),
+    [allExamples],
+  );
+
+  const availableApis = useMemo(
+    () =>
+      Array.from(
+        new Set(allExamples.flatMap((ex) => ex.usedApis.filter((id) => !HIDDEN_API_IDS.has(id)))),
+      ).sort((a, b) => a.localeCompare(b)),
+    [allExamples],
+  );
+
+  const tagFilteredExamples = useMemo(
+    () =>
+      allExamples.filter(
+        (ex) =>
+          (selectedTags.length === 0 ||
+            (ex.metadata.tags ?? []).some((tag) => selectedTags.includes(tag))) &&
+          (selectedApis.length === 0 || ex.usedApis.some((api) => selectedApis.includes(api))),
+      ),
+    [allExamples, selectedTags, selectedApis],
   );
 
   const fuse = useMemo(
     () =>
-      new Fuse(allExamples, {
+      new Fuse(tagFilteredExamples, {
         keys: [
           { name: 'metadata.title', weight: 0.7 },
-          { name: 'metadata.tags', weight: 0.3 },
+          { name: 'metadata.tags', weight: 0.2 },
+          { name: 'usedApis', weight: 0.2 },
           { name: 'metadata.category', weight: 0.1 },
         ],
         threshold: 0.4,
       }),
-    [allExamples],
+    [tagFilteredExamples],
   );
 
   const filteredExamples = useMemo(() => {
     const trimmedQuery = query.trim();
-    return trimmedQuery ? fuse.search(trimmedQuery).map((r) => r.item) : allExamples;
-  }, [query, fuse, allExamples]);
+    return trimmedQuery ? fuse.search(trimmedQuery).map((r) => r.item) : tagFilteredExamples;
+  }, [query, fuse, tagFilteredExamples]);
+
+  const sortedExamples = useMemo(
+    () =>
+      [...filteredExamples].toSorted((a, b) => {
+        const coolDiff = b.metadata.coolFactor - a.metadata.coolFactor;
+        if (coolDiff !== 0) {
+          return coolDiff;
+        }
+        return a.metadata.title.localeCompare(b.metadata.title);
+      }),
+    [filteredExamples],
+  );
 
   const examplesByCategories = useMemo(
     () =>
-      filteredExamples.reduce(
+      sortedExamples.reduce(
         (groups, example) => {
           const category = example.metadata.category;
           if (!groups[category]) {
@@ -67,7 +115,7 @@ export function SearchableExampleList({
         },
         {} as Record<string, Example[]>,
       ),
-    [filteredExamples],
+    [sortedExamples],
   );
 
   const categoriesToShow = useMemo(
@@ -79,6 +127,8 @@ export function SearchableExampleList({
   );
 
   const inputRef = useRef<HTMLInputElement>(null);
+  const filterContainerRef = useRef<HTMLDivElement>(null);
+
   useEffect(() => {
     const listener = (e: KeyboardEvent) => {
       if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
@@ -91,6 +141,19 @@ export function SearchableExampleList({
     return () => window.removeEventListener('keydown', listener);
   }, []);
 
+  useEffect(() => {
+    if (!filterOpen) {
+      return;
+    }
+    const listener = (e: MouseEvent) => {
+      if (filterContainerRef.current && !filterContainerRef.current.contains(e.target as Node)) {
+        setFilterOpen(false);
+      }
+    };
+    document.addEventListener('mousedown', listener);
+    return () => document.removeEventListener('mousedown', listener);
+  }, [filterOpen]);
+
   return (
     <div className="flex w-full flex-col">
       <div
@@ -99,19 +162,150 @@ export function SearchableExampleList({
           background: 'linear-gradient(to bottom, white 60%, transparent 100%)',
         }}
       >
-        <input
-          ref={inputRef}
-          type="text"
-          placeholder="Search examples by name or tag..."
-          value={query}
-          onChange={(e) => {
-            if (scrollContainerRef?.current) {
-              scrollContainerRef.current.scrollTop = 0;
-            }
-            setQuery(e.target.value);
-          }}
-          className="box-border w-full rounded-full border border-purple-200 px-4 py-2 focus:outline-none focus:ring-2 focus:ring-purple-400 focus:ring-inset"
-        />
+        <div className="relative" ref={filterContainerRef}>
+          <div className="flex gap-2">
+            <input
+              ref={inputRef}
+              type="text"
+              placeholder="Search examples..."
+              value={query}
+              onChange={(e) => {
+                if (scrollContainerRef?.current) {
+                  scrollContainerRef.current.scrollTop = 0;
+                }
+                setQuery(e.target.value);
+              }}
+              className="box-border min-w-0 flex-1 rounded-full border border-purple-200 px-4 py-2 focus:outline-none focus:ring-2 focus:ring-purple-400 focus:ring-inset"
+            />
+            {(availableTags.length > 0 || availableApis.length > 0) && (
+              <button
+                type="button"
+                onClick={() => setFilterOpen((prev) => !prev)}
+                className={`flex shrink-0 items-center gap-1.5 rounded-full border px-3 py-2 text-xs font-medium transition ${
+                  filterOpen || selectedTags.length > 0 || selectedApis.length > 0
+                    ? 'border-purple-300 bg-purple-50 text-purple-700'
+                    : 'border-purple-200 text-gray-500 hover:bg-purple-50 hover:text-purple-700'
+                }`}
+              >
+                <span>Filter</span>
+                {(selectedTags.length > 0 || selectedApis.length > 0) && (
+                  <span className="rounded-full bg-gradient-to-r from-gradient-purple-dark to-gradient-blue-dark px-1.5 py-px text-white text-[10px] leading-none">
+                    {selectedTags.length + selectedApis.length}
+                  </span>
+                )}
+                <svg
+                  className={`h-3 w-3 transition-transform duration-150 ${filterOpen ? 'rotate-180' : ''}`}
+                  viewBox="0 0 12 12"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                >
+                  <path d="M2 4l4 4 4-4" />
+                </svg>
+              </button>
+            )}
+          </div>
+          {(availableTags.length > 0 || availableApis.length > 0) && filterOpen && (
+            <div
+              className="absolute left-0 right-0 top-full z-30 mt-1 overflow-y-auto rounded-2xl border border-purple-100 bg-white p-3 shadow-lg"
+              style={{ maxHeight: '60vh' }}
+            >
+              {availableTags.length > 0 && (
+                <>
+                  <div className="mb-1.5 flex items-center justify-between">
+                    <p className="px-0.5 text-[10px] font-semibold uppercase tracking-wide text-tameplum-400">
+                      Tags
+                    </p>
+                    <button
+                      type="button"
+                      onClick={() => {
+                        setSelectedTags([]);
+                        setSelectedApis([]);
+                      }}
+                      disabled={selectedTags.length === 0 && selectedApis.length === 0}
+                      className={`flex items-center gap-1 rounded-full border border-tameplum-200 px-2 py-0.5 text-[10px] text-tameplum-600 transition-colors hover:border-tameplum-300 hover:bg-tameplum-50 ${selectedTags.length === 0 && selectedApis.length === 0 ? 'invisible' : ''}`}
+                    >
+                      <svg
+                        className="h-2.5 w-2.5"
+                        viewBox="0 0 12 12"
+                        fill="none"
+                        stroke="currentColor"
+                        strokeWidth="2"
+                        strokeLinecap="round"
+                      >
+                        <path d="M2 2l8 8M10 2l-8 8" />
+                      </svg>
+                      Clear all
+                    </button>
+                  </div>
+                  <div className="flex flex-wrap gap-x-1.5 gap-y-1.5">
+                    {availableTags.map((tag) => {
+                      const isSelected = selectedTags.includes(tag);
+                      return (
+                        <button
+                          key={tag}
+                          type="button"
+                          onClick={() => {
+                            if (scrollContainerRef?.current) {
+                              scrollContainerRef.current.scrollTop = 0;
+                            }
+                            setSelectedTags((prev) =>
+                              prev.includes(tag) ? prev.filter((t) => t !== tag) : [...prev, tag],
+                            );
+                          }}
+                          className={
+                            isSelected
+                              ? 'rounded-full bg-gradient-to-r from-gradient-purple-dark to-gradient-blue-dark px-2.5 py-0.5 text-[11px] font-medium whitespace-nowrap text-white transition-opacity hover:opacity-90'
+                              : 'rounded-full bg-tameplum-50 px-2.5 py-0.5 text-[11px] font-medium whitespace-nowrap text-tameplum-700 transition-colors hover:bg-tameplum-100'
+                          }
+                        >
+                          {tag}
+                        </button>
+                      );
+                    })}
+                  </div>
+                </>
+              )}
+              {availableApis.length > 0 && (
+                <>
+                  <p
+                    className={`mb-1.5 px-0.5 text-[10px] font-semibold uppercase tracking-wide text-tameplum-400 ${availableTags.length > 0 ? 'mt-3' : ''}`}
+                  >
+                    APIs
+                  </p>
+                  <div className="flex flex-wrap gap-x-1.5 gap-y-1.5">
+                    {availableApis.map((api) => {
+                      const isSelected = selectedApis.includes(api);
+                      return (
+                        <button
+                          key={api}
+                          type="button"
+                          onClick={() => {
+                            if (scrollContainerRef?.current) {
+                              scrollContainerRef.current.scrollTop = 0;
+                            }
+                            setSelectedApis((prev) =>
+                              prev.includes(api) ? prev.filter((a) => a !== api) : [...prev, api],
+                            );
+                          }}
+                          className={
+                            isSelected
+                              ? 'rounded-full bg-gradient-to-r from-gradient-purple-dark to-gradient-blue-dark px-2.5 py-0.5 text-[11px] font-medium whitespace-nowrap text-white transition-opacity hover:opacity-90'
+                              : 'rounded-full bg-tameplum-50 px-2.5 py-0.5 text-[11px] font-medium whitespace-nowrap text-tameplum-700 transition-colors hover:bg-tameplum-100'
+                          }
+                        >
+                          {api}
+                        </button>
+                      );
+                    })}
+                  </div>
+                </>
+              )}
+            </div>
+          )}
+        </div>
       </div>
       <div className="flex flex-1 flex-col gap-10">
         {query.trim() ? (
@@ -122,7 +316,7 @@ export function SearchableExampleList({
           ) : (
             <div className="text-center text-gray-500">No examples match your search.</div>
           )
-        ) : (
+        ) : groupByCategory ? (
           categoriesToShow.map((category) => (
             <div key={category.key} className="flex flex-col">
               <div
@@ -138,6 +332,10 @@ export function SearchableExampleList({
               <ExamplesGrid examples={examplesByCategories[category.key] || []} />
             </div>
           ))
+        ) : (
+          <div className="flex flex-col gap-5">
+            <ExamplesGrid examples={sortedExamples} />
+          </div>
         )}
       </div>
     </div>
diff --git a/apps/typegpu-docs/src/components/design/ColorPicker.tsx b/apps/typegpu-docs/src/components/design/ColorPicker.tsx
index 50a404e03b..91c244b38b 100644
--- a/apps/typegpu-docs/src/components/design/ColorPicker.tsx
+++ b/apps/typegpu-docs/src/components/design/ColorPicker.tsx
@@ -27,11 +27,16 @@ type Props = {
 
 export function ColorPicker({ value, onChange }: Props) {
   return (
-    <input
-      value={rgbToHex(value)}
-      className="h-10 w-full rounded bg-tameplum-50 p-1"
-      type="color"
-      onChange={(e) => onChange(hexToRgb(e.target.value))}
-    />
+    <div
+      className="relative h-10 w-full cursor-pointer overflow-hidden rounded-full"
+      style={{ backgroundColor: rgbToHex(value) }}
+    >
+      <input
+        value={rgbToHex(value)}
+        className="absolute inset-0 h-full w-full cursor-pointer opacity-0"
+        type="color"
+        onChange={(e) => onChange(hexToRgb(e.target.value))}
+      />
+    </div>
   );
 }
diff --git a/apps/typegpu-docs/src/components/design/Select.tsx b/apps/typegpu-docs/src/components/design/Select.tsx
index 9509f4496b..516e0b314b 100644
--- a/apps/typegpu-docs/src/components/design/Select.tsx
+++ b/apps/typegpu-docs/src/components/design/Select.tsx
@@ -11,14 +11,14 @@ export function Select({
 }) {
   return (
     <RadixSelect.Root value={value} onValueChange={onChange}>
-      <RadixSelect.Trigger className="flex h-10 w-full items-center justify-between rounded border border-tameplum-100 bg-tameplum-50 px-3 text-sm hover:border-tameplum-600">
+      <RadixSelect.Trigger className="flex h-10 w-full items-center justify-between rounded-full border border-tameplum-100 bg-tameplum-50 px-3 text-sm hover:border-tameplum-600">
         <RadixSelect.Value>{value}</RadixSelect.Value>
         <RadixSelect.Icon />
       </RadixSelect.Trigger>
 
       <RadixSelect.Portal>
         <RadixSelect.Content position="popper" className="-top-4 relative min-w-30">
-          <RadixSelect.Viewport className="max-h-[50vh] rounded bg-tameplum-50">
+          <RadixSelect.Viewport className="max-h-[50vh] rounded-xl bg-tameplum-50">
             {options.map((option) => (
               <RadixSelect.Item
                 key={option}
diff --git a/apps/typegpu-docs/src/components/design/Slider.tsx b/apps/typegpu-docs/src/components/design/Slider.tsx
index fc65d77547..8ffa621458 100644
--- a/apps/typegpu-docs/src/components/design/Slider.tsx
+++ b/apps/typegpu-docs/src/components/design/Slider.tsx
@@ -18,7 +18,7 @@ export function Slider({ min, max, step, value, onChange }: Props) {
       onValueChange={(value) => {
         onChange(value[0]);
       }}
-      className="relative flex h-10 touch-none overflow-hidden rounded bg-grayscale-20"
+      className="relative flex h-10 touch-none overflow-hidden rounded-full bg-grayscale-20"
     >
       <RadixSlider.Track className="h-full flex-1 bg-tameplum-50">
         <RadixSlider.Range className="absolute h-full bg-gradient-to-br from-gradient-purple to-gradient-blue" />
diff --git a/apps/typegpu-docs/src/components/design/VectorSlider.tsx b/apps/typegpu-docs/src/components/design/VectorSlider.tsx
index 2bfea425d9..f968c815ca 100644
--- a/apps/typegpu-docs/src/components/design/VectorSlider.tsx
+++ b/apps/typegpu-docs/src/components/design/VectorSlider.tsx
@@ -21,7 +21,7 @@ export function VectorSlider({ min, max, step, value, onChange }: Props) {
         max={max[index]}
         step={step[index]}
         onValueChange={(values) => handleComponentChange(index, values[0])}
-        className="relative flex h-10 flex-1 touch-none overflow-hidden rounded bg-grayscale-20"
+        className="relative flex h-10 flex-1 touch-none overflow-hidden rounded-full bg-grayscale-20"
       >
         <RadixSlider.Track className="h-full flex-1">
           <RadixSlider.Range className="absolute h-full bg-gradient-to-br from-gradient-purple to-gradient-blue" />
diff --git a/apps/typegpu-docs/src/examples/algorithms/concurrent-chart/meta.json b/apps/typegpu-docs/src/examples/algorithms/concurrent-chart/meta.json
index 3c04b50965..eb745e2c29 100644
--- a/apps/typegpu-docs/src/examples/algorithms/concurrent-chart/meta.json
+++ b/apps/typegpu-docs/src/examples/algorithms/concurrent-chart/meta.json
@@ -1,6 +1,7 @@
 {
   "title": "Concurrent Chart",
   "category": "algorithms",
-  "tags": ["compute", "concurrent", "timestamp query"],
-  "dev": true
+  "tags": ["concurrent"],
+  "dev": true,
+  "coolFactor": 4
 }
diff --git a/apps/typegpu-docs/src/examples/algorithms/jump-flood-distance/meta.json b/apps/typegpu-docs/src/examples/algorithms/jump-flood-distance/meta.json
index ee41f7e16a..e51f9e00b0 100644
--- a/apps/typegpu-docs/src/examples/algorithms/jump-flood-distance/meta.json
+++ b/apps/typegpu-docs/src/examples/algorithms/jump-flood-distance/meta.json
@@ -1,5 +1,6 @@
 {
   "title": "Jump Flood (Distance)",
   "category": "algorithms",
-  "tags": ["experimental", "compute"]
+  "tags": ["interaction", "sdf", "spatial"],
+  "coolFactor": 7
 }
diff --git a/apps/typegpu-docs/src/examples/algorithms/jump-flood-voronoi/meta.json b/apps/typegpu-docs/src/examples/algorithms/jump-flood-voronoi/meta.json
index 6d5486ffde..1aef517080 100644
--- a/apps/typegpu-docs/src/examples/algorithms/jump-flood-voronoi/meta.json
+++ b/apps/typegpu-docs/src/examples/algorithms/jump-flood-voronoi/meta.json
@@ -1,5 +1,6 @@
 {
   "title": "Jump Flood (Voronoi)",
   "category": "algorithms",
-  "tags": ["experimental", "compute"]
+  "tags": ["ecosystem", "spatial"],
+  "coolFactor": 7
 }
diff --git a/apps/typegpu-docs/src/examples/algorithms/matrix-multiplication/meta.json b/apps/typegpu-docs/src/examples/algorithms/matrix-multiplication/meta.json
index aaad25660a..83b551f187 100644
--- a/apps/typegpu-docs/src/examples/algorithms/matrix-multiplication/meta.json
+++ b/apps/typegpu-docs/src/examples/algorithms/matrix-multiplication/meta.json
@@ -1,5 +1,6 @@
 {
   "title": "Matrix Multiplication",
   "category": "algorithms",
-  "tags": ["compute"]
+  "tags": ["linear algebra"],
+  "coolFactor": 4
 }
diff --git a/apps/typegpu-docs/src/examples/algorithms/matrix-next/meta.json b/apps/typegpu-docs/src/examples/algorithms/matrix-next/meta.json
index 45e4af752f..917f757c87 100644
--- a/apps/typegpu-docs/src/examples/algorithms/matrix-next/meta.json
+++ b/apps/typegpu-docs/src/examples/algorithms/matrix-next/meta.json
@@ -1,5 +1,6 @@
 {
   "title": "Matrix Multiplication (next)",
   "category": "algorithms",
-  "tags": ["compute", "timestamp query"]
+  "tags": ["linear algebra"],
+  "coolFactor": 5
 }
diff --git a/apps/typegpu-docs/src/examples/algorithms/mnist-inference/meta.json b/apps/typegpu-docs/src/examples/algorithms/mnist-inference/meta.json
index da25cb7949..37da8d9315 100644
--- a/apps/typegpu-docs/src/examples/algorithms/mnist-inference/meta.json
+++ b/apps/typegpu-docs/src/examples/algorithms/mnist-inference/meta.json
@@ -1,5 +1,6 @@
 {
   "title": "MNIST Inference",
   "category": "algorithms",
-  "tags": ["ai", "compute", "inference", "timestamp query", "subgroups"]
+  "tags": ["ai", "inference", "interaction", "machine learning"],
+  "coolFactor": 7
 }
diff --git a/apps/typegpu-docs/src/examples/algorithms/probability/meta.json b/apps/typegpu-docs/src/examples/algorithms/probability/meta.json
index e50db4beda..8daef415a6 100644
--- a/apps/typegpu-docs/src/examples/algorithms/probability/meta.json
+++ b/apps/typegpu-docs/src/examples/algorithms/probability/meta.json
@@ -1,5 +1,6 @@
 {
   "title": "Probability Distribution Plot",
   "category": "algorithms",
-  "tags": ["ecosystem", "@typegpu/noise"]
+  "tags": ["ecosystem", "statistics"],
+  "coolFactor": 6
 }
diff --git a/apps/typegpu-docs/src/examples/exampleContent.ts b/apps/typegpu-docs/src/examples/exampleContent.ts
index 6eea68d045..bfbe74095d 100644
--- a/apps/typegpu-docs/src/examples/exampleContent.ts
+++ b/apps/typegpu-docs/src/examples/exampleContent.ts
@@ -67,8 +67,8 @@ const exampleTsnotoverFiles = import.meta.glob('./*/*/*.tsnotover.ts', {
 }) as Record<string, string>;
 
 const exampleTsFiles = R.pipe(
-  // './<category>/<example>/<file>.ts'
-  import.meta.glob('./*/*/*.ts', {
+  // './<category>/<example>/[<subdir>/]<file>.ts'
+  import.meta.glob('./*/**/*.ts', {
     query: 'raw',
     eager: true,
     import: 'default',
@@ -125,6 +125,40 @@ const thumbnailFiles = R.pipe(
   }),
 );
 
+const API_RULES: { id: string; pattern: RegExp }[] = [
+  { id: 'compute', pattern: /\.(computeFn|createComputePipeline|createGuardedComputePipeline)/ },
+  { id: 'textures', pattern: /d\.texture/ },
+  { id: 'storage textures', pattern: /d\.textureStorage|storageTexture:/ },
+  { id: 'samplers', pattern: /createSampler|d\.sampler/ },
+  { id: 'atomics', pattern: /d\.atomic/ },
+  { id: 'vertex layouts', pattern: /tgpu\.vertexLayout/ },
+  { id: 'bind group layouts', pattern: /tgpu\.bindGroupLayout/ },
+  { id: 'storage buffers', pattern: /\$usage\([\s\S]*?'storage'/ },
+  { id: 'index buffers', pattern: /withIndexBuffer|setIndexBuffer|\$usage\('index'/ },
+  {
+    id: 'instancing',
+    pattern: /instanceCount|drawInstanced|builtin\.instanceIndex|vertexLayout[^\n]*'instance'/,
+  },
+  { id: 'bindless buffers', pattern: /\.createUniform|\.createReadonly|\.createMutable/ },
+  { id: 'subgroups', pattern: /subgroups/ },
+  { id: 'timestamp query', pattern: /timestamp-query/ },
+  { id: 'external texture', pattern: /importExternalTexture|externalTexture/ },
+  { id: 'stencil', pattern: /stencilFront|stencilBack/ },
+  { id: 'unwrap', pattern: /\.unwrap\(/ },
+  { id: 'raw shaders', pattern: /rawCodeSnippet/ },
+  { id: 'three.js', pattern: /from ['"]three['"/]/ },
+  { id: '~unstable', pattern: /\['~unstable'\]/ },
+  { id: '@typegpu/noise', pattern: /@typegpu\/noise/ },
+  { id: '@typegpu/sdf', pattern: /@typegpu\/sdf/ },
+  { id: '@typegpu/color', pattern: /@typegpu\/color/ },
+  { id: 'wgpu-matrix', pattern: /wgpu-matrix/ },
+];
+
+function detectUsedApis(tsFiles: ExampleSrcFile[]): string[] {
+  const allContent = tsFiles.map((f) => f.content).join('\n');
+  return API_RULES.filter((r) => r.pattern.test(allContent)).map((r) => r.id);
+}
+
 export const examples = R.pipe(
   metaFiles,
   R.mapValues(
@@ -136,6 +170,7 @@ export const examples = R.pipe(
         tsImport: () => noCacheImport(tsFilesImportFunctions[key]),
         htmlFile: htmlFiles[key]?.[0] ?? '',
         thumbnails: thumbnailFiles[key],
+        usedApis: detectUsedApis(exampleTsFiles[key] ?? []),
       }) satisfies Example,
   ),
 );
diff --git a/apps/typegpu-docs/src/examples/geometry/circles/meta.json b/apps/typegpu-docs/src/examples/geometry/circles/meta.json
index 507c1c248e..1faeb742e1 100644
--- a/apps/typegpu-docs/src/examples/geometry/circles/meta.json
+++ b/apps/typegpu-docs/src/examples/geometry/circles/meta.json
@@ -1,6 +1,7 @@
 {
   "title": "Circles",
   "category": "geometry",
-  "tags": ["experimental"],
-  "dev": true
+  "tags": ["ecosystem", "primitives"],
+  "dev": true,
+  "coolFactor": 5
 }
diff --git a/apps/typegpu-docs/src/examples/geometry/lines-combinations/meta.json b/apps/typegpu-docs/src/examples/geometry/lines-combinations/meta.json
index 89ed3e6675..a350c08ae3 100644
--- a/apps/typegpu-docs/src/examples/geometry/lines-combinations/meta.json
+++ b/apps/typegpu-docs/src/examples/geometry/lines-combinations/meta.json
@@ -1,6 +1,7 @@
 {
   "title": "Lines Combinations",
   "category": "geometry",
-  "tags": ["experimental"],
-  "dev": true
+  "tags": ["ecosystem", "line-rendering"],
+  "dev": true,
+  "coolFactor": 6
 }
diff --git a/apps/typegpu-docs/src/examples/image-processing/ascii-filter/meta.json b/apps/typegpu-docs/src/examples/image-processing/ascii-filter/meta.json
index db79417316..7b940800b7 100644
--- a/apps/typegpu-docs/src/examples/image-processing/ascii-filter/meta.json
+++ b/apps/typegpu-docs/src/examples/image-processing/ascii-filter/meta.json
@@ -1,5 +1,6 @@
 {
   "title": "ASCII filter",
   "category": "image-processing",
-  "tags": ["experimental", "camera", "filtering", "external texture"]
+  "tags": ["camera", "filtering"],
+  "coolFactor": 8
 }
diff --git a/apps/typegpu-docs/src/examples/image-processing/background-segmentation/meta.json b/apps/typegpu-docs/src/examples/image-processing/background-segmentation/meta.json
index 6b6f4fa2f7..52de690526 100644
--- a/apps/typegpu-docs/src/examples/image-processing/background-segmentation/meta.json
+++ b/apps/typegpu-docs/src/examples/image-processing/background-segmentation/meta.json
@@ -1,5 +1,6 @@
 {
   "title": "Background Segmentation",
   "category": "image-processing",
-  "tags": ["experimental", "camera", "onnx"]
+  "tags": ["ai", "camera", "inference", "machine learning", "onnx", "segmentation"],
+  "coolFactor": 6
 }
diff --git a/apps/typegpu-docs/src/examples/image-processing/blur/meta.json b/apps/typegpu-docs/src/examples/image-processing/blur/meta.json
index 7930ad9a86..7946c85baf 100644
--- a/apps/typegpu-docs/src/examples/image-processing/blur/meta.json
+++ b/apps/typegpu-docs/src/examples/image-processing/blur/meta.json
@@ -1,5 +1,6 @@
 {
   "title": "Image Blur",
   "category": "image-processing",
-  "tags": ["experimental", "compute", "filtering"]
+  "tags": ["filtering"],
+  "coolFactor": 5
 }
diff --git a/apps/typegpu-docs/src/examples/image-processing/camera-thresholding/meta.json b/apps/typegpu-docs/src/examples/image-processing/camera-thresholding/meta.json
index fd4c96b251..c8d25c8006 100644
--- a/apps/typegpu-docs/src/examples/image-processing/camera-thresholding/meta.json
+++ b/apps/typegpu-docs/src/examples/image-processing/camera-thresholding/meta.json
@@ -1,5 +1,6 @@
 {
   "title": "Camera Thresholding",
   "category": "image-processing",
-  "tags": ["experimental", "camera", "filtering", "external texture"]
+  "tags": ["camera", "color", "ecosystem", "filtering", "segmentation"],
+  "coolFactor": 4
 }
diff --git a/apps/typegpu-docs/src/examples/image-processing/chroma-keying/meta.json b/apps/typegpu-docs/src/examples/image-processing/chroma-keying/meta.json
index 7bbaa507ce..3cc210ac52 100644
--- a/apps/typegpu-docs/src/examples/image-processing/chroma-keying/meta.json
+++ b/apps/typegpu-docs/src/examples/image-processing/chroma-keying/meta.json
@@ -1,5 +1,6 @@
 {
   "title": "Chroma Keying",
   "category": "image-processing",
-  "tags": ["camera", "filtering"]
+  "tags": ["camera", "color", "ecosystem", "filtering", "segmentation"],
+  "coolFactor": 5
 }
diff --git a/apps/typegpu-docs/src/examples/image-processing/image-tuning/meta.json b/apps/typegpu-docs/src/examples/image-processing/image-tuning/meta.json
index b7c2bdbef2..ef074ee9a4 100644
--- a/apps/typegpu-docs/src/examples/image-processing/image-tuning/meta.json
+++ b/apps/typegpu-docs/src/examples/image-processing/image-tuning/meta.json
@@ -1,5 +1,6 @@
 {
   "title": "Image Tuning",
   "category": "image-processing",
-  "tags": ["filtering"]
+  "tags": ["color", "filtering", "interaction"],
+  "coolFactor": 5
 }
diff --git a/apps/typegpu-docs/src/examples/rendering/3d-fish/meta.json b/apps/typegpu-docs/src/examples/rendering/3d-fish/meta.json
index 9a66060320..5d0559cc3b 100644
--- a/apps/typegpu-docs/src/examples/rendering/3d-fish/meta.json
+++ b/apps/typegpu-docs/src/examples/rendering/3d-fish/meta.json
@@ -1,5 +1,6 @@
 {
   "title": "3D Fish",
   "category": "rendering",
-  "tags": ["experimental", "3d", "rasterization", "compute", "double buffering"]
+  "tags": ["3d", "double buffering", "rasterization"],
+  "coolFactor": 9
 }
diff --git a/apps/typegpu-docs/src/examples/rendering/box-raytracing/meta.json b/apps/typegpu-docs/src/examples/rendering/box-raytracing/meta.json
index 276b637f80..2663176421 100644
--- a/apps/typegpu-docs/src/examples/rendering/box-raytracing/meta.json
+++ b/apps/typegpu-docs/src/examples/rendering/box-raytracing/meta.json
@@ -1,5 +1,6 @@
 {
   "title": "Box Raytracing",
   "category": "rendering",
-  "tags": ["3d", "raytracing"]
+  "tags": ["3d", "color", "ecosystem", "raytracing"],
+  "coolFactor": 6
 }
diff --git a/apps/typegpu-docs/src/examples/rendering/caustics/meta.json b/apps/typegpu-docs/src/examples/rendering/caustics/meta.json
index 553de5b0fb..526d284ad0 100644
--- a/apps/typegpu-docs/src/examples/rendering/caustics/meta.json
+++ b/apps/typegpu-docs/src/examples/rendering/caustics/meta.json
@@ -1,5 +1,6 @@
 {
   "title": "Caustics",
   "category": "rendering",
-  "tags": ["fragment shader"]
+  "tags": ["ecosystem", "lighting", "noise"],
+  "coolFactor": 8
 }
diff --git a/apps/typegpu-docs/src/examples/rendering/clouds/meta.json b/apps/typegpu-docs/src/examples/rendering/clouds/meta.json
index 3ced02e8c5..caaab392bd 100644
--- a/apps/typegpu-docs/src/examples/rendering/clouds/meta.json
+++ b/apps/typegpu-docs/src/examples/rendering/clouds/meta.json
@@ -1,5 +1,6 @@
 {
   "title": "Clouds",
   "category": "rendering",
-  "tags": ["experimental", "3d", "ray marching"]
+  "tags": ["3d", "ecosystem", "noise", "ray marching", "sdf"],
+  "coolFactor": 10
 }
diff --git a/apps/typegpu-docs/src/examples/rendering/cubemap-reflection/meta.json b/apps/typegpu-docs/src/examples/rendering/cubemap-reflection/meta.json
index 5ef58257b7..5be5037947 100644
--- a/apps/typegpu-docs/src/examples/rendering/cubemap-reflection/meta.json
+++ b/apps/typegpu-docs/src/examples/rendering/cubemap-reflection/meta.json
@@ -1,5 +1,6 @@
 {
   "title": "Cubemap Reflection",
   "category": "rendering",
-  "tags": ["experimental", "3d", "rasterization", "compute"]
+  "tags": ["3d", "lighting", "rasterization"],
+  "coolFactor": 9
 }
diff --git a/apps/typegpu-docs/src/examples/rendering/disco/meta.json b/apps/typegpu-docs/src/examples/rendering/disco/meta.json
index 20fde573b6..a0742e547e 100644
--- a/apps/typegpu-docs/src/examples/rendering/disco/meta.json
+++ b/apps/typegpu-docs/src/examples/rendering/disco/meta.json
@@ -1,5 +1,6 @@
 {
   "title": "Disco",
   "category": "rendering",
-  "tags": ["experimental"]
+  "tags": ["interaction"],
+  "coolFactor": 6
 }
diff --git a/apps/typegpu-docs/src/examples/rendering/function-visualizer/meta.json b/apps/typegpu-docs/src/examples/rendering/function-visualizer/meta.json
index 15cc42c75a..9064f0b070 100644
--- a/apps/typegpu-docs/src/examples/rendering/function-visualizer/meta.json
+++ b/apps/typegpu-docs/src/examples/rendering/function-visualizer/meta.json
@@ -1,5 +1,6 @@
 {
   "title": "Function Visualizer",
   "category": "rendering",
-  "tags": ["compute"]
+  "tags": ["interaction", "line-rendering", "math"],
+  "coolFactor": 6
 }
diff --git a/apps/typegpu-docs/src/examples/rendering/jelly-slider/meta.json b/apps/typegpu-docs/src/examples/rendering/jelly-slider/meta.json
index c4204f436d..927ec06f1f 100644
--- a/apps/typegpu-docs/src/examples/rendering/jelly-slider/meta.json
+++ b/apps/typegpu-docs/src/examples/rendering/jelly-slider/meta.json
@@ -1,5 +1,6 @@
 {
   "title": "Jelly slider",
   "category": "rendering",
-  "tags": ["experimental"]
+  "tags": ["interaction", "ray marching", "sdf", "ui"],
+  "coolFactor": 10
 }
diff --git a/apps/typegpu-docs/src/examples/rendering/jelly-switch/meta.json b/apps/typegpu-docs/src/examples/rendering/jelly-switch/meta.json
index 63808d051c..bf3f4edcd6 100644
--- a/apps/typegpu-docs/src/examples/rendering/jelly-switch/meta.json
+++ b/apps/typegpu-docs/src/examples/rendering/jelly-switch/meta.json
@@ -1,5 +1,6 @@
 {
   "title": "Jelly Switch",
   "category": "rendering",
-  "tags": ["experimental"]
+  "tags": ["interaction", "ray marching", "sdf", "ui"],
+  "coolFactor": 10
 }
diff --git a/apps/typegpu-docs/src/examples/rendering/perlin-noise/meta.json b/apps/typegpu-docs/src/examples/rendering/perlin-noise/meta.json
index d7e465f643..99f28e646e 100644
--- a/apps/typegpu-docs/src/examples/rendering/perlin-noise/meta.json
+++ b/apps/typegpu-docs/src/examples/rendering/perlin-noise/meta.json
@@ -1,5 +1,6 @@
 {
   "title": "Perlin Noise",
   "category": "rendering",
-  "tags": ["noise"]
+  "tags": ["ecosystem", "noise"],
+  "coolFactor": 7
 }
diff --git a/apps/typegpu-docs/src/examples/rendering/phong-reflection/meta.json b/apps/typegpu-docs/src/examples/rendering/phong-reflection/meta.json
index fa7d936811..9a9863b7f3 100644
--- a/apps/typegpu-docs/src/examples/rendering/phong-reflection/meta.json
+++ b/apps/typegpu-docs/src/examples/rendering/phong-reflection/meta.json
@@ -1,5 +1,6 @@
 {
   "title": "Phong Reflection Model",
   "category": "rendering",
-  "tags": ["3d"]
+  "tags": ["3d", "lighting", "rasterization"],
+  "coolFactor": 6
 }
diff --git a/apps/typegpu-docs/src/examples/rendering/point-light-shadow/meta.json b/apps/typegpu-docs/src/examples/rendering/point-light-shadow/meta.json
index ff8ffe4f12..37e24007fb 100644
--- a/apps/typegpu-docs/src/examples/rendering/point-light-shadow/meta.json
+++ b/apps/typegpu-docs/src/examples/rendering/point-light-shadow/meta.json
@@ -1,5 +1,6 @@
 {
   "title": "Point Light Shadow",
   "category": "rendering",
-  "tags": ["3d"]
+  "tags": ["3d", "lighting", "rasterization", "shadows"],
+  "coolFactor": 7
 }
diff --git a/apps/typegpu-docs/src/examples/rendering/ray-marching/meta.json b/apps/typegpu-docs/src/examples/rendering/ray-marching/meta.json
index 38297e274c..c4f5208574 100644
--- a/apps/typegpu-docs/src/examples/rendering/ray-marching/meta.json
+++ b/apps/typegpu-docs/src/examples/rendering/ray-marching/meta.json
@@ -1,5 +1,6 @@
 {
   "title": "Ray Marching",
   "category": "rendering",
-  "tags": ["fragment shader", "shadows", "sdf", "ray marching", "sphere tracing"]
+  "tags": ["ecosystem", "ray marching", "sdf", "shadows"],
+  "coolFactor": 7
 }
diff --git a/apps/typegpu-docs/src/examples/rendering/simple-shadow/meta.json b/apps/typegpu-docs/src/examples/rendering/simple-shadow/meta.json
index 80880d4585..d5381cebfc 100644
--- a/apps/typegpu-docs/src/examples/rendering/simple-shadow/meta.json
+++ b/apps/typegpu-docs/src/examples/rendering/simple-shadow/meta.json
@@ -1,5 +1,6 @@
 {
   "title": "Simple shadow",
   "category": "rendering",
-  "tags": ["experimental", "3d", "rasterization"]
+  "tags": ["3d", "rasterization", "shadows"],
+  "coolFactor": 5
 }
diff --git a/apps/typegpu-docs/src/examples/rendering/smoky-triangle/meta.json b/apps/typegpu-docs/src/examples/rendering/smoky-triangle/meta.json
index f1575a377e..04c7780479 100644
--- a/apps/typegpu-docs/src/examples/rendering/smoky-triangle/meta.json
+++ b/apps/typegpu-docs/src/examples/rendering/smoky-triangle/meta.json
@@ -1,5 +1,6 @@
 {
   "title": "Smoky Triangle",
   "category": "rendering",
-  "tags": ["noise"]
+  "tags": ["ecosystem", "noise", "primitives"],
+  "coolFactor": 8
 }
diff --git a/apps/typegpu-docs/src/examples/rendering/suika-sdf/meta.json b/apps/typegpu-docs/src/examples/rendering/suika-sdf/meta.json
index e3c102d2f5..e55b976664 100644
--- a/apps/typegpu-docs/src/examples/rendering/suika-sdf/meta.json
+++ b/apps/typegpu-docs/src/examples/rendering/suika-sdf/meta.json
@@ -1,5 +1,6 @@
 {
   "title": "Suika SDF",
   "category": "rendering",
-  "tags": ["experimental", "sdf", "ray marching"]
+  "tags": ["ecosystem", "interaction", "physics", "ray marching", "sdf"],
+  "coolFactor": 10
 }
diff --git a/apps/typegpu-docs/src/examples/rendering/two-boxes/meta.json b/apps/typegpu-docs/src/examples/rendering/two-boxes/meta.json
index ad49589b4c..c5d982ea93 100644
--- a/apps/typegpu-docs/src/examples/rendering/two-boxes/meta.json
+++ b/apps/typegpu-docs/src/examples/rendering/two-boxes/meta.json
@@ -1,5 +1,6 @@
 {
   "title": "Two Boxes",
   "category": "rendering",
-  "tags": ["experimental", "3d", "rasterization"]
+  "tags": ["3d", "rasterization"],
+  "coolFactor": 4
 }
diff --git a/apps/typegpu-docs/src/examples/rendering/xor-dev-centrifuge-2/meta.json b/apps/typegpu-docs/src/examples/rendering/xor-dev-centrifuge-2/meta.json
index a161e779f3..4d4f63129a 100644
--- a/apps/typegpu-docs/src/examples/rendering/xor-dev-centrifuge-2/meta.json
+++ b/apps/typegpu-docs/src/examples/rendering/xor-dev-centrifuge-2/meta.json
@@ -1,5 +1,6 @@
 {
   "title": "XorDev \"Centrifuge 2\"",
   "category": "rendering",
-  "tags": ["fragment shader"]
+  "tags": ["math"],
+  "coolFactor": 7
 }
diff --git a/apps/typegpu-docs/src/examples/rendering/xor-dev-runner/meta.json b/apps/typegpu-docs/src/examples/rendering/xor-dev-runner/meta.json
index ed7e7215b1..e7133fc1fd 100644
--- a/apps/typegpu-docs/src/examples/rendering/xor-dev-runner/meta.json
+++ b/apps/typegpu-docs/src/examples/rendering/xor-dev-runner/meta.json
@@ -1,5 +1,6 @@
 {
   "title": "XorDev \"Runner\"",
   "category": "rendering",
-  "tags": ["fragment shader", "fractal"]
+  "tags": ["camera", "fractal", "interaction", "math"],
+  "coolFactor": 7
 }
diff --git a/apps/typegpu-docs/src/examples/simple/gradient-tiles/meta.json b/apps/typegpu-docs/src/examples/simple/gradient-tiles/meta.json
index ae5e7ec5f6..cfd6d3d898 100644
--- a/apps/typegpu-docs/src/examples/simple/gradient-tiles/meta.json
+++ b/apps/typegpu-docs/src/examples/simple/gradient-tiles/meta.json
@@ -1,4 +1,6 @@
 {
   "title": "Gradient Tiles",
-  "category": "simple"
+  "category": "simple",
+  "tags": ["basics", "color"],
+  "coolFactor": 4
 }
diff --git a/apps/typegpu-docs/src/examples/simple/increment/meta.json b/apps/typegpu-docs/src/examples/simple/increment/meta.json
index 818b51be09..d25c056bf6 100644
--- a/apps/typegpu-docs/src/examples/simple/increment/meta.json
+++ b/apps/typegpu-docs/src/examples/simple/increment/meta.json
@@ -1,5 +1,6 @@
 {
   "title": "Increment",
   "category": "simple",
-  "tags": ["compute"]
+  "tags": ["basics"],
+  "coolFactor": 3
 }
diff --git a/apps/typegpu-docs/src/examples/simple/liquid-glass/meta.json b/apps/typegpu-docs/src/examples/simple/liquid-glass/meta.json
index b7ee89ef92..dfc6313d71 100644
--- a/apps/typegpu-docs/src/examples/simple/liquid-glass/meta.json
+++ b/apps/typegpu-docs/src/examples/simple/liquid-glass/meta.json
@@ -1,5 +1,6 @@
 {
   "title": "Liquid Glass",
   "category": "simple",
-  "tags": ["rendering", "experimental"]
+  "tags": ["ecosystem", "interaction", "sdf"],
+  "coolFactor": 8
 }
diff --git a/apps/typegpu-docs/src/examples/simple/oklab/meta.json b/apps/typegpu-docs/src/examples/simple/oklab/meta.json
index 040da2cbca..2167aefab0 100644
--- a/apps/typegpu-docs/src/examples/simple/oklab/meta.json
+++ b/apps/typegpu-docs/src/examples/simple/oklab/meta.json
@@ -1,5 +1,6 @@
 {
   "title": "Oklab (Color Space)",
   "category": "simple",
-  "tags": []
+  "tags": ["basics", "color", "ecosystem", "interaction"],
+  "coolFactor": 6
 }
diff --git a/apps/typegpu-docs/src/examples/simple/ripple-cube/meta.json b/apps/typegpu-docs/src/examples/simple/ripple-cube/meta.json
index 89f52b7ea9..3e1adaf256 100644
--- a/apps/typegpu-docs/src/examples/simple/ripple-cube/meta.json
+++ b/apps/typegpu-docs/src/examples/simple/ripple-cube/meta.json
@@ -1,5 +1,6 @@
 {
   "title": "Ripple cube",
   "category": "simple",
-  "tags": ["experimental"]
+  "tags": ["3d", "ecosystem", "noise", "ray marching", "sdf"],
+  "coolFactor": 8
 }
diff --git a/apps/typegpu-docs/src/examples/simple/square/meta.json b/apps/typegpu-docs/src/examples/simple/square/meta.json
index e7c142d580..e6c2679a2e 100644
--- a/apps/typegpu-docs/src/examples/simple/square/meta.json
+++ b/apps/typegpu-docs/src/examples/simple/square/meta.json
@@ -1,5 +1,6 @@
 {
   "title": "Square",
   "category": "simple",
-  "tags": ["index buffer"]
+  "tags": ["basics", "primitives"],
+  "coolFactor": 3
 }
diff --git a/apps/typegpu-docs/src/examples/simple/stencil/meta.json b/apps/typegpu-docs/src/examples/simple/stencil/meta.json
index d695c8fbc7..c9880c481a 100644
--- a/apps/typegpu-docs/src/examples/simple/stencil/meta.json
+++ b/apps/typegpu-docs/src/examples/simple/stencil/meta.json
@@ -1,5 +1,6 @@
 {
   "title": "Stencil",
   "category": "simple",
-  "tags": ["rendering", "experimental"]
+  "tags": ["basics"],
+  "coolFactor": 3
 }
diff --git a/apps/typegpu-docs/src/examples/simple/triangle-next/meta.json b/apps/typegpu-docs/src/examples/simple/triangle-next/meta.json
index 5e4465eef6..7537d18165 100644
--- a/apps/typegpu-docs/src/examples/simple/triangle-next/meta.json
+++ b/apps/typegpu-docs/src/examples/simple/triangle-next/meta.json
@@ -1,5 +1,6 @@
 {
   "title": "Triangle (next)",
   "category": "simple",
-  "tags": []
+  "tags": ["basics", "primitives"],
+  "coolFactor": 3
 }
diff --git a/apps/typegpu-docs/src/examples/simple/triangle/meta.json b/apps/typegpu-docs/src/examples/simple/triangle/meta.json
index 64589b1549..3517401f55 100644
--- a/apps/typegpu-docs/src/examples/simple/triangle/meta.json
+++ b/apps/typegpu-docs/src/examples/simple/triangle/meta.json
@@ -1,5 +1,6 @@
 {
   "title": "Triangle",
   "category": "simple",
-  "tags": []
+  "tags": ["basics", "primitives"],
+  "coolFactor": 3
 }
diff --git a/apps/typegpu-docs/src/examples/simple/vaporrave/meta.json b/apps/typegpu-docs/src/examples/simple/vaporrave/meta.json
index 7c7c7c52f6..2cffe9c613 100644
--- a/apps/typegpu-docs/src/examples/simple/vaporrave/meta.json
+++ b/apps/typegpu-docs/src/examples/simple/vaporrave/meta.json
@@ -1,5 +1,6 @@
 {
   "title": "Vaporrave",
   "category": "simple",
-  "tags": ["sdf", "ray marching"]
+  "tags": ["ecosystem", "noise", "ray marching", "sdf"],
+  "coolFactor": 8
 }
diff --git a/apps/typegpu-docs/src/examples/simulation/boids/meta.json b/apps/typegpu-docs/src/examples/simulation/boids/meta.json
index 7846b4c43b..0aa8116867 100644
--- a/apps/typegpu-docs/src/examples/simulation/boids/meta.json
+++ b/apps/typegpu-docs/src/examples/simulation/boids/meta.json
@@ -1,5 +1,6 @@
 {
   "title": "Boids",
   "category": "simulation",
-  "tags": ["compute", "instancing", "double buffering"]
+  "tags": ["double buffering", "particles", "physics"],
+  "coolFactor": 5
 }
diff --git a/apps/typegpu-docs/src/examples/simulation/confetti/meta.json b/apps/typegpu-docs/src/examples/simulation/confetti/meta.json
index c6e547fb89..77f4bf98fd 100644
--- a/apps/typegpu-docs/src/examples/simulation/confetti/meta.json
+++ b/apps/typegpu-docs/src/examples/simulation/confetti/meta.json
@@ -1,5 +1,6 @@
 {
   "title": "Confetti",
   "category": "simulation",
-  "tags": ["compute", "instancing"]
+  "tags": ["particles", "physics"],
+  "coolFactor": 6
 }
diff --git a/apps/typegpu-docs/src/examples/simulation/fluid-double-buffering/meta.json b/apps/typegpu-docs/src/examples/simulation/fluid-double-buffering/meta.json
index 88b07b8129..091e6acfd3 100644
--- a/apps/typegpu-docs/src/examples/simulation/fluid-double-buffering/meta.json
+++ b/apps/typegpu-docs/src/examples/simulation/fluid-double-buffering/meta.json
@@ -1,5 +1,6 @@
 {
   "title": "Fluid (double-buffering)",
   "category": "simulation",
-  "tags": ["compute", "cellular automata", "double buffering"]
+  "tags": ["cellular automata", "double buffering", "fluid", "interaction"],
+  "coolFactor": 7
 }
diff --git a/apps/typegpu-docs/src/examples/simulation/fluid-with-atomics/meta.json b/apps/typegpu-docs/src/examples/simulation/fluid-with-atomics/meta.json
index 77f6cca787..215084fa30 100644
--- a/apps/typegpu-docs/src/examples/simulation/fluid-with-atomics/meta.json
+++ b/apps/typegpu-docs/src/examples/simulation/fluid-with-atomics/meta.json
@@ -1,5 +1,6 @@
 {
   "title": "Fluid (with atomics)",
   "category": "simulation",
-  "tags": ["compute", "cellular automata", "atomic operations"]
+  "tags": ["cellular automata", "fluid", "interaction"],
+  "coolFactor": 7
 }
diff --git a/apps/typegpu-docs/src/examples/simulation/game-of-life/meta.json b/apps/typegpu-docs/src/examples/simulation/game-of-life/meta.json
index fa69ab61d2..2c3fe46559 100644
--- a/apps/typegpu-docs/src/examples/simulation/game-of-life/meta.json
+++ b/apps/typegpu-docs/src/examples/simulation/game-of-life/meta.json
@@ -1,5 +1,6 @@
 {
   "title": "Game of Life",
   "category": "simulation",
-  "tags": ["cellular automata", "compute", "double buffering"]
+  "tags": ["cellular automata", "double buffering", "interaction"],
+  "coolFactor": 7
 }
diff --git a/apps/typegpu-docs/src/examples/simulation/gravity/meta.json b/apps/typegpu-docs/src/examples/simulation/gravity/meta.json
index 02374b47cc..39f9c3e68a 100644
--- a/apps/typegpu-docs/src/examples/simulation/gravity/meta.json
+++ b/apps/typegpu-docs/src/examples/simulation/gravity/meta.json
@@ -1,5 +1,6 @@
 {
   "title": "Gravity",
   "category": "simulation",
-  "tags": ["experimental"]
+  "tags": ["3d", "interaction", "particles", "physics", "rasterization"],
+  "coolFactor": 8
 }
diff --git a/apps/typegpu-docs/src/examples/simulation/slime-mold-3d/meta.json b/apps/typegpu-docs/src/examples/simulation/slime-mold-3d/meta.json
index fd15c756c5..b98edac7b0 100644
--- a/apps/typegpu-docs/src/examples/simulation/slime-mold-3d/meta.json
+++ b/apps/typegpu-docs/src/examples/simulation/slime-mold-3d/meta.json
@@ -1,5 +1,6 @@
 {
   "title": "Slime Mold 3d",
   "category": "simulation",
-  "tags": ["experimental", "compute", "double buffering"]
+  "tags": ["3d", "double buffering", "ecosystem", "particles", "ray marching"],
+  "coolFactor": 6
 }
diff --git a/apps/typegpu-docs/src/examples/simulation/slime-mold/meta.json b/apps/typegpu-docs/src/examples/simulation/slime-mold/meta.json
index db9e3e1d83..68935c244e 100644
--- a/apps/typegpu-docs/src/examples/simulation/slime-mold/meta.json
+++ b/apps/typegpu-docs/src/examples/simulation/slime-mold/meta.json
@@ -1,5 +1,6 @@
 {
   "title": "Slime Mold",
   "category": "simulation",
-  "tags": ["experimental", "compute", "double buffering"]
+  "tags": ["double buffering", "ecosystem", "particles"],
+  "coolFactor": 6
 }
diff --git a/apps/typegpu-docs/src/examples/simulation/stable-fluid/meta.json b/apps/typegpu-docs/src/examples/simulation/stable-fluid/meta.json
index eb4934656a..0e99bd54ab 100644
--- a/apps/typegpu-docs/src/examples/simulation/stable-fluid/meta.json
+++ b/apps/typegpu-docs/src/examples/simulation/stable-fluid/meta.json
@@ -1,5 +1,6 @@
 {
   "title": "Stable Fluids",
   "category": "simulation",
-  "tags": ["experimental", "double buffering"]
+  "tags": ["double buffering", "fluid", "interaction"],
+  "coolFactor": 8
 }
diff --git a/apps/typegpu-docs/src/examples/simulation/wind-map/meta.json b/apps/typegpu-docs/src/examples/simulation/wind-map/meta.json
index 113bfad854..8a975d18da 100644
--- a/apps/typegpu-docs/src/examples/simulation/wind-map/meta.json
+++ b/apps/typegpu-docs/src/examples/simulation/wind-map/meta.json
@@ -1,6 +1,7 @@
 {
   "title": "Global Wind Map",
   "category": "simulation",
-  "tags": ["wind", "particles", "line-rendering"],
-  "dev": true
+  "tags": ["ecosystem", "line-rendering", "particles", "vector field"],
+  "dev": true,
+  "coolFactor": 7
 }
diff --git a/apps/typegpu-docs/src/examples/tests/copy-error/meta.json b/apps/typegpu-docs/src/examples/tests/copy-error/meta.json
index 786ca5ed70..ab7ffd0ec8 100644
--- a/apps/typegpu-docs/src/examples/tests/copy-error/meta.json
+++ b/apps/typegpu-docs/src/examples/tests/copy-error/meta.json
@@ -1,6 +1,7 @@
 {
   "title": "Struct Copying Test",
   "category": "tests",
-  "tags": [],
-  "dev": true
+  "tags": ["test"],
+  "dev": true,
+  "coolFactor": 1
 }
diff --git a/apps/typegpu-docs/src/examples/tests/dispatch/meta.json b/apps/typegpu-docs/src/examples/tests/dispatch/meta.json
index d211b4b912..61cc9105ae 100644
--- a/apps/typegpu-docs/src/examples/tests/dispatch/meta.json
+++ b/apps/typegpu-docs/src/examples/tests/dispatch/meta.json
@@ -1,6 +1,7 @@
 {
   "title": "Dispatch Tests",
   "category": "tests",
-  "tags": [],
-  "dev": true
+  "tags": ["test"],
+  "dev": true,
+  "coolFactor": 1
 }
diff --git a/apps/typegpu-docs/src/examples/tests/log-test/meta.json b/apps/typegpu-docs/src/examples/tests/log-test/meta.json
index 50756b94d2..015b07cd13 100644
--- a/apps/typegpu-docs/src/examples/tests/log-test/meta.json
+++ b/apps/typegpu-docs/src/examples/tests/log-test/meta.json
@@ -1,6 +1,7 @@
 {
   "title": "Console Log Test",
   "category": "tests",
-  "tags": ["experimental"],
-  "dev": true
+  "tags": ["test"],
+  "dev": true,
+  "coolFactor": 1
 }
diff --git a/apps/typegpu-docs/src/examples/tests/prefix-scan/meta.json b/apps/typegpu-docs/src/examples/tests/prefix-scan/meta.json
index 26bb1c5a92..140f2fef19 100644
--- a/apps/typegpu-docs/src/examples/tests/prefix-scan/meta.json
+++ b/apps/typegpu-docs/src/examples/tests/prefix-scan/meta.json
@@ -1,6 +1,7 @@
 {
   "title": "Prefix Scan Tests",
   "category": "tests",
-  "tags": [],
-  "dev": true
+  "tags": ["ecosystem", "test"],
+  "dev": true,
+  "coolFactor": 1
 }
diff --git a/apps/typegpu-docs/src/examples/tests/texture-test/meta.json b/apps/typegpu-docs/src/examples/tests/texture-test/meta.json
index ee5172465a..39499a7fc3 100644
--- a/apps/typegpu-docs/src/examples/tests/texture-test/meta.json
+++ b/apps/typegpu-docs/src/examples/tests/texture-test/meta.json
@@ -1,6 +1,7 @@
 {
   "title": "Texture Test",
   "category": "tests",
-  "tags": ["experimental"],
-  "dev": true
+  "tags": ["test"],
+  "dev": true,
+  "coolFactor": 1
 }
diff --git a/apps/typegpu-docs/src/examples/tests/tgsl-parsing-test/meta.json b/apps/typegpu-docs/src/examples/tests/tgsl-parsing-test/meta.json
index 7a3614162e..c3f1157281 100644
--- a/apps/typegpu-docs/src/examples/tests/tgsl-parsing-test/meta.json
+++ b/apps/typegpu-docs/src/examples/tests/tgsl-parsing-test/meta.json
@@ -1,6 +1,7 @@
 {
   "title": "TGSL Parsing Tests",
   "category": "tests",
-  "tags": ["experimental"],
-  "dev": true
+  "tags": ["test"],
+  "dev": true,
+  "coolFactor": 1
 }
diff --git a/apps/typegpu-docs/src/examples/tests/uniformity/meta.json b/apps/typegpu-docs/src/examples/tests/uniformity/meta.json
index 10c4c3a1a4..76017fe7c8 100644
--- a/apps/typegpu-docs/src/examples/tests/uniformity/meta.json
+++ b/apps/typegpu-docs/src/examples/tests/uniformity/meta.json
@@ -1,6 +1,7 @@
 {
   "title": "Uniformity",
   "category": "tests",
-  "tags": ["experimental"],
-  "dev": true
+  "tags": ["ecosystem", "noise", "test"],
+  "dev": true,
+  "coolFactor": 1
 }
diff --git a/apps/typegpu-docs/src/examples/tests/wgsl-resolution/meta.json b/apps/typegpu-docs/src/examples/tests/wgsl-resolution/meta.json
index 4ed9feb3cb..450b156436 100644
--- a/apps/typegpu-docs/src/examples/tests/wgsl-resolution/meta.json
+++ b/apps/typegpu-docs/src/examples/tests/wgsl-resolution/meta.json
@@ -1,6 +1,7 @@
 {
   "title": "WGSL Resolution",
   "category": "tests",
-  "tags": ["experimental"],
-  "dev": true
+  "tags": ["test"],
+  "dev": true,
+  "coolFactor": 1
 }
diff --git a/apps/typegpu-docs/src/examples/threejs/attractors/meta.json b/apps/typegpu-docs/src/examples/threejs/attractors/meta.json
index 5f5fe12fe9..bb3c978920 100644
--- a/apps/typegpu-docs/src/examples/threejs/attractors/meta.json
+++ b/apps/typegpu-docs/src/examples/threejs/attractors/meta.json
@@ -1,5 +1,6 @@
 {
   "title": "Three.js - tsl / compute / attractors / particles",
   "category": "threejs",
-  "tags": ["three.js"]
+  "tags": ["3d", "ecosystem", "particles", "physics"],
+  "coolFactor": 5
 }
diff --git a/apps/typegpu-docs/src/examples/threejs/compute-cloth/meta.json b/apps/typegpu-docs/src/examples/threejs/compute-cloth/meta.json
index 6a0036d908..2edbf080a8 100644
--- a/apps/typegpu-docs/src/examples/threejs/compute-cloth/meta.json
+++ b/apps/typegpu-docs/src/examples/threejs/compute-cloth/meta.json
@@ -1,5 +1,6 @@
 {
   "title": "Three.js - compute / cloth",
   "category": "threejs",
-  "tags": ["three.js"]
+  "tags": ["3d", "ecosystem", "interaction", "physics"],
+  "coolFactor": 5
 }
diff --git a/apps/typegpu-docs/src/examples/threejs/compute-geometry/meta.json b/apps/typegpu-docs/src/examples/threejs/compute-geometry/meta.json
index d4a21815a7..b2d70bb8a4 100644
--- a/apps/typegpu-docs/src/examples/threejs/compute-geometry/meta.json
+++ b/apps/typegpu-docs/src/examples/threejs/compute-geometry/meta.json
@@ -1,5 +1,6 @@
 {
   "title": "Three.js - compute / geometry",
   "category": "threejs",
-  "tags": ["three.js"]
+  "tags": ["3d", "interaction"],
+  "coolFactor": 5
 }
diff --git a/apps/typegpu-docs/src/examples/threejs/compute-particles-snow/meta.json b/apps/typegpu-docs/src/examples/threejs/compute-particles-snow/meta.json
index 5753c7a48c..d97180bcc5 100644
--- a/apps/typegpu-docs/src/examples/threejs/compute-particles-snow/meta.json
+++ b/apps/typegpu-docs/src/examples/threejs/compute-particles-snow/meta.json
@@ -1,5 +1,6 @@
 {
   "title": "Three.js - compute / particles / snow",
   "category": "threejs",
-  "tags": ["three.js"]
+  "tags": ["3d", "ecosystem", "particles", "physics"],
+  "coolFactor": 5
 }
diff --git a/apps/typegpu-docs/src/examples/threejs/compute-particles/meta.json b/apps/typegpu-docs/src/examples/threejs/compute-particles/meta.json
index 4f66bb9bba..5a365abf9f 100644
--- a/apps/typegpu-docs/src/examples/threejs/compute-particles/meta.json
+++ b/apps/typegpu-docs/src/examples/threejs/compute-particles/meta.json
@@ -1,5 +1,6 @@
 {
   "title": "Three.js - compute / particles",
   "category": "threejs",
-  "tags": ["three.js"]
+  "tags": ["3d", "ecosystem", "interaction", "particles", "physics"],
+  "coolFactor": 5
 }
diff --git a/apps/typegpu-docs/src/examples/threejs/simple/meta.json b/apps/typegpu-docs/src/examples/threejs/simple/meta.json
index 5e5d6dda70..6769a0c531 100644
--- a/apps/typegpu-docs/src/examples/threejs/simple/meta.json
+++ b/apps/typegpu-docs/src/examples/threejs/simple/meta.json
@@ -1,5 +1,6 @@
 {
   "title": "Three.js - Simple",
   "category": "threejs",
-  "tags": ["three.js"]
+  "tags": ["3d", "basics", "ecosystem", "noise"],
+  "coolFactor": 4
 }
diff --git a/apps/typegpu-docs/src/examples/threejs/test-mismatched-types/meta.json b/apps/typegpu-docs/src/examples/threejs/test-mismatched-types/meta.json
index 66d6acf05c..df2571d4d6 100644
--- a/apps/typegpu-docs/src/examples/threejs/test-mismatched-types/meta.json
+++ b/apps/typegpu-docs/src/examples/threejs/test-mismatched-types/meta.json
@@ -2,5 +2,6 @@
   "title": "Three.js - Test Mismatched Types",
   "category": "threejs",
   "dev": true,
-  "tags": ["three.js"]
+  "tags": ["test"],
+  "coolFactor": 1
 }
diff --git a/apps/typegpu-docs/src/examples/threejs/test-reused-functions/meta.json b/apps/typegpu-docs/src/examples/threejs/test-reused-functions/meta.json
index ae7a2bd56a..4de8989663 100644
--- a/apps/typegpu-docs/src/examples/threejs/test-reused-functions/meta.json
+++ b/apps/typegpu-docs/src/examples/threejs/test-reused-functions/meta.json
@@ -2,5 +2,6 @@
   "title": "Three.js - Test Reused Functions",
   "category": "threejs",
   "dev": true,
-  "tags": ["three.js"]
+  "tags": ["math", "test"],
+  "coolFactor": 1
 }
diff --git a/apps/typegpu-docs/src/examples/threejs/varyings/meta.json b/apps/typegpu-docs/src/examples/threejs/varyings/meta.json
index 4d2285abbb..794f4cb58a 100644
--- a/apps/typegpu-docs/src/examples/threejs/varyings/meta.json
+++ b/apps/typegpu-docs/src/examples/threejs/varyings/meta.json
@@ -1,5 +1,6 @@
 {
   "title": "Three.js - Varyings",
   "category": "threejs",
-  "tags": ["three.js"]
+  "tags": ["3d", "basics"],
+  "coolFactor": 3
 }
diff --git a/apps/typegpu-docs/src/utils/examples/exampleViewStateAtoms.ts b/apps/typegpu-docs/src/utils/examples/exampleViewStateAtoms.ts
index 3a3c28c026..4821f6f993 100644
--- a/apps/typegpu-docs/src/utils/examples/exampleViewStateAtoms.ts
+++ b/apps/typegpu-docs/src/utils/examples/exampleViewStateAtoms.ts
@@ -17,3 +17,10 @@ export const experimentalExamplesShownAtom = atomWithStorage(
   undefined,
   storageOptions,
 );
+
+export const groupExamplesByCategoryAtom = atomWithStorage(
+  'examples-group-by-category',
+  false,
+  undefined,
+  storageOptions,
+);
diff --git a/apps/typegpu-docs/src/utils/examples/types.ts b/apps/typegpu-docs/src/utils/examples/types.ts
index 4a4ac99a2e..65c5749e0b 100644
--- a/apps/typegpu-docs/src/utils/examples/types.ts
+++ b/apps/typegpu-docs/src/utils/examples/types.ts
@@ -5,6 +5,7 @@ export const ExampleMetadata = type({
   title: 'string',
   category: 'string',
   'tags?': 'string[]',
+  coolFactor: 'number',
   'dev?': 'boolean',
 });
 
@@ -59,4 +60,5 @@ export type Example = {
   htmlFile: ExampleSrcFile;
   metadata: ExampleMetadata;
   thumbnails?: ThumbnailPair;
+  usedApis: string[];
 };