---
title: "Apple Bite — Framer component · Best of Framer"
description: "$12.00 · Framer component · by Muhmad Hmdo · Backgrounds. Click an apple to take crunchy bites."
canonical: "https://framer.elliotli.dev/component/apple-bite"
---

[Home](/)/[Components](/components)/[Backgrounds](/components/category/backgrounds)/Apple Bite

# Apple Bite

Apple to take crunchy bites.

[View on Framer](https://framer.com/marketplace/components/apple-bite/?via=elliot-li)

![Apple Bite preview image 1](https://framer.elliotli.dev/og/component/apple-bite/7ac6d5e3288b1cc3/1600x1200.jpg)

## Summary

Click an apple to take crunchy bites.

## Description

A playful interactive cursor that turns every click into a satisfying crunch. The apple follows your pointer with smooth spring physics, then takes a procedural bite on every click.

**Features**

-   Apple cursor that follows your pointer with spring physics
    
-   Procedural bite holes with rim shadows and exposed flesh
    
-   Crumb particles, shockwave rings, and rising aroma wisps
    
-   Apple shakes on impact and breathes gently while idle
    
-   Auto-reform after a delay, or persist mode to keep bites
    
-   Optional system cursor hide for a fully custom experience
    
-   Marketplace-safe: static fallback, viewport pause, tab pause
    

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-2u9ior85-qsqN9blr4Qld5Aoq6eNAKbr32cVWMi)

**What you can customise**

Colors are exposed flat at the top so you can bind each one to a Framer Color Style for instant theming:

-   **Skin Color** - the apple's outer gradient
    
-   **Flesh Color** - the inside of each bite
    
-   **Stem Color** - the stem gradient
    
-   **Leaf Color** - the leaf gradient
    

Grouped controls:

-   **Apple** - size, skin, stem, leaf, and flesh colors
    
-   **Physics** - spring stiffness and damping for follow feel
    
-   **Effects** - toggle crumbs, shockwave, aroma, and shake
    
-   **Behavior** - auto or persist mode, reset delay, max bites
    
-   **Cursor** - hide system cursor and z-index layering
    
-   **Stage** - background color for the static preview
    

**How to use**

1.  Drop the component onto your canvas. It renders as a centered apple for the static preview.
    
2.  Preview the site to see the cursor follow your pointer.
    
3.  Click anywhere to take a bite. Keep clicking until the core appears.
    
4.  Adjust colors, physics, and effects to match your brand.
    

**Tips**

-   Pair a dark background with bright skin and flesh colors for a dramatic look.
    
-   Increase stiffness for a tighter follow, or lower damping for more glide.
    
-   Hide the system cursor to create a fully immersive custom pointer experience.
    

_Refund Policy: All sales are final. No refunds._

Free email support: [framer@muhmad.me](mailto:framer@muhmad.me)

More Components: [sbarah.com](http://sbarah.com)

Thanks 🎉🌵

## Rank history [How rankings work →](/terms#rankings)

-   All · #6638

## Details

- **Author**: Muhmad Hmdo
- **Price**: $12.00
- **Published**: 2026-05-15
- **Updated**: 2026-10-19
- **Added**: 2026-05-09
- **Categories**: Backgrounds

## More like this

-   [Live_Backgrounds.exe](/component/live-backgrounds-exe) — S̶̈́͂IX BILLIÖ̴́N HERSELF · $19 — Animated backgrounds, 19 presets
-   [Drumskin](/component/drumskin) — KOJA Studios · Free — Interactive dot grid background
-   [Eclipse Ring](/component/eclipse-ring) — Lunaut Studio · $9 — A total eclipse for your hero
-   [Pixel Flicker](/component/pixel-flicker) — Design Foundry · $10 — premium animated pixel background