GODRICH
#css-animation#button#loader#transition#scroll#dashboard#ui#design-trends

9 Media Page Templates — Copy-Paste

· Godrich · 9 items · 18 min read

Landing sectionsPage templateCSS onlyLanding pageMedia & press

A media page template bundles the sections a press room needs — release feed, downloadable assets, spokesperson contact — and one of the nine below copies a

Press hero01 press-hero Press release list02 press-release-list Media kit download03 press-media-kit Press mentions bar04 press-mentions-bar Stat counter05 press-stat-counter Media contact card06 press-contact Founder quote07 press-founder-quote Milestone timeline08 press-milestone-timeline Press footer09 press-footer

Auto-plays · click a tile to jump to its section · all nine in one zip

The nine aren't sorted by popularity — they follow the order a reporter or investor actually scrolls a press page. A hero states who you are, a release list proves you're active, a media kit hands over assets a journalist can use without asking, a mentions bar shows where you've already landed, a stat block backs that up with numbers, a contact card removes the excuse not to reach out, a founder quote adds a human voice, a timeline shows the climb that got here, and a footer keeps the relationship going after the visit ends. Every avatar circle, logo block, and quote mark below is a shape drawn from this site's own $subject-ink, $subject-blue, and $subject-cream tokens — none of it is a real photo or a real press logo, and swapping in either later doesn't touch the layout or the JavaScript underneath. When the announcement is tied to a date, the event landing templates take the slot in front, and a place to lay out work instead of coverage is the project showcase templates.

01Press hero

A press page template hero

Three blurred circles drift behind the headline on a continuous translate-and-scale loop that never stops, while a rotated-square wordmark placeholder, headline, subhead, and two CTAs hold their position in front.

Press hero
Open in a new tab

01 · Press hero — Measured area 30.411% · moving frames 18/23Original by GODRICH · SCSS and React ship in the zip · See the password

transformopacityaria-pressed

A subscribe button that really toggles

The right-hand "subscribe to releases" button actually flips aria-pressed and fills its bookmark icon on every real click, which is what a company press room or a media hub's top section needs.

.ph__orb--1 { animation: ph-float-a 2s ease-in-out infinite; }
@keyframes ph-float-a {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate($sp-10, -$sp-8) scale(1.5); }
}
.ph__sub-btn[aria-pressed="true"] {
  background: rgba(255, 247, 230, .12);
  border-color: $subject-cream;
}
.ph__sub-btn[aria-pressed="true"] .ph__sub-ic {
  opacity: 1;
  color: $color;
  transform: scale(1.15);
}

02Press release list

A company news page filter that really folds rows

Clicking a category chip (all, product, partnership, award) actually folds every row that doesn't match with a max-height and opacity transition rather than just dimming it, and the filter is exclusive — only one chip can read aria-pressed="true" at a time.

Press release list
Open in a new tab

02 · Press release list — Measured area 0.271% · moving frames 16/23Original by GODRICH · SCSS and React ship in the zip · See the password

clickrl__filtersaria-pressed

Only one chip at a time

It's built for a press room's release archive or a newsroom index above the fold.

chips.forEach(function (chip) {
  chip.addEventListener('click', function () {
    root.classList.remove('is-demo');
    chips.forEach(function (c) { c.setAttribute('aria-pressed', 'false'); });
    chip.setAttribute('aria-pressed', 'true');
    var cat = chip.getAttribute('data-cat');
    rows.forEach(function (row) {
      var show = cat === 'all' || row.getAttribute('data-cat') === cat;
      row.classList.toggle('is-hidden', !show);
    });
  });
});

03Media kit download

A press kit template with real checkboxes

Checking any of the three files — logo pack, brand guide, product screenshots — actually enables the download button and appends the count to its label; clicking it draws a checkmark onto each selected row with stroke-dashoffset rather than just swapping an icon.

Media kit download
Open in a new tab

03 · Media kit download — Measured area 0.756% · moving frames 22/23Original by GODRICH · SCSS and React ship in the zip · See the password

checkboxstroke-dashoffsetclick

What the click draws

It suits a media kit section or a brand resource page where a journalist needs to grab more than one asset at once.

.mk::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0;
  height: 3px;
  background: $color;
  animation: mk-scan 2s $easing infinite;
}
.mk__done-ic {
  stroke: $color;
  stroke-width: 2.5;
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
  opacity: 0;
  transition: stroke-dashoffset $duration $easing, opacity $duration $easing;
}
.mk__row.is-done .mk__done-ic { stroke-dashoffset: 0; opacity: 1; }
.mk__btn:disabled { opacity: .4; cursor: not-allowed; }

04Press mentions bar

A track with no visible seam

Eight placeholder outlet marks — flat shapes, not real logos — sit in a track duplicated end to end so a translateX(-50%) loop scrolls with no visible seam, and hovering the strip or tapping the pause button actually freezes it in place.

Press mentions bar
Open in a new tab

04 · Press mentions bar — Measured area 8.057% · moving frames 23/23Original by GODRICH · SCSS and React ship in the zip · See the password

translateX(-50%)animation-play-statepointerenter

Freezing it in place

This is the standard spot for an "as seen in" row or a partner logo bar under a hero.

// the track skips gap entirely — each logo gets margin-right instead
.mb__track { display: flex; width: max-content; animation: mb-scroll $duration $easing infinite; }
.mb.is-paused .mb__track,
.mb__viewport:hover .mb__track { animation-play-state: paused; }
.mb__logo { flex: 0 0 auto; width: 64px; height: 32px; margin-right: $sp-6; }
@keyframes mb-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

05Stat counter

Climbing from zero to target

Three cards' big numbers climb from zero to their real targets — 128, 42, 3,200 — the instant the page loads, run through an eased curve rather than a linear tick, and land exactly on the target with no overshoot.

Stat counter
Open in a new tab

05 · Stat counter — Measured area 2.675% · moving frames 21/23Original by GODRICH · SCSS and React ship in the zip · See the password

requestAnimationFramecounteropacity

Why the digits never jitter

The digits carry font-variant-numeric: tabular-nums so they don't jitter in width while counting, and this fits an "our numbers" block on an about page or a press page's credibility strip.

.sc__card::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0;
  height: 3px;
  background: $color;
  animation: sc-pulse 2s $easing infinite;
}
.sc__card:nth-child(2)::before { animation-delay: 220ms; }
.sc__num {
  font-weight: 800; font-size: clamp(20px, 7vw, 28px); line-height: 1; font-family: inherit;
  color: $subject-cream;
  font-variant-numeric: tabular-nums;
}

06Media contact card

Writing to the clipboard for real

Clicking the email button actually writes the address to the clipboard through navigator.clipboard.writeText(), then draws a checkmark onto the button with stroke-dashoffset before reverting the label 1.6 seconds later.

Media contact card
Open in a new tab

06 · Media contact card — Measured area 3.774% · moving frames 6/23Original by GODRICH · SCSS and React ship in the zip · See the password

clipboardstroke-dashoffsetclick

Reverting after 1.6 seconds

It's built for the "reach our PR team" card that sits at the bottom of a press room or an interview-request section.

.mc__orb--1 { background: radial-gradient(circle, $subject-blue, transparent 68%); animation: mc-drift 8s ease-in-out infinite; }
.mc__orb--2 { background: radial-gradient(circle, $subject-ink, transparent 68%); animation: mc-drift 7s ease-in-out infinite reverse; }
.mc__avatar { background: $subject-ink; border-radius: 50%; }
.mc__copy-ic {
  stroke: $color;
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
  opacity: 0;
  transition: stroke-dashoffset $duration $easing, opacity $duration $easing;
}
.mc__copy.is-copied .mc__copy-ic { stroke-dashoffset: 0; opacity: 1; }

07Founder quote

Two quotes behind two dots

Two founder quotes trade places behind a pair of dots — clicking one runs a real opacity cross-fade between two absolutely-positioned slides, while a large quotation mark keeps wobbling with rotate and scale in the background the whole time.

Founder quote
Open in a new tab

07 · Founder quote — Measured area 0.366% · moving frames 17/23Original by GODRICH · SCSS and React ship in the zip · See the password

opacityclickaria-selected

A quotation mark that wobbles

It's the founder or CEO message block that sits inside a press room or an about page's leadership section.

dots.forEach(function (dot) {
  dot.addEventListener('click', function () {
    root.classList.remove('is-demo');
    var i = dot.getAttribute('data-i');
    dots.forEach(function (d) { d.classList.remove('is-active'); d.setAttribute('aria-selected', 'false'); });
    slides.forEach(function (s) { s.classList.remove('is-active'); });
    dot.classList.add('is-active'); dot.setAttribute('aria-selected', 'true');
    root.querySelector('.fq__slide[data-i="' + i + '"]').classList.add('is-active');
  });
});

08Milestone timeline

Filling the track to a stop

Clicking any of the four stops on the horizontal line actually fills the track up to that point with a real scaleX transform, keyed to the stop's position out of four, and swaps the paragraph above it to that year's text.

Milestone timeline
Open in a new tab

08 · Milestone timeline — Measured area 0.438% · moving frames 7/23Original by GODRICH · SCSS and React ship in the zip · See the password

scaleXclickaria-current

The dot that keeps pulsing

The active dot keeps pulsing with a box-shadow ring the whole time it's selected, which makes this fit a company history section or a press room's "how we got here" block.

.mt__fill {
  position: absolute; left: 0; right: 0; top: 4px;
  height: 3px;
  background: $color;
  transform: scaleX(.25);
  transform-origin: left;
  transition: transform $duration $easing;
}
.mt__stop[aria-current="step"] .mt__dot {
  background: $color;
  transform: scale(1.3);
  box-shadow: 0 0 0 4px rgba(47, 109, 246, .18);
}

09Press footer

A real regex on submit

Submitting the newsletter form runs a real regex check against the typed address rather than pretending to validate.

Press footer
Open in a new tab

09 · Press footer — Measured area 0.578% · moving frames 15/23Original by GODRICH · SCSS and React ship in the zip · See the password

submitstroke-dashoffsetclick

The columns stay put

A passing address draws a checkmark onto the submit button with stroke-dashoffset, while a failing one shakes the input left and right with translateX — the three link columns underneath stay put either way, which is what a press room or media page needs at the very bottom.

.pf__input.is-shake { animation: pf-shake $dur-quick $ease-out; }
@keyframes pf-shake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-5px); }
  75%      { transform: translateX(5px); }
}
.pf__submit { animation: pf-glow 2s ease-in-out infinite; }
@keyframes pf-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(47, 109, 246, .35); }
  50%      { box-shadow: 0 0 0 6px rgba(47, 109, 246, 0); }
}
.pf__form.is-done .pf__check { stroke-dashoffset: 0; opacity: 1; }

Where it breaks — the trap

A background that hid the orbs

The real trap here wasn't an animation at all — it was a background color hiding a decoration sitting right behind it. The media contact card (06) originally had an opaque cream background, and the two drifting orbs behind it sit at z-index: -1, so they were rendering completely behind that opaque layer. Nothing looked broken on screen, but almost no pixels were actually changing frame to frame, which barely counted as motion at all. Removing the card's own background and letting the orbs show directly against the stage color fixed it — a reminder that z-index: -1 only works as a decoration if whatever sits above it is transparent.

Padding that stacked on height

A second, more mundane trap showed up in the release list (02) and the media kit (03) at the 320×200 breakpoint. Both fold rows open and shut with max-height, and without box-sizing: border-box on the folding element, the row's padding stacks on top of the height you set rather than inside it, so a max-height: 30px row with 8px of vertical padding actually renders at 38px. That extra height was invisible at the full 480×300 canvas but pushed the layout into a silent vertical scroll once the width dropped to 320px — adding box-sizing: border-box and trimming the padding inside a @media (max-width: 340px), (max-height: 220px) block cleared it. The mentions bar (04) sidesteps a related trap by design: give a duplicated marquee track a gap instead of margin-right on each item and the seam between the two copies comes up short by gap ÷ 2. Open the zip with 7a6mw6kt typed exactly as it appears here and you'll find every one of the nine already built the way this page describes, margin-right included.

Publishing numbers as pictures only, where no search engine can read them, comes back the moment real data is involved in the dashboard chart interactions.

Accessibility (reduced-motion)

State survives reduced motion

All nine respect prefers-reduced-motion: reduce, and each one keeps its actual state rather than just freezing mid-animation — the release list stays filtered, the timeline's fill bar stays at whatever point it reached, and the stat counter keeps counting up since the number itself carries information, with only its accent pulse turning off.

Native controls and status regions

The media kit's checkboxes (03) are native input[type="checkbox"] elements, so Tab and Space operate them with no extra script, and its result text plus the contact card's copy hint (06) and the footer's submit result (09) all live in a role="status" region with aria-live="polite" so a screen reader announces the outcome the moment it happens. The timeline (08) updates a real aria-current="step" on the active stop, and the founder quote's dots (07) sit in a role="group" with aria-selected tracking which slide is showing.

Clipboard API and its fallback

The clipboard copy in 06 follows MDN's Clipboard API reference and falls back to a hidden textarea plus execCommand('copy') in browsers that don't support it. More layout sections and static templates live on the template category hub, and what this site does and doesn't sell is on the about page.

FAQ

Can I drop real logos and photos into these media page examples?

Yes — the avatar circle, wordmark, and all eight outlet marks are CSS shapes built from this site's own $subject-ink, $subject-blue, and $subject-cream tokens, not real image files, so replacing any of them with an actual <img> or logo file is a straight swap that leaves the layout and JavaScript untouched.

Does the media kit download actually send files, or is it just decorating the click?

The checkbox state, the button's enabled/disabled state, and the per-row checkmark are all real DOM state changes, not a fake animation loop. What it doesn't do is fetch a real file, since the demo has nothing to download — pointing each row at a real asset URL is the only change needed to make it functional.

How different is the React version from the plain CSS one?

The behavior matches. Which chip is active, which files are checked, which quote is showing, and which timeline stop is selected all live in useState instead of DOM attributes and classes, and the three SCSS variables — duration, easing, color — arrive as component props that get forwarded onto the section as CSS custom properties. The stat counter's requestAnimationFrame loop runs inside a useEffect with its own cleanup, so both versions count up in lockstep. When the audience to convince is a customer rather than a reporter, the landing sections that build trust are that set.

Enter the archive password

The password is inside this article. You will find it as you read.