Gribouille — Online courses template

The 10 effects in this site

Progress BarFree
Yellow progress bar at the very top of the page, on the header (fills as you scroll, like progress through a course)
Bounce In LettersPremium
Hero headline “You can draw. Yes, you.”, whose letters bounce in one by one on load
Mouse Parallax SceneFree
Hero composition (sketchbook photo, blue circle, red half-moon, green triangle, stickers) that shifts with the cursor
Alternating RowsPremium
Black band below the hero: two rows of words (subjects, then verbs) scrolling in opposite directions
Layered PaperPremium
The six course cards: each card is a stack of three black-edged sheets, the two underneath fan out on hover
Slide In CardsPremium
“The syllabus” section: the eight modules slide into place on scroll, odd ones from the left, even ones from the right
Counter Animation CSSPremium
Black key-figures section (860 students, 212 h, 97%): three pure-CSS counters that count up when the section comes into view
Duotone Image FilterPremium
Portraits of the three teachers, shown in duotone (blue, red, green) and back to their true colours on hover
3D PressPremium
All primary buttons (hero, header, pricing, form): thick edge that presses down on click
Morph TransitionPremium
“Questions” section: each answer pops in under its question with a morph (circle → block, with a bounce), and leaves the same way

Screenshots

Click a screenshot to see it full size.

Photos: Unsplash (Unsplash License). Names, addresses and figures are fictional.

Frequently asked questions

What kind of business is the Gribouille template for?

It was designed for businesses such as: online school or course, drawing, music or language lessons, independent trainer, creative workshop.

Which effects does Gribouille use?

10 effects from the Effect.Labs catalogue, 2 free and 8 Premium: Progress Bar, Bounce In Letters, Mouse Parallax Scene, Alternating Rows, Layered Paper, Slide In Cards, Counter Animation CSS, Duotone Image Filter, 3D Press, Morph Transition. Each one has its own page with a demo and its code.

What do I get, and how much does it cost?

The whole site is shown in the video and screenshots; it is not sold. What you take away are its effects: the “The 10 effects of this template” button adds the Premium ones to your cart, picking the cheapest pack for you, and saves the free ones to your favorites. One-time payment, no subscription; a free account includes 1 Premium effect on us.

How do I use these effects on my website?

Each effect is plain HTML, CSS and JavaScript with no framework or dependency: paste it into any site that accepts custom code (plain HTML, WordPress, Webflow, React, Vue…). You keep your own text, colours and photos.

Does the site work on mobile?

Yes: it is checked on desktop and mobile, in English and French, and its animations are toned down for visitors who asked for reduced motion.