Manufacturing Company Website Template

£29

The business, people and figures in this demo are made up for the example. Any resemblance to a real company is a coincidence.

A six-page website for a manufacturing or chemicals company, set on warm bone paper with oxblood and charcoal flats, one acid-yellow accent, and every photograph graded in CSS from oxblood shadows to bone highlights. The home page crosses a huge purity figure over a tall photo column; visitors drag a reactor dial along a yield curve into its optimum band, open full-width process panels, pick sites on a real road map and plan an order by product, grade and tonnes. Worked example: a specialty chemicals maker on Teesside.

ScrollTrigger advanced

18 more details

filterstate-transitionclick-toggletabstheme-switchkeyboard-navigationfocus-managementdialog-animationsvg-line-drawsvg-animationview-transitionsscroll-revealstaggerprogressive-enhancementinteractive-mapreal-maprange-inputpointer-tracking

Released 4 November 2026

About this template

A six-page site for a company that makes things in tonnes and wants its figures to do the talking: a chemicals or materials producer, a contract manufacturer, a food or ingredients plant, an energy or battery materials startup. The page is warm bone paper with charcoal type. Colour comes from flat blocks of oxblood and charcoal, one acid-yellow accent kept for actions and markers, and a single photographic treatment that grades every picture from oxblood shadows to bone highlights.

Read the full template overview

The grade is done in CSS, after a contrast lift, so a buyer's own photographs join the set as soon as they are dropped in. The home page opens on one huge figure, 99.99%, set across a tall graded photo column: where the numeral crosses the photograph it turns from charcoal to bone. Below it, visitors drag a reactor temperature dial along a reaction curve; yield and purity update, a marker rides the curve, the photograph brightens with the heat, and the status changes as the batch reaches its optimum band and passes it.

Each inner page has its own hands-on piece: a numbered process index whose rows open full-width colour panels with ruled spec tables, a site list driving a real MapLibre map with the actual road routes between works, jetty and store, sector tabs that flip the page between bone-on-oxblood and oxblood-on-bone, crew photographs that slide up a card naming what each person looks after, and an order planner that turns product, grade and tonnes into batches, loads and delivery dates.

To make it yours, change the grade pair and the four flat colours in the token block, replace the photographs and copy, and edit the settings in the script: the reaction curve and its band, the site points and routes, and the planner's batch sizes, loads and lead times. The business, people and figures are fictional.

Manufacturing Company - website template preview

What's included

15 items

Six plain pages (home, technology, sites, applications, company with careers, contact) sharing one stylesheet and one script, with a short cross-page fade where browsers support it
Two-tone photograph grade in pure CSS: greyscale with a contrast lift, a multiply layer and a screen layer map black to oxblood and white to bone, so any replacement photo matches with no editing
Headlines that change colour over a photograph: charcoal on the paper, bone or acid where they cross a graded photo column, on the home hero, every inner page head and the home closing band, each with its own column
On the home hero the photo column follows a mouse like a window over a panorama of the works at dusk, turning up the distillation columns, the lit tanks or the pylon as it slides; the intro and figures panels keep it following
Run the reactor: a native range dial (drag, touch, arrow keys, Page Up and Page Down, Home and End) moves a marker along a yield curve, updates temperature, yield and purity, brightens the photograph with heat and reports whether the batch is too cold, in its optimum band or too hot
Inner pages open on a headline crossed by a full-height photo column standing on an oxblood strip of three figures; on the home page a closing column slides across its line as you scroll
Technology: a numbered process index whose rows each open a full-width colour panel with a photograph and ruled spec table, one at a time, with deep links such as technology.html#spec-catalysts
Sites: a site list driving a MapLibre map on OpenFreeMap tiles, with the real road routes between the sites drawn in and fitted as each site is chosen; arrow keys step through the list
Applications: four sector tabs that flip the whole stage between bone-on-oxblood and oxblood-on-bone, each with its own claim, list, photograph and figure
Company: crew photographs where hover, focus or tap slides up a colour card with name, role and what they look after, plus a ruled list of open roles
Contact: product and grade tile radios and a tonnes slider computing batches, loads, first and last delivery dates and delivery slots from settings in the script
Line drawings of a distillation column and a reactor that draw themselves once and bleed off the page edge
Phone navigation: a Menu button opens a full-screen ruled list of pages with the current page in acid, Escape and outside-click close and focus kept inside
Self-hosted Lexend and Ubuntu Sans Mono, no Google Fonts request
Complete without JavaScript or GSAP: every process panel and sector panel lists in full, the reactor shows its starting readings and the optimum band, and a Pages link reaches the footer index

Perfect for

5 use cases

Chemicals, materials and ingredients producers selling by grade and tonnage
Manufacturing companies and contract manufacturers with a plant to show
Battery materials, hydrogen and other energy hardware companies
Food, pharmaceutical and biotech process manufacturers
Industrial and engineering firms with sites, depots or terminals to map

How it works

5 sections

A photo grade any photograph joins

Every photograph sits in a small wrapper that greys it, lifts its contrast, multiplies it over one colour and screens the shadow colour on top. The result is a straight two-colour gradient map from oxblood to bone, so a buyer swaps the image file and it arrives graded. The two colours are tokens, and the stylesheet comment gives the formula for choosing a new pair.

Type that changes colour over a photograph

Every big headline turns from charcoal to bone or acid exactly at the edge of a photo column, at any width and without JavaScript. Each page sets its own column: which side it stands on, how wide it is and which colour the type takes inside it. On phones the columns widen and the type wraps, and the split still lines up. One closing column on the home page slides across its line with scroll, and holds still for reduced motion.

A dial on a real curve

The reactor dial is a native range input, so it drags, takes touch and answers the arrow, Page Up, Page Down, Home and End keys. Yield and purity come from two functions in a settings object, which also define the optimum band; the chart's curves are drawn from the same numbers. The photograph's brightness and contrast follow the temperature, and reduced motion jumps straight to each reading.

Settings in the script drive the hands-on pages

Sites carry a point and the real road route from the works, stored as longitude and latitude pairs; the map draws and fits them. The planner reads batch and load sizes per product and a batch factor and lead time per grade, then counts working days from today. Process panels and sector panels are ordinary markup, so their text is edited in the HTML.

Plain pages that degrade to documents

Each page loads normally and runs only the features it contains, so pages and sections can be removed freely. Without JavaScript or GSAP the process panels and sector panels list in full, the reactor shows its starting readings, the map keeps a link to OpenStreetMap and the footer index reaches every page.

Plugins ScrollTrigger

Difficulty Advanced

Includes HTML + JS + CSS source, documentation, AI setup prompt, lifetime updates

Lighthouse, as measured

Google Lighthouse on this template's demo (6 pages, lowest score shown), from the latest scan. A measurement of the demo as shipped, not a promise for your page.

Accessibility: 100
Best practices: 100

No performance score, on purpose. That figure depends on how you deploy: your server's compression and caching, your CDN, the connection and the device doing the test, none of which the code controls. The same page can score very differently on two consecutive runs, so measure it where it will live.

Questions about this template

Which kinds of company does this design suit besides a chemicals maker?

Any business that produces in volume and sells on specification: a materials or ingredients producer, a contract manufacturer, a battery materials or hydrogen company, a food or pharmaceutical process plant. Rename the three product families, rewrite the sectors and sites, and swap the photographs; the grade makes your pictures match. The reactor dial can become any process window, such as a cure temperature or a mixing speed.

Do my photographs need editing to get the oxblood and bone look?

No. The grade is applied in CSS to whatever photograph is in each frame, after a contrast lift, so ordinary colour photos are converted on the page. Pictures with clear light and shadow work best. To change the two colours, edit the shadow and base tokens at the top of the stylesheet; the comment there explains how to work out the base for any highlight colour you want.

Does the contact form or the order planner place an order?

No. The contact page is a static front end. It collects the product, grade, tonnes, name, company, email, topic and a message, and the batches, loads and delivery dates are calculated in the browser from settings in the script. Nothing is sent or reserved until you connect the form to a service such as Formspree, Netlify Forms or your CRM.

How do I change the reactor dial to show my own process?

The dial's range, starting value and labels are attributes in the home page markup, and the curves come from a small settings object in the script: the peak, its height and width, and the band limits. Change those and redraw the two curve paths in the chart to match, or keep the chart and relabel it. The status messages for too low, in band and too high are a list beside them.

Can the sites map show my own factories and depots?

Yes. The map is MapLibre on free OpenFreeMap tiles with no API key. Each site in the script has a point and, optionally, the road route from your main site as a list of longitude and latitude pairs, which a free routing service can produce. The site list buttons on the page carry the text for the detail card, so edit those alongside.

Can I add or remove rows in the technology process index?

Yes. Each row is a link in the index plus a matching panel section further down the page, joined by name. Add both, or delete both, and the script finds them on load. Panels open directly beneath their own row, and deep links such as technology.html#spec-catalysts open the named panel on arrival, which the home page product list uses.

The Vault opens this source and the whole library.

Each product gives you the HTML, CSS and JavaScript source, the full documentation and an AI setup prompt, licensed for unlimited personal and commercial projects. Every paid product is tested for desktop and mobile layouts, reduced-motion handling, animation cleanup and keyboard controls wherever there is something to operate.

£99 Get the Vault See what you get

One payment, over 300 products, and future additions to the library.

Documentation

Quick Start

Unzip the folder and open index.html in a browser, or serve the folder with any static server.
Each page is a complete HTML file: index.html, technology.html, sites.html, applications.html, company.html, contact.html. They share assets/style.css and assets/script.js.
Upload the whole folder to any static host. There is no build step.

Using It With Your Own Design

Colours: every colour is a token at the top of assets/style.css. --ground, --bone, --oxblood, --charcoal and --acid paint the page; --tt-shadow and --tt-base paint the photographs (see Palette).
Photographs: replace the files in assets/img/ with your own at the same names and proportions, and update the alt text and captions in the HTML. You do not need to colour them: the page grades them.
Type: Lexend for display and reading, Ubuntu Sans Mono for labels, both bundled in assets/fonts/. Change --font-display, --font-body and --font-mono, and the @font-face blocks, to swap them.
Copy: all text is plain HTML. The settings that drive behaviour (the reaction curve, sites and routes, planner sizes and lead times) sit at the top of each feature in assets/script.js.
Removing things: every feature looks for its own markup and does nothing if it is missing, so any section or page can be deleted. Remove a page's links from the header, the menu sheet and the footer index in each HTML file.

Pages and Configuration

Navigation

The header is an ordinary bar: the brand, four page links with small index numbers, and an acid Contact button. Mark the current page with aria-current="page" on its header link, its menu row and its footer link. Under 960px the links give way to a Menu button (data-menu-open) that opens the full-screen sheet #site-sheet, a ruled list of every page. It closes on Escape, the Close button or a click outside the links, and returns focus to the Menu button. Without JavaScript the Menu button is replaced by a Pages link to the footer index (#site-index).

Pages are ordinary page loads. @view-transition { navigation: auto; } gives a short crossfade in browsers that support it; it is switched off for reduced motion.

Cross headlines

The big headlines change colour where they cross a photo column: charcoal on the paper, bone or acid inside the photograph. One pattern, .cross, does it everywhere (the home hero, every inner page head and the home closing band). A .cross block holds the real heading (.cross__type), the graded column (.cross__photo) and an aria-hidden copy of the heading (.cross__type cross__ghost) that is clipped to the column. The copy's words live in its data-mark attribute (on each line's <span> in the home hero) and are drawn by CSS, so screen readers and contrast checks only meet the real heading. Both copies sit in the same grid cell under the same type rules, so they wrap identically at every width and the split is plain CSS: it works without JavaScript and on phones. If you edit a headline, edit the heading and the copy's data-mark together.

Each placement is set with custom properties on the block or in a modifier class such as .cross--sites: --cross-l and --cross-w (the column's left edge and width), --cross-in (the type colour inside the column, bone or acid), --cross-scrim (the oxblood scrim over the photo), --cross-pos (which part of the photo shows) and --cross-size, --cross-lh, --cross-ls, --cross-align and --cross-pad-y for the type. Keep horizontal padding off the block itself: pad the type instead.

Add data-cross-scrub to a block and set --cross-from and --cross-to to make the column slide across the headline as the block scrolls past (the home closing band does this). With reduced motion, or without JavaScript, the column rests at --cross-l.

The home hero

The hero is a .cross placed in container units of .hero-wrap from four variables: --col-l and --col-w (the column's left edge and width) and --hl-l and --hl-t (the headline's position). Keep the figure short: it is sized to about a fifth of the page width.

The hero's column is a window rather than a framed picture: its photograph is as wide as the whole hero and stays put while the column moves, so following the pointer reveals other parts of the scene. Use a wide landscape photograph here, with something worth finding across its whole width.

Inner page heads

Each inner page opens with a .cross holding three rows (kicker, headline, lede) over .page-hero__figs, three figures on an oxblood strip. On wide screens the photo column runs from the header down onto the strip, and --cross-meta: end moves the kicker and lede to the right when the column is on the left. On phones the column spans only the headline. Each page has its own column in its modifier class (.cross--tech, .cross--sites, .cross--apps, .cross--company, .cross--contact).

Run the reactor (Home)

[data-reactor] holds the dial (data-dial, a native range input), the chart (data-curve), the readouts and the status line. The REACTION settings in the script set the peak temperature, peak yield, curve width, best purity and the optimum band; yieldAt and purityAt beneath them are the two curves. The chart's two <path> elements were drawn from the same numbers: if you change the settings, redraw those paths (or plot your own curves) so the marker still rides the line. The data-x0, data-x1, data-y0, data-y1, data-tmin and data-tmax attributes on the chart tell the script its plotting area. STATUS holds the messages for each state. The photograph's brightness and contrast follow the dial. Reduced motion updates the readings instantly; without JavaScript the starting readings and the band stay on the page.

Process index (Technology)

Each row in [data-parts-grid] is a link to a panel with the matching id (href="#spec-catalysts" and id="spec-catalysts"). With JavaScript, clicking a row opens its panel directly beneath it, closing any other; without it, all panels are listed below the index. Deep links such as technology.html#spec-catalysts open that panel on arrival. Panel colour comes from the t-oxblood, t-charcoal or t-bone class on the section.

Sites map (Sites)

The site buttons (data-site) carry the text for the detail card in data- attributes. The SITES list in the script, in the same order, gives each site its point [longitude, latitude], its map label and the key of its route in ROUTES. ROUTES holds real road routes from the main site as [longitude, latitude] pairs; any routing service that returns GeoJSON lines can produce them. The map uses MapLibre on OpenFreeMap tiles (no key or account), loads only when the section nears the screen, scrolls the page with one finger and the wheel unless Ctrl/Cmd or two fingers are used, and keeps a link to OpenStreetMap if it cannot start. Arrow keys, Home and End step through the list.

Sectors (Applications)

Each sector tab (role="tab", data-sector) carries data-theme="oxblood" or data-theme="bone", and selecting it flips the whole .stage to that colourway. Add a sector by adding a tab and a .sector-panel with the same id. Links such as applications.html#batteries open that sector.

Crew (Company)

Each .crew__tile is a focusable figure whose caption is the sliding colour card. Hover and keyboard focus slide it up; a tap pins one open on touch screens. Card colour is the t-* class on the caption. Open roles are a plain list; each Apply link goes to contact.html?topic=careers, which preselects the topic.

Order planner (Contact)

PRODUCTS in the script sets each product's batch size and load size (in tonnes) and what a load is called; GRADES sets each grade's batch-size factor and lab lead time in working days; SCHEDULE sets loads per day and batches per day. Delivery dates count Monday to Saturday from today. Change these to model your own capacity, packs and lead times.

Palette

Token	Value	Role
`--ground`	`#F4EEE3`	Page ground
`--bone`	`#EDE3D1`	Pale blocks, text on dark
`--oxblood`	`#4A1219`	Blocks, numerals, figure strips
`--charcoal`	`#1E1A17`	Ink, dark blocks, footer
`--acid`	`#EAF04A`	Buttons, markers, the in-band status. Never text on the light grounds
`--tt-shadow`	`#4A1219`	Photo grade: what black becomes
`--tt-base`	`#E6E1CC`	Photo grade base, chosen so white becomes `#EDE3D1`

The photo grade is a greyscale image with a contrast lift (--tt-contrast), multiplied over --tt-base, with a screen layer of --tt-shadow on top. Black maps exactly to the shadow colour and white exactly to the highlight. To choose a new pair, work out the base per channel (0 to 1) as (highlight - shadow) / (1 - shadow). --tt-brightness pushes a photograph darker or lighter; the reactor photograph changes it with the dial.

Measured contrast is recorded in the comment at the top of style.css. Acid only ever carries charcoal type or sits on oxblood or charcoal; keep that rule if you change the colours.

Images

The photographs are optimised WebP files in assets/img/, at two sizes each for responsive loading. They were generated for this template (AI imagery, not stock) and are licensed to you with it. None contains words, logos or brands. Captions and alt text describe what each picture shows; update them when you replace a file.

Files	Shows	Used on
`hero-column-*`	A distillation column at dusk	Technology
`reactor-sight-*`	Liquid behind a reactor sight glass	Home reactor and products, Technology
`reactor-hall-*`	Four reactors and an operator	Home record band, Technology, Company
`plant-dusk-*`	The works at dusk	Home hero, Company
`terminal-*`	A tanker ship at a river jetty	Sites
`loading-bay-*`	A road tanker being loaded	Sites, Contact
`qc-lab-*`	Two chemists in the lab	Home, Technology, Applications
`crystals-macro-*`	White crystals on a dish	Home, Technology
`sector-*`	Weighing powder, a paint drawdown, an electrode line, a crop sprayer	Applications
`team-*`	Three people at work	Company

Keep the same proportions when replacing a file, or change the width and height attributes to match. Photographs with clear light and shadow grade best.

Accessibility

Real buttons, links and form controls throughout, with visible focus rings for keyboard users only.
Phone menu: aria-expanded and aria-controls, focus moved in and returned, Tab kept inside while open, Escape and outside click close.
The reactor dial is a labelled range input with a spoken value that includes yield, purity and whether the batch is in band; the status line announces changes of state only.
Tabs follow the tabs pattern with arrow keys; the site list steps with arrow keys, Home and End.
Reduced motion: no entrance, reveal or drawing animation, instant readings and map moves, no cross-page fade.
Without JavaScript or if the animation library fails to load, every page reads as a complete document.

Dependencies

GSAP 3.15.0 core and ScrollTrigger from jsDelivr (works with GSAP 3.12+).
MapLibre GL 4.7.1 from unpkg, sites page only, loaded when the map nears the screen.
OpenFreeMap map tiles (OpenStreetMap data, no key). Keep the map attribution.

Fonts

Lexend (400 to 700) and Ubuntu Sans Mono (400 to 500), Latin subsets, self-hosted in assets/fonts/ under the SIL Open Font License (assets/fonts/OFL.txt).

Teardown

Pages load normally, so nothing needs cleaning up between pages. The scroll animations live in one GSAP context stored as window.gsapContext; call window.gsapContext.revert() if you embed the page in an app that removes it without a page load.

Also in your download: the full source, worked examples, the events and programmatic API, and the class reference.

£29