A studio that makes playful work has to look like it can. Pixelfrog opens on a deep forest green, an orange that does not apologise, and a wall of Rubik Black set at display size — then puts a running ribbon of type on a curved path across the middle of the page and lets the work do the rest. Pixelfrog is a hand-coded HTML template for creative digital agencies, design studios and portfolios that want personality without giving up structure.

Built with clean HTML5, CSS3 and vanilla JavaScript, Pixelfrog ships a complete site: a portfolio with five full case studies and click-to-zoom galleries, a six-article design blog, a services page whose four rows take turns as you point at them, a team rail that swaps its portrait as you move down it, two pricing plans with their own pages, and a scroll-driven statistics section — with no jQuery, no GSAP, no framework and no build step.

Whether you run a design studio, a UI/UX consultancy, a branding practice or an independent portfolio, Pixelfrog provides every page and component needed to show the work, explain the process and start the conversation.

Designed for Studios With Something to Show

Pixelfrog is organised around the way a client actually decides: what have you made, how do you work, and what does it cost. The projects page and the home page's works strip lead to five case studies, each with its own description, concepts section and image gallery. The services page fans three tilted cards in from the edges as you scroll and hands its open row to whichever service you point at; the process section stacks three cards and then fans them apart; the about page counts its statistics up and slides six framed photographs together.

With a palette of forest green, warm cream and a signal orange, Rubik for display and Inter for text — both self-hosted as woff2, both the cut the design was drawn with — every section rises into view as you reach it, and four running ribbons of type follow a curved path across the page without a single line of library code.

Key Features

• Bold design in forest green, cream and signal orange
• Fully responsive across all devices
• Built with HTML5, CSS3 and vanilla JavaScript
• No jQuery, no GSAP, no frameworks, no build step
• 25 pages including 13 project, blog and plan pages
• Five project case studies with click-to-zoom galleries
• Six full-length blog articles, each with its own body
• Two pricing plans with their own detail pages
• Scroll-driven statistics that count up and take turns
• Process rail that stacks three cards and fans them apart
• Services rail that hands its open row to your pointer
• Team rail that swaps its portrait as you move down it
• Four running type ribbons on a curved SVG path
• Five seamless marquee bands and nine rotating badges
• Testimonial slider and a six-card blog rail, both infinite
• Word-by-word heading that darkens as you scroll past it
• FAQ accordion that opens on click and on the keyboard
• Full-screen nav panel with a plus-to-cross hamburger
• Contact page with a labelled enquiry form
• Password-protected, 404, style guide, licence and changelog pages
• Cookie banner that remembers the visitor's choice
• Self-hosted web fonts, no third-party requests
• Every animation stops under reduced-motion settings

Perfect For

• Creative and digital design agencies
• Brand and identity studios
• UI/UX and product design consultancies
• Illustration and visual design practices
• Independent designers and small collectives
• Web design shops with fixed-price offers
• Portfolio sites that need a real case-study page
• Any studio that shows work and explains a process

Performance & User Experience

Pixelfrog ships as one stylesheet, one script and its own fonts. There is no runtime to boot, no framework to parse and no third-party request on any page. Images are served in modern formats at the sizes the layout asks for, every scroll-linked effect is CSS driven by a single custom property, and the whole of the site's behaviour is thirty kilobytes of readable, commented JavaScript.

Every interaction is a real control. The navigation, the accordion, both sliders, the galleries and both forms are buttons a keyboard can reach and a screen reader can name, each page has a skip link and exactly one H1, and every animation stops when the visitor's system asks for less motion. With JavaScript switched off the whole site still reads.

Why Choose Pixelfrog?

Pixelfrog gives a creative business the three things its site has to do — make the work look worth commissioning, explain how the studio works, and start a conversation — in code clean enough to hand to any developer, with no framework to learn, no build to run and nothing to keep up to date.