Recruitment Agency Template Template
A candid recruitment agency site with a kinetic talent-network hero, live Flip-powered role matching, scroll-drawn method route and full job brief dialog.
About This Template
A complete one-page site for Good People, a fictional specialist hiring studio matching small UK product companies with design, engineering and operations candidates. Its chartreuse-painted ground, deep navy type, peach paper and hand-stamped data marks feel lively and human without turning recruitment into a joke.
The signature live-role board lets visitors build a match profile from native skill, working-style and location toggles. Every role carries real criteria in data attributes and receives a computed percentage; all roles stay readable while Flip moves the strongest matches upward, the numbers roll and three authored SVG paths redraw from the profile to the leading briefs.
The rest of the page stays intentionally direct: an offset type-led hero with an ambient candidate network and seamless principles ticker, a scroll-drawn three-step method with outcome figures, stacked candidate and employer stories, an employer brief call-to-action and a compact contact footer. Buyers can replace the seven role records, edit the three criteria groups or remove any content section without untangling one monolithic animation.
What's Included
- Complete deployable one-page recruitment site with navigation, hero, interactive live-role board, three-step method, quote stack, employer brief and contact footer
- Data-driven role matching across skills, working style and location, with every role receiving a transparent computed score
- GSAP Flip reorders the full readable role list without hiding weaker matches or collapsing the board during rapid choices
- Three SVG connector paths redraw from the selected profile summary to the highest-ranked briefs after every update
- Match percentages and the live-role count roll to their new values with GSAP, while concise live-region copy names the two best matches
- Kinetic hero network combines continuously rotating SVG orbits, floating candidate notes, a pulsing fit score and seamless GSAP ticker
- Native full-job dialog opens from every card by click, Enter or Space and returns focus to its source on close
- Three-step method route draws with ScrollTrigger scrub while a runner follows the exact SVG geometry
- Native toggle buttons support touch, Tab, Space and Enter, with arrow, Home and End navigation inside each criteria group
- Graphic candidate monograms, company stamps, lines and data marks create a complete visual system with no photography or image assets
- Synchronous no-flash JavaScript gate, guarded section initialisers, reduced-motion updates and a useful no-JavaScript role board
- Lenis smooth scrolling is synchronised with ScrollTrigger and remains optional
Perfect For
- Recruitment agencies specialising in product, design, engineering or operations hires
- Executive search and talent partners presenting a curated live-role board
- Internal talent teams that want candidates to compare open product roles
- Small consultancies matching specialists to startups and scale-ups
- Job boards that need ranked discovery without hiding the full market
How It Works
Matching the profile
Each role article carries comma-separated data-skills, data-style and data-location values, while each native toggle carries a group and value. Skills can be combined; working style and location are single choices that can also be cleared. The script gives every open brief a base score, weights selected skill evidence most heavily, then adds working-style and location matches before converting the result to a percentage. The useful starting profile is owned by aria-pressed in the markup, so buyers can change defaults without editing JavaScript.
Reordering every role
On each choice the script captures all role rectangles with Flip.getState, computes and sorts the new ranking, then appends every card back into the same in-flow list. Flip.from animates between positions with absolute disabled, and the list's current minimum height is held until the tween completes, so rapid toggles cannot collapse the board or pull the method section upward. Weaker matches are never filtered out: the top three gain emphasis, while all seven salaries, summaries and criteria remain readable. The SVG connectors remain visible throughout the desktop board so visitors retain the visual link between their profile and the ranked results.
Redrawing the links
An SVG overlays the board and contains three authored paths. After the new order is committed, the script measures the profile hub and each leading role peg relative to the board, writes a cubic path between them, and animates its dash offset so the connection draws toward the match. The match values roll from their previous number to the new percentage on the same update; under reduced motion both the path and number jump straight to their final state.
Opening full briefs
Each role stores its longer team, responsibility and requirement copy in data attributes beside its matching criteria. When the reusable native dialog opens, the script copies that role's visible summary, salary, tags and current score, builds its longer lists, and updates the email subject. Cards receive button semantics only when the dialog API is available; Escape, backdrop click and the close button all dismiss it, with focus returning to the source card.
Access and fallbacks
The controls are real buttons with aria-pressed, visible focus and native touch and keyboard activation, plus arrow, Home and End movement within each criteria group. A polite atomic live region reports only the top two role names and percentages after a deliberate choice. gsap.matchMedia and CSS make every motion layer static when motion is reduced. If GSAP, ScrollTrigger or Flip is unavailable, the synchronous gate is removed: controls and connectors stay out of view, all seven fully detailed briefs remain in their authored order, and every other section is ordinary semantic HTML.