WorkspacePinfolk — corkboard notes
Find your next idea/Create
STUDIO PICK · TEMPLATE

Pinfolk — corkboard notes

A tactile cork wall of handwritten Post-it-style notes. Add a note, drag it, or move a focused note with arrow keys.

S studioUpdated Oct 5, 2026Revision 1
Remix this Present Download
LIVE PREVIEW Isolated & interactive
<!-- Original layout, SVG/CSS artwork and JavaScript © 2026 XXC Templates. MIT License.
Visual pattern references (original code, names and content; no affiliation):
Padlet: https://padlet.com/
Visual collections, note walls and flexible arrangements for community contributions.
Illustrative sample content and data; no real accounts, payments, reservations or messages. -->
<main>
  <header>
    <div>
      <small>A PLACE FOR UNFINISHED THOUGHTS.</small>
      <h1>pinfolk.</h1>
    </div>
    <button id="change">+ Pin a thought</button>
  </header>
  <section id="board" aria-label="Movable notes">
    <article
      tabindex="0"
      aria-label="Make something small. Use arrow keys to move this note."
      style="left: 30px; top: 30px; background: #f3dd88"
    >
      <i></i>
      <h2>Make something small.</h2>
      <p>It still counts.</p>
      <small>DRAG / ARROW KEYS</small>
    </article>
    <article
      tabindex="0"
      aria-label="Ask better questions. Use arrow keys to move this note."
      style="left: 270px; top: 60px; background: #e8b9b2"
    >
      <i></i>
      <h2>Ask better questions.</h2>
      <p>Then leave room for an answer.</p>
      <small>DRAG / ARROW KEYS</small>
    </article>
    <article
      tabindex="0"
      aria-label="Take the long way. Use arrow keys to move this note."
      style="left: 510px; top: 20px; background: #c9d9aa"
    >
      <i></i>
      <h2>Take the long way.</h2>
      <p>There might be a good tree.</p>
      <small>DRAG / ARROW KEYS</small>
    </article>
  </section>
  <p class="hint">Pin an idea. Move it around. Let it become something.</p>
  <output data-status aria-live="polite"></output>
  <footer class="demo-note">Fictional brand · local interface demo · no information is sent</footer>
</main>
Revision history · 1 versions
v12026-10-05 18:26:30 UTC

Keep the ideas flowing.

Explore the library
HELP KEEP THE WORKSHOP USEFUL

Report this creation
ONE QUICK CHECK

Continue?