Colony is a single-column fundraising landing page built for feral cat trap-neuter-return (TNR) programs. It guides visitors from a striking problem statement through animated TNR cycle steps, a live donation counter, and named colony stories, arriving at a low-friction "Fund a Fix" donation form. Warm twilight colors and scroll-triggered storytelling make every visit feel purposeful.
by Rocket studio
Loading preview…
Quick summary
Colony is a warmly designed, single-column fundraising landing page for feral cat TNR (trap-neuter-return) programs. It opens with a mosaic hero, moves through animated cause storytelling, and closes with a tangible donation form. The page is built to turn empathetic visitors into donors or volunteers with honest evidence and an unhurried, back-porch tone.
Who this template is for
This template is designed for community-based animal welfare organizations running a feral cat TNR program. It speaks directly to the people who show up before sunrise and to the neighbors who want to help from a distance.
Nonprofit organizations and community groups managing feral cat colonies
Volunteer coordinators recruiting vet techs, retirees, and neighborhood advocates
Animal welfare advocates who need a donation-focused page with a volunteer path
What problem this template solves
Most cause-driven pages ask for money before they earn trust. Visitors arrive unsure whether their donation will make a real difference, and generic forms give them no reason to believe otherwise. Colony solves this by leading with evidence before the ask.
Uncontrolled feral cat populations grow without a visible, credible response
Potential donors leave when a page cannot show concrete outcomes or tangible cost breakdowns
Volunteers have no clear, low-friction way to offer their time alongside a financial contribution
What you get with this template
Colony delivers a complete, single-page fundraising flow from hero to footer. Every section is purposefully ordered to build emotional momentum before asking anything of the visitor.
A Community Mosaic hero with a photo-grid cat silhouette and a fade-in headline
An animated four-step TNR cycle explanation with scroll-triggered step reveals
A "Fund a Fix" donation form with preset amounts, descriptions, a custom field, and a monthly recurring toggle
Feature list
Theme
Community Hearth
Creative direction
Movement & Cause
Color system
Cloud Canvas
Style
Single Column Flow
Direction
Donation/Fundraising
Page Sections
Community Mosaic Hero Grid
Animated Four-step TNR Cycle
Real-time Living Counter
Named Colony Story Cards
Low-friction Fund a Fix Form
Volunteer Secondary Call to Action
Related questions
Can I change the preset donation amounts in the Fund a Fix form?
Does the template include both a donation form and a volunteer sign-up path?
Is the live counter connected to a real database automatically?
Can I replace the example colony stories with my own program's locations?
Is this template practical for a small community TNR group, not just large nonprofits?
This template bundles storytelling structure, animated interactivity, and a conversion-ready donation form into one cohesive layout.
Community Mosaic Hero Grid
The header is built as a grid of candid photographic tiles that together form the silhouette of a cat's face. Individual tiles show gloved hands, ear-tipped cats, volunteer headlamps, and clinic whiteboards. A single headline fades in over the mosaic as the page loads.
Scroll-Triggered TNR Cycle Steps
Four animated steps explain the trap-neuter-return process and animate into place as the visitor scrolls down. Each step is warmer in tone than the previous, guiding the reader from urgency toward hope.
Live Donation Counter
A real-time counter sits midpage and ticks upward, displaying the number of cats trapped, fixed, and returned during the current year. The counter uses a tick-up animation to make program progress feel immediate and alive.
Named Colony Stories with Population Charts
Individual colony locations, such as "The Rosewood Lumber Yard Seven," are presented with before-and-after population stabilization charts. These named stories serve as grounded social proof that the TNR method works over time.
Low-Friction Donation Form
The "Fund a Fix" form offers three preset donation amounts with pre-filled descriptions ($35 spays one cat, $80 covers a full cycle, $250 sustains a feeding station for a season), a custom amount field, and a single monthly recurring toggle. Only name, email, and payment are required.
Volunteer Secondary Path
Below the donation form, a secondary call to action reads "Can't donate? Volunteer a morning." It links to a simple sign-up form asking only for zip code and availability, keeping the barrier low for hands-on contributors.
Page sections overview
Section
Purpose
Mosaic Hero
Display cat silhouette photo grid with fade-in headline
Problem Statement
Present a single statistic and one unflinching colony photo
TNR Cycle Steps
Animate four scroll-triggered steps explaining the process
Living Counter
Show real-time year-to-date cats trapped, fixed, returned
Colony Stories
Feature named locations with population stabilization charts
Fund a Fix
Deliver the donation form with presets and volunteer path
Footer
Close with a single linear row of essential links
Design & branding system
Colony uses a Community Hearth theme built on a Cloud Canvas color system. The palette feels lived-in and patient, like a wool blanket beside a screen door at dusk.
Soft porch-light cream (#FAF3EB) dominates the background, warm hearthstone (#C4956A) activates every button and callout card, weathered fence gray (#7D8491) grounds section dividers, and deep dusk navy (#2C3345) carries body text
Typography pairs DM Sans for readable body copy with Fraunces serif headings, giving the page a warm, unhurried character
The visual tone moves from urgency to evidence to hope, so the emotional temperature rises steadily as the visitor scrolls
Mobile & speed optimization
Colony is built mobile-first, because volunteers check updates on their phones in parking lots at 5 AM. Every interaction and animation is designed to hold up on a small screen.
Intersection Observer powers scroll-triggered reveals and counter animations, keeping the page responsive without heavy scripts
CSS smooth scroll handles in-page navigation cleanly, and the layout follows a single-column flow that stacks naturally on any screen size
The floating "Fund a Fix" call-to-action button appears after the second scroll and stays accessible on both mobile and desktop
How this template helps you convert
Colony is structured to earn trust before it asks for anything. The emotional arc does the persuasion work so the donation form feels like a natural next step, not an interruption.
The page opens with a striking mosaic hero and a problem statistic, immediately establishing why the cause matters and that real people are behind it.
The living counter and named colony stories provide concrete, year-specific evidence that donations produce measurable outcomes, making the case before the form appears.
The "Fund a Fix" form breaks costs into tangible units with pre-filled descriptions, reducing hesitation by showing exactly what each dollar does, while the volunteer path gives non-donors a way to stay connected.
Other information about this template
Colony is a single-column flow landing page suited for community nonprofit campaigns that need warmth, evidence, and a clear path to giving. A few additional details worth noting:
The template is localized for USA audiences, using USD currency and MM/DD/YYYY date formatting
The marquee animation and mosaic tile stagger add visual energy without requiring heavy third-party libraries
The footer follows a Pattern 1 Linear Single-Row layout, keeping the close of the page clean and uncluttered
The page style is described as "back porch at twilight" in the design brief, a tone that favors patience and trust over urgency and pressure
