Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/groovy/llms.txt

Use this file to discover all available pages before exploring further.

WallPoster mimics a hand-printed poster tacked to a wall at a jaunty angle. In its thumbnail state it is a compact 256×320 px card rendered at a custom rotation with vivid corner-blur accents in magenta, teal, yellow, and sky blue. Clicking the thumbnail triggers a Framer Motion layoutId shared-element transition: the card smoothly morphs into a full-screen modal overlaid on a semi-transparent backdrop, complete with a cream-paper texture background, extended prose content, and a pre-formatted Groovy Results bullet list.

​
Props

​
title
string
required
The large headline text printed across the top of the poster, both in thumbnail and modal states.
​
subtitle
string
A secondary line displayed beneath the title — used for a project category, client name, or punchy tagline.
​
content
string
A brief intro string passed into the modal body as a lead paragraph. It appears in the expanded modal before the hard-coded extended paragraph and Groovy Results bullet list. It is not rendered on the thumbnail.
​
color
string (hex)
required
The dominant background colour of the poster (e.g. "#f59e0b"). Applied to both the thumbnail and the modal header band.
​
rotation
number
required
The CSS rotation in degrees applied to the thumbnail card (e.g. -3 for a slight counter-clockwise tilt). The modal always renders at rotate: 0.

​
Animation Model

WallPoster uses Framer Motion’s layoutId API to create a seamless shared-element transition between thumbnail and modal:
  1. Thumbnail — A motion.div with the shared layoutId. The rotation prop is applied as an initial CSS transform.
  2. Modal — When clicked, isOpen state is set to true and AnimatePresence mounts a second motion.div with the same layoutId. Framer Motion automatically interpolates position, size, and border-radius between the two elements.
  3. Close — Clicking the × button or the backdrop overlay sets isOpen back to false, triggering the reverse transition.
The modal content (extended paragraph + Groovy Results list) fades in independently after the layout animation completes, preventing text reflow during the morph.
The extended paragraph and Groovy Results bullet list inside the modal are hard-coded directly in WallPoster.js — they are not driven by props. The content prop provides only the brief lead paragraph at the top of the modal body. To change the extended prose or the results bullets, edit the component source directly.

​
Corner Blurs

The four decorative corner blurs on the thumbnail are absolutely-positioned div elements with blur-xl and fixed accent colours:
CornerColour class
Top-leftbg-fuchsia-400 (magenta)
Top-rightbg-teal-400
Bottom-leftbg-yellow-400
Bottom-rightbg-sky-400
These are purely decorative and do not appear in the expanded modal.

​
Usage

import WallPoster from './components/WallPoster';

function SkillsSection() {
  return (
    <div className="flex flex-wrap gap-8 justify-center">
      <WallPoster
        title="Full-Stack Wizardry"
        subtitle="Web Development"
        content="Building end-to-end products from database schema to pixel-perfect UI."
        color="#f59e0b"
        rotation={-3}
      />
      <WallPoster
        title="Motion Design"
        subtitle="Animation & UX"
        content="Crafting micro-interactions that feel alive without draining the battery."
        color="#7c3aed"
        rotation={2}
      />
    </div>
  );
}
Vary rotation values between roughly -5 and 5 degrees across a row of posters — this mimics the uneven tacking of real wall posters. Alternating signs (e.g. -3, 2, -1, 4) look more organic than uniformly positive or negative tilts.

Build docs developers (and LLMs) love

Get started for freeTalk to us