← Back to the archive
HOW IT WORKS
Discover. Explore.
Make it yours.
From discovering a work to choosing materials and using your files, these four steps help you bring ZUFU into your own creative process.
01
Find an expression
Start with a movement, layout, or atmosphere you would like to bring into your own work. Explore the collection and find a starting point for your next project.
- Browse by category or keyword
- Explore websites, interactions, motion, and spatial experiences. Use keyword search to narrow your choices, or switch between curated and newest works.
- Follow the technology
- Use tags such as CSS, JavaScript, GSAP, Three.js, and WebGL to find work that suits your tools or a technique you would like to learn.
- Read the thinking behind it
- When a Knowledge article is available, explore the ideas, intentions, audience, and design decisions behind the work. Understanding why an expression was chosen can be as useful as seeing how it looks.
Browsing and all available live previews are free. Look for FREE labels and prices in the collection, then open a work that interests you.
02
Explore the experience
Open a work and, where a preview is available, take time to try it. Look beyond the first impression: notice how it responds and how one moment flows into the next.
- Try the movement and interactions
- Launch the demo or play the video in Preview. Try the scrolling, clicking, or other controls the work offers. When a preview is still being prepared, use the images and description to explore the idea.
- Compare different screen widths
- For live site demos, switch between Desktop, Tablet, and Mobile widths, or use fullscreen and a separate tab. When a video is available, Video appears first with muted playback and play/pause controls. The site width controls are not device emulators and do not certify compatibility with a physical device.
- Check what is available in Code and Prompt
- Free code and prompts are shown in full in their tabs. Paid materials show a public excerpt and price. Review Details for the overview and features, then check whether the materials suit your project.
- Check the AI tools and reproduction results
- Reproduction tools shows the AI tool names and reproduction levels. Use the creator’s observations as a guide to the tools you work with. Not tested means that reproduction has not yet been verified.
Free and paid availability varies by work and separately for code and prompts. For paid materials, review the excerpt and What is included before purchasing.
03
Choose your materials
Start with free materials or make a one-time purchase of the files you need. Paid options are Prompt Pack and Complete Kit; contents and prices are listed for each work.
- Free materials — Start experimenting
- Some works provide complete code or prompts for free. Check the FREE label in the Code and Prompt tabs, and read the available materials and usage terms before bringing them into your project.
- Prompt Pack — Create with AI
- Prompts, input instructions, and a usage guide for developing the expression with AI. Adjust the approach to your chosen model and environment as you bring your own idea to it.
- Complete Kit — Build from the materials
- For studying and adapting the implementation, receive the production materials listed on the work page. Check the actual contents for code, prompts, assets, and any editable files supplied with that work.
- Buy once and use across projects
- Purchased materials can be modified and used commercially in unlimited projects. There is no monthly membership or license authentication to use them. Resale or unauthorized redistribution of the materials is prohibited; third-party materials retain their own terms.
Before purchasing, check the required environment and software, included files, license, and support scope. AI output varies by model and environment; identical reproduction of a demo is not guaranteed.
04
Receive it. Make it yours.
Get free code and prompts from the work page, or receive paid files after purchase. Lemon Squeezy handles one-time checkout and file delivery for paid plans. You do not need a ZUFU account.
- Review and complete checkout
- Choose a plan on the work page and continue to checkout. Confirm the product, plan, final total including applicable taxes, and the email address you will use to receive your purchase.
- Download from your purchase email
- Follow the instructions in the purchase confirmation email from Lemon Squeezy to access your files. Keep the email and order details for future reference. If the email is missing, check your spam folder as well.
- Start with the README or guide
- Extract the downloaded ZIP and read the included README or guide and license. Prepare the required tools and follow the setup instructions before changing the content or appearance.
- Test and make it your own
- Adapt the materials within the license terms and test the result in your intended browsers and devices. If you need help, consult the work’s FAQ and support information. Have your order details, environment, and a clear description of the issue ready when contacting support.
Start with a working example, then make changes a little at a time. Follow the instructions and supported environments supplied with your chosen work.