PTENES
01 / Recóleo portal
Recóleo

From used oilto a newenergy.

A portal that turns collection and recycling into a visual story.

The site of a company that recycles cooking oil: in three languages, with a scroll-driven video and a 16-screen panel for the team.An oil-recycling site in 3 languages, with its own dashboard.

Site + panelRecyclingLive

  • Next.js 16.3
  • React 19.3
  • TypeScript 5.9
  • next-intl 4.14
  • GSAP 3.15
  • Tailwind CSS 3.4
  • next-themes 0.4
01 / Recóleo portal
Recóleo

From used oilto a newenergy.

A portal that turns collection and recycling into a visual story.

  • Next.js 16.3
  • React 19.3
  • TypeScript 5.9
  • next-intl 4.14
  • GSAP 3.15
  • Tailwind CSS 3.4
  • next-themes 0.4

The site of a company that recycles cooking oil: in three languages, with a scroll-driven video and a 16-screen panel for the team.An oil-recycling site in 3 languages, with its own dashboard.

Site + panelRecyclingLive

  • Next.js 16.3
  • React 19.3
  • TypeScript 5.9
  • next-intl 4.14
  • GSAP 3.15
  • Tailwind CSS 3.4
  • next-themes 0.4

PortfolioRecóleo

From kitchen to energy

A video that moves with your scroll.

On the site's home page, the story of used cooking oil is told by a video that follows your finger: scroll down and it moves forward, scroll up and it goes back. The screen stays pinned until the scene ends, and each line appears right on its cut. Scroll here to see it.

  1. Every day, litres of cooking oil would go down the drain.
  2. Recóleo collects it, from homes, schools and restaurants all over Brazil.
  3. It treats it under lab control, protecting springs and rivers.
  4. And turns it into energy: biodiesel, and now aviation fuel too.

In the codesrc/components/sections/cozinha-energia.tsx

A page that reacts

The water answers your touch.

The top of the site is a water surface: the mouse (or a finger) moves across and opens ripples, and the letters of a word fall one by one and splash. This one is built the same way, move the pointer, click or tap. It all stops when the device asks for less motion.

Move the pointer or tap the water

  • Water at the top

    A ripple simulation drawn frame by frame, reacting to the mouse and to touch.

    In the codesrc/components/sections/HeroWater.tsx

  • Dust that follows the cursor

    Fine particles that drift away and back as the pointer passes.

    In the codesrc/components/fx/WaterDust.tsx

  • Text that assembles

    Headlines arrive word by word, tied to the scroll.

    In the codesrc/components/fx/TextSplit.tsx

  • Tilting card

    The card follows the pointer and tilts in 3D, like a sign in your hand.

    In the codesrc/components/fx/Tilt.tsx

  • Counting numbers

    The company's numbers climb from zero when they appear on screen.

    In the codesrc/components/sections/pioneirismo-stats.tsx

  • Partners strip

    The logos run on an endless strip; a click opens each one's details.

    In the codesrc/components/sections/partners-marquee.tsx

An oil drop falls on dark water; beside it, three cards: collection, transformation and energy

02/The drop's journey

One drop. A whole journey.

From collection to energy, a visual story that follows the scroll.

01 / Collection02 / Transformation03 / New energyUsed oil is collected
from homes, schools, restaurants
and businesses all over Brazil.The collected material goes
through treatment processes
that prepare it to become
new fuels.The result is biodiesel
and now also aviation fuel
(SAF), driving a more
circular future.

At the end of the journey lies its reason. The site shows it without a speech: you drag the drop and see the same river clean, then with oil poured down the sink. Drag it here, or just scroll, and it moves on its own.

With oil in the water
The clean river
The clean riverWith oil in the water

Drag the drop sideways

Where to drop it off

The nearest point, in two taps.

Anyone with used oil at home wants to know one thing: where to take it. The site lists the collection points and lets you filter by type or search by name. Try it here: the site's 23 points are on the map, each in its category's colour (the map is drawn, with no addresses).

23points listed

  • HouseholdCollection for residents, at home or in the building.
  • SupermarketDrop-off points at partner stores.
  • City hallPublic points, run with city halls.
  • PartnerCompanies and institutions that take the oil.
  • Each point is a recordThe team creates, edits and hides points in the panel; the site updates right away.
  • Search and filter togetherThe typed text and the chosen category add up, just like here.
  • In three languagesCategory names and page texts change with the site's language.

Everything lands in one place

Three forms, one inbox.

A collection request, a question, a résumé: each comes in through its own form, but all land in the same inbox in the panel, tagged with where they came from. The team doesn't hunt for emails, they open the panel and reply. Tap or hover over a funnel to watch the message drip down.

  • Become a Client

    For businesses that want collection.

    What it asks for

    • Company name
    • Tax ID
    • Oil volume
    • Contact
    • Terms accepted

  • Contact

    Questions, praise and general requests.

    What it asks for

    • Name
    • Email
    • Phone
    • Subject
    • Message

  • Work With Us

    For people who want to join the team.

    What it asks for

    • Name
    • Email
    • Area of interest
    • About you

The panel's inbox

Each message arrives with its source; the team organizes it their way.

  • Become a ClientCollection for a restaurant
  • ContactWhere do I take my home oil?
  • Work With UsI'd like to work in the fleet
  • Become a ClientCollection for a building
  • ContactHow does payment for the oil work?
  • Mark as read
  • Favorite
  • Archive
  • Trash
  • Tags
  • Reply by email
Recolito, the mascot: a smiling oil drop

And Recolito in the corner

The mascot opens a WhatsApp chat with ready-made messages. The number and the on/off switch live in the panel.

  • I'd like to book a collection
  • Where do I dispose of oil?
  • I want to become a client
  • A trap for botsA hidden field only bots fill in: their submissions are discarded.
  • A cap on submissionsEach internet address (IP) can only submit a few times per minute.
  • Nothing gets lostEvery message is saved before the "sent" reply.
Monitor and phone showing the Recóleo panel, over a map with golden pins

03/The panel

Operations have their own control centre too.

Content, fleet, franchises and collection points in a panel built for the team.

A collection company changes all the time: a new point opens, a truck leaves, a franchise starts. Here the team updates everything themselves, in three languages, without calling a developer, 16 screens, each one a drum on this shelf. Hover to fill it.

Overview

  • 01DashboardA summary of everything, right at sign-in.
  • 02MessagesThe forms' inbox.

Content

  • 03Home sectionsTurns the 11 parts on, off and reorders them.
  • 04Section editorOne part's text, in 3 languages.
  • 05PagesThe texts on each page.
  • 06NewsThe company's updates.
  • 07PublicationsMaterials to read and download.

Structure

  • 08NavigationThe menu items.
  • 09FooterWhat appears at the foot of the site.

Business

  • 10PartnersThe logos on the home strip.
  • 11FleetThe vehicles and photos.
  • 12FranchisesThe network's units.
  • 13Collection pointsWhere to drop oil off.

System

  • 14SettingsContacts, social and the top notice.
  • 15PasswordChanging the panel password.
  • 16BackupThe copies, with a way back to any of them.
  • A well-kept passwordScrambled with scrypt, using the recipe OWASP recommends.
  • 8-hour sessionAfter that, sign in again; changing the password ends every session.
  • 5 recovery codesFor when the password gets lost, with a cap on attempts per minute.
  • Checked uploadsUploads up to 5 MB, with the real file type checked from its first bytes.
  • Change historyEvery change in the panel is logged (audit).
  • Up to 20 copiesEach collection keeps its last 20 dated versions.

Underneath the site

What nobody sees, layer by layer.

A company site lives on being found, understood and read by anyone. None of that shows on screen, it lives underneath, in layers. Scroll down to let them settle; tap or hover over an item to see its layer.

  1. 3languagesPortuguese, English and Spanish, each with its own address (/pt, /en, /es) and 1,155 texts.
  2. Translation in the panelOne button carries new text from Portuguese into English and Spanish (via the MyMemory service).
  3. Light and darkThe site and the panel have both themes; dark is the default.
  4. 12old addressesThe previous site's pages lead to the new ones (301 redirects): nobody lands on an empty page.
  5. Site mapThe sitemap and robots file tell Google what exists and what to read.
  6. Structured dataThe company is described in schema.org format, so search engines understand who it is.
  7. Less motionAnyone who asks for less animation on their device sees the site still and complete.

The technologies

What it is made of, piece by piece

The corporate site of an oil-recycling company, with its own panel and no database: the content lives in files, written carefully so they never get corrupted. Pick a piece to see what it does here and which file it is in.

16technologies, in 4 layers

Screen

Languages

Data

Integrations

The screens

The whole site, down the pipe.

The site, the panel and the phone, in dark and light themes. Scroll down: the screens run along the pipe and light up as the drop passes. Click one to see it large.

  • The site
  • The panel
  • On the phone
Visit the site

Next project15 / 51

Websites and web experiencesDr. Filipe CarvalhoA physician's professional website with academic credentials, specialties, an article column and a panel to publish contentReact 19.0TypeScript 5.7Tailwind CSS 4.0Framer Motion 12.4← PreviousPraia JeN
Home