Product

VibeVerse

Visit Website

VibeVerse wanted a sleek landing page for their new music discovery app. They needed something bold, modern, and performance-optimized to attract early users and investors.

Client

VibeVerse

Duration

2 weeks

The Problem

The previous landing page lacked storytelling. It was slow, had unclear CTAs, and didn’t convey the brand’s unique audio-first identity.

The Solution

We created a high-impact, scroll-triggered landing experience using GSAP and Next.js. It tells the brand story in sections, features demo videos, and includes a smooth CTA-to-download experience.

Our Role

Product Research & UX Mapping

UI Design System in Figma

Dashboard Layout & Components

Chart.js Integration

Admin Panel Responsiveness

Dev Handoff with Design Tokens

{"blocks":{"dpgnkwmq":{"visibility":true,"collapse":false,"name":"collection","title":"Collection","properties":{"tag":"div","dynamicContent":{"type":"dpwicjy9","collectionType":"droip_cm_gallery","items":4,"current_page":1,"pagination":false,"pagination_type":"numeric","filters":[],"sorting":[],"offset":0,"inherit":true,"gallery":"dpwicjy9"}},"styleIds":["dpkn75lm"],"className":"","source":"droip","children":["dph1a3ig","dp5jf68b","dpni9mcb"],"id":"dpgnkwmq","parentId":"dph6q1vi","stylePanels":{"typography":true,"composition":true,"size":true,"background":true,"stroke":true,"shadow":true,"effects":true,"position":true,"transform":true,"interaction":true,"animation":true},"template_mounted":true},"dph1a3ig":{"visibility":true,"collapse":false,"name":"items","title":"Items","properties":{"attributes":[]},"styleIds":["dpfy7pgh"],"className":"","source":"droip","children":["dp1zi29y"],"id":"dph1a3ig","parentId":"dpgnkwmq","stylePanels":{"typography":true,"composition":true,"size":true,"background":true,"stroke":true,"shadow":true,"effects":true,"position":true,"transform":true,"interaction":true,"animation":true},"template_mounted":true},"dp1zi29y":{"styleIds":["dpgeqdcu"],"visibility":true,"collapse":false,"name":"item","title":"Item","properties":{"tag":"div","attributes":[],"interactions":{"elementAsTrigger":{"element-scrolling":{"preset":[{"data":{"dp1zi29y":[]},"deviceAndClassList":{"classList":[],"devices":[],"applyToClass":false},"name":"","active":true,"maxTime":1000,"livePreviewOn":false,"scrollArea":"viewport","repeat":1}],"textAnimation":[{"data":{"dp1zi29y":[]},"deviceAndClassList":{"classList":[],"devices":[],"applyToClass":false},"name":"","active":true,"maxTime":1000,"livePreviewOn":false,"scrollArea":"viewport","repeat":1}],"custom":[{"data":{"dpak5o89":[{"active":true,"duration":10000,"start":{"x":{"value":"none","unit":"none"},"y":{"value":"none","unit":"none"}},"end":{"x":{"value":1.1,"unit":"x"},"y":{"value":1.1,"unit":"x"}},"easing":"linear","delay":0,"property":"scale"}],"dpak5o89____info":{"applyToClass":true,"styleBlockId":"dpa2dz68","classApplyOnly":"childrens"}},"deviceAndClassList":{"classList":["dpzohsqo"],"devices":[],"applyToClass":true,"styleBlockId":"dpgeqdcu"},"name":"Response","active":true,"maxTime":10000,"livePreviewOn":false,"scrollArea":"viewport","repeat":1,"smooting":100}]}}}},"className":"","source":"droip","children":["dpak5o89"],"id":"dp1zi29y","parentId":"dph1a3ig","template_mounted":true},"dpak5o89":{"visibility":true,"collapse":false,"name":"image","title":"Image","properties":{"tag":"img","noEndTag":true,"type":"href","load":"lazy","hiDPIStatus":false,"width":{"value":"auto","unit":""},"height":{"value":"auto","unit":""},"attributes":{"src":"","alt":"","href":"","target":""},"dynamicContent":{"type":"gallery","value":"dpwicjy9","contentInfo":{"post_id":"15","field_id":"dpwicjy9"}}},"styleIds":["droip_image","dp8t2qap","dpa2dz68"],"className":"","source":"droip","id":"dpak5o89","parentId":"dp1zi29y","stylePanels":{"typography":true,"composition":true,"size":true,"background":true,"stroke":true,"shadow":true,"effects":true,"position":true,"transform":true,"interaction":true,"animation":true}},"dp5jf68b":{"visibility":true,"collapse":false,"name":"pagination","title":"Pagination","properties":{"tag":"div","componentType":"pagination","attributes":{"data-droip-pagination":"pagination"}},"styleIds":["droip_pagination"],"className":"","source":"droip","children":["dp1fdtcz"],"id":"dp5jf68b","parentId":"dpgnkwmq","stylePanels":{"typography":true,"composition":true,"size":true,"background":true,"stroke":true,"shadow":true,"effects":true,"position":true,"transform":true,"interaction":true,"animation":true},"template_mounted":true},"dp1fdtcz":{"styleIds":["droip_pagination_item"],"visibility":true,"collapse":false,"name":"pagination-item","title":"Pagination Item","properties":{"tag":"div","componentType":"pagination","attributes":{"data-droip-pagination":"pagination-item"}},"className":"","source":"droip","children":["dpwe1ogu"],"id":"dp1fdtcz","parentId":"dp5jf68b","template_mounted":true},"dpwe1ogu":{"styleIds":["droip_pagination_number"],"visibility":true,"collapse":false,"name":"pagination-number","title":"Pagination Number","properties":{"tag":"span","componentType":"pagination","attributes":{"data-droip-pagination":"pagination-number"}},"className":"","source":"droip","children":[],"id":"dpwe1ogu","parentId":"dp1fdtcz"},"dpni9mcb":{"visibility":true,"collapse":false,"name":"empty","title":"Empty","properties":{"attributes":[]},"styleIds":[],"className":"","source":"droip","children":[],"id":"dpni9mcb","parentId":"dpgnkwmq","stylePanels":{"typography":true,"composition":true,"size":true,"background":true,"stroke":true,"shadow":true,"effects":true,"position":true,"transform":true,"interaction":true,"animation":true}}},"styles":{"dpkn75lm":{"id":"dpkn75lm","type":"class","name":"dpv16t2u","isDefault":false,"variant":{"mobile":"width:100%;"}},"dpfy7pgh":{"id":"dpfy7pgh","type":"class","name":"dpe6u3m7","isDefault":false,"variant":{"md":"display:grid;column-gap:20px;row-gap:20px;grid-template-columns:1fr 1fr;grid-template-rows:minmax(75px, 1fr);grid-template-areas:\". .\";","mobile":"grid-template-columns:1fr;grid-template-areas:\".\";width:100%;"}},"dpgeqdcu":{"id":"dpgeqdcu","type":"class","name":"dpzohsqo","isDefault":false,"variant":{"md":"height:488px;overflow:hidden;","tablet":"height:260px;","mobile":"height:250px;width:100%;"}},"droip_image":{"id":"droip_image","type":"class","isDefault":true,"name":["droip-image"],"variant":{"md":"max-width:100%;"}},"dp8t2qap":{"id":"dp8t2qap","type":"class","name":"dpehcn5z","isDefault":false,"variant":{"md":""}},"dpa2dz68":{"id":"dpa2dz68","type":"class","name":["droip-image","dpehcn5z"],"isDefault":false,"isComboClass":true,"variant":{"md":"min-width:100%;min-height:100%;max-height:100%;"}},"droip_pagination":{"id":"droip_pagination","type":"class","isDefault":true,"name":"droip-pagination","variant":{"md":"display:flex;justify-content:center;gap:8px;"}},"droip_pagination_item":{"id":"droip_pagination_item","type":"class","isDefault":true,"name":"droip-pagination-item","variant":{"md":"display:flex;justify-content:center;align-items-center;font-size:16px; padding:4px 12px;border: 1px solid #c7c9cb;cursor:pointer;border-radius:5px;"}},"droip_pagination_number":{"id":"droip_pagination_number","type":"class","isDefault":true,"name":"droip-pagination-number","variant":{"md":""}}}}

Explore All