UI Showcase — Built with Claude

This is a showcase, not a library. Six elements I find myself reaching for on most projects. For a much bigger pool of patterns, see the UI element sites in Chapter 03 and Chapter 05 (UIverse, Aceternity, CodyHouse).

01 · Gradient text headline

Text effectCSS only

A multi-stop gradient applied to text. Use sparingly — usually one accent word in a headline, not the whole thing.

Built with care.

/* HTML */
<span class="gradient-headline">Built with care.</span>

/* CSS */
.gradient-headline {
  font-family: 'Fraunces', serif;
  font-size: 56px;
  font-weight: 700;
  background: linear-gradient(135deg, #D4683C, #B85628, #6B4D6E);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

02 · Animated underline link

Hover effectCSS only

A link underline that draws in on hover (right to left) and out on un-hover (left to right). Subtle but polished. Hover the text to see it.

Click me to see the effect

/* HTML */
<a href="#" class="line-link">Click me</a>

/* CSS */
.line-link {
  position: relative;
  text-decoration: none;
  color: #1A1D2E;
  padding: 4px 0;
}
.line-link::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 2px;
  background: #D4683C;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}
.line-link:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

03 · Offset border image frame

FrameCSS only

Image with a colored outline offset to one corner. Editorial feel without being too design-y. Great for portraits and hero images.

/* HTML */
<div class="offset-frame">
  <img src="..." alt="...">
</div>

/* CSS */
.offset-frame {
  position: relative;
  width: 240px;
  height: 320px;
}
.offset-frame::before {
  content: '';
  position: absolute;
  inset: 12px -12px -12px 12px;
  border: 2px solid #D4683C;
  border-radius: 8px;
  z-index: 0;
}
.offset-frame img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

04 · Polaroid-style frame

FrameCSS + Google Font

Tilted polaroid for testimonial photos, founder shots, gallery images. Slight rotation, soft shadow, handwritten caption. Hover to nudge.

Demo polaroid — at the fundraiser, May '26

/* HTML — use Caveat or another handwritten Google Font */
<figure class="polaroid">
  <img src="..." alt="...">
  <figcaption>your caption here</figcaption>
</figure>

/* CSS */
.polaroid {
  background: white;
  padding: 14px 14px 48px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.06);
  transform: rotate(-3deg);
  transition: transform 0.3s ease;
  width: 220px;
}
.polaroid:hover { transform: rotate(-1deg) translateY(-4px); }
.polaroid img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}
.polaroid figcaption {
  font-family: 'Caveat', cursive;
  text-align: center;
  margin-top: 12px;
  font-size: 18px;
}

05 · Pulse-glow button

ButtonCSS only

A primary CTA button with a subtle pulsing glow. Use for the most important conversion on the page (donate, book, sign up). Don't use this for every button on the site — it stops feeling special.

/* HTML */
<button class="glow-btn">Donate Now</button>

/* CSS */
.glow-btn {
  background: linear-gradient(135deg, #D4683C, #B85628);
  color: white;
  padding: 16px 36px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(212,104,60,0.35);
  animation: glow-pulse 3s ease-in-out infinite;
  transition: transform 0.2s ease;
}
.glow-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(212,104,60,0.5);
}
@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(212,104,60,0.35),
                          0 0 0 0 rgba(212,104,60,0.18); }
  50%       { box-shadow: 0 4px 30px rgba(212,104,60,0.5),
                          0 0 0 8px rgba(212,104,60,0); }
}

06 · Lift-on-hover card

CardCSS only

The standard "this is clickable" card. Lifts and adds a soft shadow on hover. Use for service cards, feature grids, blog post previews. Hover the card.

Stable Housing

Supervised transitional housing for foster youth ages 18–21.

Life Skills

Financial literacy, employment prep, and independent living workshops.

/* HTML */
<div class="lift-card">
  <h5>Title</h5>
  <p>Description</p>
</div>

/* CSS */
.lift-card {
  background: white;
  border: 1px solid rgba(26,29,46,0.08);
  border-radius: 14px;
  padding: 24px 26px;
  transition: transform 0.3s cubic-bezier(0.22,1,0.36,1),
              box-shadow 0.3s, border-color 0.3s;
  cursor: pointer;
}
.lift-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(26,29,46,0.10);
  border-color: rgba(212,104,60,0.3);
}

07 · Text focus-in animation

Text effectCSS only

Headline that comes into focus from a soft blur. Cinematic. Use once per page — usually the hero headline.

Hello, world.

/* HTML */
<h1 class="focus-headline">Hello, world.</h1>

/* CSS */
.focus-headline {
  font-family: 'Fraunces', serif;
  font-size: 48px;
  font-weight: 700;
  animation: focus-in 0.8s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
}
@keyframes focus-in {
  0%   { filter: blur(8px); opacity: 0; }
  100% { filter: none; opacity: 1; }
}

Note: the demo above loops infinitely so you can see it. In production, use both instead of infinite alternate so the animation runs once on page load.

How to use these as Claude prompts

Copy the HTML and CSS, paste into Claude Code with a prompt like:

"I want a button effect like this on my donate CTA. Adapt it to use my brand color [#0675BC] instead of the orange, and make the pulse a bit slower (4s instead of 3s). Apply it to the existing <a class='donate-cta'> in my home page."

ACF Example

Which elements made it into the ACF site

The ACF site uses variations of: the offset frame (for founder portraits on the Founders page), the lift-on-hover card (for service tiles on What We Do), the focus-in animation (on the home page hero), and the pulse-glow button (on every donate CTA). Most other patterns came from a few targeted UIverse references plus our own custom GSAP animations.

What's next

You've got design, content, build, and now reusable elements. Next up: how to actually publish a finished site — and how not to get charged for things you didn't expect.

UI Showcase.