Record Spine Footer Texture

[swinton]

Add Subtle Record Spine Footer Texture (Easter Egg)

Goal

Introduce a hidden visual nod to music and physical media by using a faint texture derived from an existing photo of record spines.

This should feel like an easter egg.

Most visitors should not consciously notice it.

Those who do should think:

“…wait, are those record spines?”

The site should remain minimal and professional.

Do not add visible photography or obvious decorative elements.

---

Source Image

Use this image:

https://user-images.githubusercontent.com/27806/96281123-8248f180-0f9e-11eb-82de-97ae3b2b0efb.png

Do not display the image directly.

---

Design Intent

Current site mood:

• restrained
• thoughtful
• text-first
• modern

The texture should introduce:

• warmth
• history
• music
• physical artifacts

Without changing the overall feel.

This is not album art.

This is not decoration.

Think:

traces of a collection

---

Visual Treatment

Create a processed derivative image.

Requirements:

Crop

Extract a narrow horizontal slice.

Target:

~80–140px tall

Select a region with:

• strong vertical rhythm
• visible spine variation
• no dominant single album

Avoid:

• large blocks of white
• recognizable cover art
• readable text

The result should read as texture.

---

Processing

Apply subtle processing.

Target appearance:

faded
washed
quiet

Apply:

• desaturate heavily
• reduce contrast slightly
• soften
• optional mild blur

Opacity target:

0.04–0.08

Never exceed:

0.10

No animation.

No parallax.

No overlays.

---

Placement

Apply texture to footer only.

Do not extend upward into content.

Footer remains readable.

Preferred implementation:

Use a pseudo-element.

Example:

footer::before

Positioning:

• full width
• behind footer content
• clipped to footer area

Footer content must remain visually dominant.

---

Theme Behavior

Default Theme

Texture is present.

Very subtle.

Should almost disappear.

---

Classic Mode

Increase visibility slightly.

Rules:

• opacity +25–50%
• slightly less desaturated
• optional sharper rendering

Target:

old homepage discovered at 2am

Do not become obvious.

---

Suggested CSS Structure

footer {
  position: relative;
  overflow: hidden;
}

footer::before {
  content: "";

  position: absolute;
  inset: 0;

  background-image:
    url("/record-spines-footer.png");

  background-repeat: repeat-x;

  background-size: auto 100%;

  opacity: 0.05;

  filter:
    grayscale(0.9)
    contrast(0.9);

  pointer-events: none;

  z-index: 0;
}

footer > * {
  position: relative;
  z-index: 1;
}

body.classic footer::before {
  opacity: 0.08;

  filter:
    grayscale(0.5)
    contrast(1);
}

---

Deliverables

Generate:

/record-spines-footer.png

Update:

index.html

and any inline CSS as needed.

---

Acceptance Criteria

• Footer still looks minimal.
• Texture is discoverable but not obvious.
• Site remains professional.
• Texture works on mobile.
• Classic Mode slightly enhances effect.
• No layout changes.
• No performance regression.

After implementation:

• show before/after screenshots
• summarize image processing choices
• explain opacity values selected