Welcome To Punky!
Small Hero Example
Anchor button
Button anchored to the #destination ID present below
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.
Global components examples
Card 31
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Animi ullam hic cumque id totam adipisci nihil exercitationem eligendi repellendus, blanditiis recusandae molestiae corporis ratione nobis repellat numquam velit eos vel?
Card 31
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Animi ullam hic cumque id totam adipisci nihil exercitationem eligendi repellendus, blanditiis recusandae molestiae corporis ratione nobis repellat numquam velit eos vel?
Collapsify Simple
Collapsify is a simple and lightweight JavaScript library for creating collapsible content sections.
Collapsify Accordion
Accordion version of collapsify.
Second content : Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fugit repellat optio ab fugiat pariatur eius dolores omnis ullam nostrum ad vitae praesentium ex veniam veritatis consequatur, quidem consectetur nemo? Voluptatibus.
Collapsify Tabs
Tabs version of collapsify.
Content First: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores nostrum amet excepturi eum. Quo labore, est inventore incidunt debitis voluptatum qui itaque iste quam, asperiores aliquid illum optio atque quidem.
Marquee Simple
Marquee is a simple using default configuration.
Marquee Different Length & Controls
Marquee with different length items.
Andres Clua
Mara Scampini
Angela Avila Lasanta
Nerea Fontecha
Eli Perez
Gotzon Alava
Diego Viador
Felipe Báguena
Mauro Amestoy
Amaia del Olmo
Lottie Simple
A single Lottie animation running with default settings. Perfect for quick demos or testing new assets.
Modal Simple
Modal is a simple and lightweight JavaScript library for creating modal content sections.
Slider Simple
Slider uses default configuration and has no attributes.
Slider with attributes
Slider uses default configuration and controls items displayed via attribute.
Anchor destination
Slider Variation X
Slider using custom configuration inside handler
Slider Variation Y
Slider using custom configuration inside handler
Text examples
Examples of text variations
hello world
this is a test