> ## Documentation Index > Fetch the complete documentation index at: https://docs.coconut.dev/llms.txt > Use this file to discover all available pages before exploring further. # Resource Generation > Generate compelling images, audio and video assets on-demand export const ImageComparisonSlider = ({leftImage, rightImage}) => { const [sliderPosition, setSliderPosition] = useState(50); const [isDragging, setIsDragging] = useState(false); const [hasInteracted, setHasInteracted] = useState(false); const containerRef = useRef(null); const animationFrameRef = useRef(); const handleMove = clientX => { if (!containerRef.current) return; const rect = containerRef.current.getBoundingClientRect(); const x = clientX - rect.left; const percentage = x / rect.width * 100; const clampedPercentage = Math.min(Math.max(percentage, 0), 100); setSliderPosition(clampedPercentage); }; const handleMouseMove = e => { if (!isDragging) return; handleMove(e.clientX); }; const handleTouchMove = e => { if (!isDragging) return; handleMove(e.touches[0].clientX); }; const handleStart = () => { setIsDragging(true); setHasInteracted(true); if (animationFrameRef.current) { cancelAnimationFrame(animationFrameRef.current); } }; const handleEnd = () => { setIsDragging(false); }; useEffect(() => { if (isDragging) { window.addEventListener("mousemove", handleMouseMove); window.addEventListener("mouseup", handleEnd); window.addEventListener("touchmove", handleTouchMove); window.addEventListener("touchend", handleEnd); return () => { window.removeEventListener("mousemove", handleMouseMove); window.removeEventListener("mouseup", handleEnd); window.removeEventListener("touchmove", handleTouchMove); window.removeEventListener("touchend", handleEnd); }; } }, [isDragging]); const easeInOutBack = t => { const c1 = 1.70158; const c2 = c1 * 1.525; return t < 0.5 ? Math.pow(2 * t, 2) * ((c2 + 1) * 2 * t - c2) / 2 : (Math.pow(2 * t - 2, 2) * ((c2 + 1) * (t * 2 - 2) + c2) + 2) / 2; }; useEffect(() => { if (hasInteracted) return; const duration = 3000; const startTime = Date.now(); const animate = () => { const elapsed = Date.now() - startTime; const progress = elapsed % duration / duration; let position; if (progress < 0.5) { const t = progress * 2; const eased = easeInOutBack(t); position = 50 + eased * 20; } else { const t = (progress - 0.5) * 2; const eased = easeInOutBack(t); position = 70 - eased * 20; } setSliderPosition(position); animationFrameRef.current = requestAnimationFrame(animate); }; animationFrameRef.current = requestAnimationFrame(animate); return () => { if (animationFrameRef.current) { cancelAnimationFrame(animationFrameRef.current); } }; }, [hasInteracted]); return
{}
After
{}
Before
{}
{}
{}
{}
; }; ## Choose a resource type Coconut has support for all the major resource types (images, audio, and video) that can be generated on-demand and integrated directly back into your workflows and agent-based loops. A simple example of this might be a collection of images that can be passed to a coding agent to integrate them into your website. coconut example images ### Prompt Library A comprehensive example prompt library is available that you can use and adapt to generate similar assets. Example prompts Use **Customize in Assistant** in the bottom-right to tailor the prompt with the built-in Coconut Assistant. ## Passing resources to a coding agent Taking the earlier example further, it's now possible to generate complete visual mockups using an image generation agent and have a coding agent actually build them. The [Playwright MCP server](https://github.com/microsoft/playwright-mcp) adds a powerful dimension to this by allowing the coding agent to "headlessly" view the website or web-based application as it's building it to directly compare it to the design mockups provided. Here's an example prompt you can pair with the image below: > Adapt this image into an e-commerce store selling Tamagotchis coffee mockup This can then be passed to a coding agent (such as Claude Code for implementation). ## Audio and Video Generation Coconut also supports audio (voice) and video generation via state-of-the-art models such as Google's [Nano Banana Pro](https://gemini.google/overview/image-generation/). As with images, these assets live inside the Coconut and can be used within any other agent-based loops or workflows.