Liberman GonzalezProduct designer · Design engineer
EN / ES

Lab · Interaction studies

Take it apart, build it, push it further

Each study starts from a technique I see in the sites and products I admire. I break it down, write it in my own code and test it where it wasn’t born: in a product people use eight hours a day, or in a different brand.

How every study is built

  1. 01

    The pattern

    Where it shows up, what it solves and why it works.

  2. 02

    How it works

    What moves, what triggers it and what it costs.

  3. 03

    My version

    My own code, built from the analysis, with a live demo.

  4. 04

    Further

    Reduced motion, performance and a move to another context.

The route

  1. Block 1

    Scroll and motion

    The foundation: everything else depends on how the page moves.

    1. 01Smooth scroll and parallaxComing soon
    2. 02Text revealed on scrollComing soon
    3. 03Magnetic button and cursorComing soon
    4. 04Page transitionsComing soon

    Concept siteLanding page for a fictional brand

  2. Block 2

    Galleries and imagery

    How to present other people’s work: projects, products, photography.

    1. 05Hover project gallery
    2. 06Zoom parallaxComing soon
    3. 07Stacking cardsComing soon
    4. 08Sliding imagesComing soon

    Concept siteSite for a creative studio

  3. Block 3

    SVG

    Curves and strokes: from a page loader to a chart.

    1. 09Curved loaderComing soon
    2. 10SVG morphComing soon
    3. 11Stroke on scrollComing soon
    4. 12Curved menuComing soon

    Concept siteA launch with a story

  4. Block 4

    Pixel, canvas and 3D

    Where the DOM falls short: thousands of points, shaders and objects.

    1. 13Pixel transitionComing soon
    2. 14Image distortionComing soon
    3. 15Ripple shaderComing soon
    4. 163D objectComing soon

    Concept siteThe signature moment of this portfolio

Studies

  1. Oct 14, 20264 min readGalleriesIn Spanish

    Atelier Umbral: una galería donde cada proyecto trae su luz

    Diseñé y programé el hero de un estudio de interiores que no existe: el título entra por una máscara, doce imágenes crecen en el centro y se reparten, y al pasar sobre cada proyecto la página toma su luz. Después lo llevé más allá: teclado, pantalla táctil, movimiento reducido y una intro que solo anima transform.