Side Panel example
Why Punky
Punky is an evolution of our previous framework, Membrillo — a full upgrade designed to provide a clear roadmap for every use case and support ongoing growth. It also brings significant improvements in page speed and overall performance.
If you believe there’s anything missing or unclear, please reach out to Eli, Nerea, or Mara, who are directly involved in shaping the roadmap for this project.
Speed
Built with efficiency at its core — everything loads and runs faster, no matter the scale.
Performance
Engineered for seamless performance — optimized to deliver a smooth, lightning-fast experience.
Reference
Comprehensive and practical — includes examples for nearly every scenario to help you move quickly.
Side Panel — Responsive (default)
Horizontal on desktop, vertical on mobile. First panel starts open. Titles hide when active.
We are a creative studio focused on building digital experiences that push boundaries. Our team combines strategy, design, and technology to deliver projects that matter. From brand identities to complex web applications, we approach every challenge with curiosity and craftsmanship.
Side Panel — Horizontal with custom easing
Always horizontal. Faster animation (0.3s), custom ease, second panel starts open, titles visible.
This variation uses direction: "horizontal" forced via JS config. No responsive styles are applied, so it will not adapt on smaller screens.
We write code that is clean, performant, and maintainable. Our front-end stack evolves with the industry, but our principles stay constant: semantic HTML, accessible interfaces, progressive enhancement, and animations that delight without distracting. Performance is a feature, not an afterthought.
Side Panel — Scrollable content
Tall content inside each panel that overflows and scrolls within the body area.
Our philosophy is rooted in the belief that great digital products are born from the intersection of empathy, craft, and systems thinking. We don't start with technology — we start with people. Who will use this? What do they need? What frustrates them today? Only after we understand the human context do we begin to think about interfaces, interactions, and infrastructure. We believe that constraints breed creativity. A tight deadline, a limited budget, a tricky technical requirement — these are not obstacles, they are design inputs. The best work happens when the team is forced to prioritize ruthlessly, to strip away everything that doesn't serve the user, and to find elegant solutions to messy problems. Collaboration is not a buzzword for us. It's the operating model. Designers sit with developers. Strategists sit with both. We share work early and often, before it's polished, before it's ready. The feedback loop is tight because the cost of late changes is high and the value of early alignment is immense. We care deeply about accessibility. Not as a checklist item, not as a legal requirement, but as a fundamental design principle. If someone can't use what we build, we haven't done our job. Screen readers, keyboard navigation, color contrast, motion preferences — these are first-class concerns, not afterthoughts. Performance is another non-negotiable. A beautiful interface that takes five seconds to load is a failed interface. We measure, we optimize, we set budgets. Every kilobyte of JavaScript, every render-blocking resource, every layout shift — they all matter. Speed is a feature, and it's one that benefits every single user. Finally, we believe in shipping. Perfection is the enemy of progress. We'd rather launch something good and iterate than polish something perfect that never sees the light of day. The real world is the best testing environment, and real users are the best critics.