[{"data":1,"prerenderedAt":918},["ShallowReactive",2],{"component-mouse-image-trail":3,"related-components-mouse-image-trail":264},{"id":4,"title":5,"body":6,"categories":233,"createdAt":236,"description":218,"download_url":237,"extension":238,"featured":239,"features":240,"hasGradient":239,"iframe":246,"image":247,"isFree":239,"isNew":248,"lemonsqueezy_variant_id":218,"meta":249,"navigation":248,"path":251,"polar_product_id":252,"previewImage":253,"price":254,"published":239,"robots":237,"seo":255,"slug":256,"stem":257,"tagline":258,"tags":259,"__hash__":263},"components/components/MouseImageTrail.md","Mouse Image Trail",{"type":7,"value":8,"toc":217},"minimark",[9,14,18,22,29,35,41,45,51,57,63,74,78,83,88,110,114,117,122,136,141,164,168,178,184,190,194,200,204,207,211,214],[10,11,13],"h2",{"id":12},"titleheadline","Title/Headline",[15,16,17],"p",{},"Create an engaging, playful interaction with the Mouse Image Trail component. As visitors move their cursor across your site, a vibrant sequence of images appears, trailing their path before smoothly fading away. Perfect for creative portfolios, photography sites, and modern landing pages.",[10,19,21],{"id":20},"features","Features",[15,23,24,28],{},[25,26,27],"strong",{},"Customizable Imagery","\nEasily add your own sequence of images to create a personalized trail effect.",[15,30,31,34],{},[25,32,33],{},"Fluid Animations","\nPowered by Framer Motion, images scale up beautifully on entrance and fade out smoothly as the mouse moves on.",[15,36,37,40],{},[25,38,39],{},"Fully Adjustable Settings","\nControl the distance between spawned images, their size, fade duration, and random rotation for the perfect look.",[10,42,44],{"id":43},"use-cases","Use Cases",[15,46,47,50],{},[25,48,49],{},"Creative Portfolios"," — Showcase your best work in an unexpected, interactive way as users explore your site.",[15,52,53,56],{},[25,54,55],{},"Photography Studios"," — Provide a sneak peek of photo sessions directly connected to the user's cursor.",[15,58,59,62],{},[25,60,61],{},"Playful Landing Pages"," — Add a \"wow\" factor to a hero section to capture visitor attention immediately.",[15,64,65],{},[66,67],"img",{"alt":68,"className":69,"src":73},"Mouse Image Trail Preview",[70,71,72],"w-full","mb-6","rounded-[20px]","/framerhub/img/components/control/mouse-image-trail.jpg",[10,75,77],{"id":76},"how-to-use","How to Use",[79,80,82],"h3",{"id":81},"installation","Installation",[15,84,85],{},[25,86,87],{},"VIDEO PLACEHOLDER: Installation Tutorial",[89,90,91,95,98,101,104,107],"ol",{},[92,93,94],"li",{},"Log in to your account at framerhub.io",[92,96,97],{},"Navigate to framerhub.io/dashboard",[92,99,100],{},"Find Mouse Image Trail in your Recent Purchases",[92,102,103],{},"Click the \"Copy\" button",[92,105,106],{},"Open your Framer project",[92,108,109],{},"Paste the component anywhere on your canvas (Cmd/Ctrl + V)",[79,111,113],{"id":112},"customization","Customization",[15,115,116],{},"Easily adjust the component to fit your design style directly from the Framer properties panel.",[15,118,119],{},[25,120,121],{},"Image Settings",[123,124,125,128],"ul",{},[92,126,127],{},"Add as many images as you want to the sequence.",[92,129,130,131,135],{},"Set the ",[132,133,134],"code",{},"Image Size"," to determine how large each photo appears.",[15,137,138],{},[25,139,140],{},"Trail Physics",[123,142,143,150,157],{},[92,144,145,146,149],{},"Adjust ",[132,147,148],{},"Distance"," to control how frequently images spawn along the path.",[92,151,152,153,156],{},"Change ",[132,154,155],{},"Fade Out (s)"," to control how long images linger before disappearing.",[92,158,159,160,163],{},"Use ",[132,161,162],{},"Rotation Range"," to add organic variety with random tilting for each image.",[79,165,167],{"id":166},"quick-tips","Quick Tips",[15,169,170,173,174,177],{},[25,171,172],{},"Best Performance"," — Keep the ",[132,175,176],{},"Max Images"," setting around 15-20 to ensure smooth performance across all devices.",[15,179,180,183],{},[25,181,182],{},"High Quality Images"," — Since these images appear briefly, use well-compressed, high-impact visuals that are instantly recognizable.",[15,185,186,189],{},[25,187,188],{},"Layering"," — Ensure the component is placed in a container with appropriate z-indexing so the images don't block critical interactive elements below.",[10,191,193],{"id":192},"license","License",[15,195,196,199],{},[25,197,198],{},"Single Use License"," — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client.",[10,201,203],{"id":202},"refund-policy","Refund Policy",[15,205,206],{},"Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns!",[10,208,210],{"id":209},"why-designers-love-this","Why Designers Love This",[15,212,213],{},"The Mouse Image Trail transforms an empty space into an interactive playground. It adds that elusive \"delight\" factor that makes websites memorable and encourages users to spend more time engaging with the page.",[215,216],"hr",{},{"title":218,"searchDepth":219,"depth":219,"links":220},"",2,[221,222,223,224,230,231,232],{"id":12,"depth":219,"text":13},{"id":20,"depth":219,"text":21},{"id":43,"depth":219,"text":44},{"id":76,"depth":219,"text":77,"children":225},[226,228,229],{"id":81,"depth":227,"text":82},3,{"id":112,"depth":227,"text":113},{"id":166,"depth":227,"text":167},{"id":192,"depth":219,"text":193},{"id":202,"depth":219,"text":203},{"id":209,"depth":219,"text":210},[234,235],"Effects","Interactive","2026-06-02T00:00:00.000Z",null,"md",false,[241,242,243,244,245],"Customizable Images","Fluid Framer Motion Physics","Adjustable Density and Lifespan","Random Rotation Effect","Fade Out Animation","https://gleaming-porcupine-517348.framer.app/","/framerhub/img/components/mouse-image-trail.jpg",true,{"variants":250},1,"/components/mouseimagetrail","e3204b9e-b62d-418a-a4f7-1c934d3781e4","/framerhub/img/components/large/mouse-image-trail.jpg",9,{"title":5,"description":218},"mouse-image-trail","components/MouseImageTrail","Leave a dynamic trail of images that follow your cursor.",[260,261,262,235],"Mouse Trail","Images","Hover","JKKZF9L_gWzGq40TywF69LClyXM89jBY2JZl_kM3twI",[265,510,704],{"id":266,"title":267,"body":268,"categories":486,"component_copy_url":488,"createdAt":489,"description":218,"download_url":237,"extension":238,"featured":239,"features":490,"hasGradient":239,"iframe":488,"image":495,"isFree":239,"isNew":248,"lemonsqueezy_variant_id":218,"meta":496,"navigation":248,"path":497,"polar_product_id":498,"previewImage":499,"price":254,"published":239,"robots":237,"seo":500,"slug":501,"stem":502,"tagline":503,"tags":504,"__hash__":509},"components/components/ShaderHatch.md","ShaderHatch",{"type":7,"value":269,"toc":473},[270,274,277,279,285,291,297,299,305,311,318,320,322,326,341,343,346,351,377,382,408,413,427,429,435,448,458,460,464,466,468,470],[10,271,273],{"id":272},"bring-your-elements-to-life","Bring Your Elements to Life",[15,275,276],{},"Add a dynamic, scribbled hatching effect to your images with ShaderHatch. Powered by native Three.js WebGL, this component converts standard images into beautifully shaded artwork right on the canvas with incredibly smooth performance.",[10,278,21],{"id":20},[15,280,281,284],{},[25,282,283],{},"Interactive Triggers","\nSet the effect to run continuously or smoothly animate in on hover using Framer Motion springs.",[15,286,287,290],{},[25,288,289],{},"Perfect Responsive Fitting","\nStandard image fit modes (Fill, Fit, Stretch, Tile) ensure your images and the shader effect adapt flawlessly to any container size.",[15,292,293,296],{},[25,294,295],{},"Fully Customizable","\nFine-tune the angle, spacing, width, jitter, speed, and softness to achieve the exact stylistic look you need.",[10,298,44],{"id":43},[15,300,301,304],{},[25,302,303],{},"Hero Graphics"," — Transform a standard hero image into a striking, animated scribble illustration.",[15,306,307,310],{},[25,308,309],{},"Interactive Portfolios"," — Make your creative work stand out with highly customized hover or reveal states.",[15,312,313],{},[66,314],{"alt":315,"className":316,"src":317},"ShaderHatch Preview",[70,71,72],"/framerhub/img/components/control/shader-hatch.jpg",[10,319,77],{"id":76},[79,321,82],{"id":81},[15,323,324],{},[25,325,87],{},[89,327,328,330,332,335,337,339],{},[92,329,94],{},[92,331,97],{},[92,333,334],{},"Find ShaderHatch in your Recent Purchases",[92,336,103],{},[92,338,106],{},[92,340,109],{},[79,342,113],{"id":112},[15,344,345],{},"ShaderHatch exposes a wide array of parameters grouped logically to keep your properties panel clean.",[15,347,348],{},[25,349,350],{},"Core Settings",[123,352,353,359,365,371],{},[92,354,355,358],{},[25,356,357],{},"Image",": Upload your source image.",[92,360,361,364],{},[25,362,363],{},"Image Fit",": Control how the image scales within its container.",[92,366,367,370],{},[25,368,369],{},"Trigger",": Choose whether the effect runs always, or only animates in when hovered.",[92,372,373,376],{},[25,374,375],{},"Quality",": Auto-detects device capabilities to ensure optimal framerates.",[15,378,379],{},[25,380,381],{},"Style & Geometry",[123,383,384,390,396,402],{},[92,385,386,389],{},[25,387,388],{},"Angle",": Define the tilt of the hatch lines.",[92,391,392,395],{},[25,393,394],{},"Spacing",": Adjust the gap between consecutive strokes.",[92,397,398,401],{},[25,399,400],{},"Line Width",": Set the thickness of the scribbles.",[92,403,404,407],{},[25,405,406],{},"Softness & Round Cap",": Control anti-aliasing and stroke terminations.",[15,409,410],{},[25,411,412],{},"Jitter & Animation",[123,414,415,421],{},[92,416,417,420],{},[25,418,419],{},"Angle, Offset, & Spacing Jitter",": Introduce randomness to create a hand-drawn feel.",[92,422,423,426],{},[25,424,425],{},"Speed",": Determine the frame rate of the scribble animation. Set to 0 for a static sketch.",[79,428,167],{"id":166},[15,430,431,434],{},[25,432,433],{},"Performance"," — The component automatically detects device capabilities to adjust pixel ratio and antialiasing. You can manually force it into \"Performance\" mode via the Quality dropdown for heavy pages.",[15,436,437,440,441,443,444,447],{},[25,438,439],{},"Static Sketches"," — Set the ",[132,442,425],{}," to 0 and tweak the ",[132,445,446],{},"Seed"," property to lock in a specific, perfect scribble iteration.",[15,449,450,453,454,457],{},[25,451,452],{},"Dynamic Coloring"," — By turning off ",[132,455,456],{},"Use Original",", you can enforce a monochrome or specific line color, making the component highly adaptable to different color themes.",[10,459,193],{"id":192},[15,461,462,199],{},[25,463,198],{},[10,465,203],{"id":202},[15,467,206],{},[10,469,210],{"id":209},[15,471,472],{},"ShaderHatch brings the power of custom shaders into Framer with zero code. It provides an immediate, striking visual upgrade to regular media that cannot be replicated with standard CSS filters.",{"title":218,"searchDepth":219,"depth":219,"links":474},[475,476,477,478,483,484,485],{"id":272,"depth":219,"text":273},{"id":20,"depth":219,"text":21},{"id":43,"depth":219,"text":44},{"id":76,"depth":219,"text":77,"children":479},[480,481,482],{"id":81,"depth":227,"text":82},{"id":112,"depth":227,"text":113},{"id":166,"depth":227,"text":167},{"id":192,"depth":219,"text":193},{"id":202,"depth":219,"text":203},{"id":209,"depth":219,"text":210},[234,487],"Media","https://pretty-phoenix-174205.framer.app/","2026-06-10T00:00:00.000Z",[491,492,493,494],"Native WebGL Three.js Effect","Responsive Image Fitting","Interactive Hover States","Fully Customizable Jitter & Hatching","/framerhub/img/components/shader-hatch.jpg",{"variants":250},"/components/shaderhatch","64c4b381-cf28-41f0-b9ac-ebc70e552a67","/framerhub/img/components/large/shader-hatch.jpg",{"title":267,"description":218},"shader-hatch","components/ShaderHatch","Add beautiful hatching and scribble WebGL effects to your elements.",[505,506,507,508],"Shader","Hatching","WebGL","Image Effect","_vvqU0jpPFETgMVJh9-gC31DvJynMyXwGvhbEb4xjaw",{"id":511,"title":512,"body":513,"categories":686,"component_copy_url":687,"createdAt":489,"description":218,"download_url":237,"extension":238,"featured":239,"features":688,"hasGradient":239,"iframe":687,"image":690,"isFree":239,"isNew":248,"lemonsqueezy_variant_id":218,"meta":691,"navigation":248,"path":692,"polar_product_id":693,"previewImage":694,"price":254,"published":239,"robots":237,"seo":695,"slug":696,"stem":697,"tagline":698,"tags":699,"__hash__":703},"components/components/TextHatch.md","TextHatch",{"type":7,"value":514,"toc":673},[515,519,522,524,528,534,538,540,546,551,558,560,562,566,581,583,586,591,613,617,633,637,642,644,650,658,660,664,666,668,670],[10,516,518],{"id":517},"hand-drawn-typography","Hand-Drawn Typography",[15,520,521],{},"Add a dynamic, scribbled hatching effect to your typography with TextHatch. Powered by native Three.js WebGL, this component converts standard text into beautifully shaded, hand-drawn artwork right on the canvas with incredibly smooth performance.",[10,523,21],{"id":20},[15,525,526,284],{},[25,527,283],{},[15,529,530,533],{},[25,531,532],{},"Custom Fonts & Styling","\nFully supports Framer's built-in font controls. Choose any font family, adjust the size and weight, and the hatching system will automatically adapt.",[15,535,536,296],{},[25,537,295],{},[10,539,44],{"id":43},[15,541,542,545],{},[25,543,544],{},"Hero Headlines"," — Make an unforgettable first impression by turning your main headline into an animated sketch.",[15,547,548,550],{},[25,549,49],{}," — Add a layer of artistic polish to showcase pages.",[15,552,553],{},[66,554],{"alt":555,"className":556,"src":557},"TextHatch Preview",[70,71,72],"/framerhub/img/components/control/text-hatch.jpg",[10,559,77],{"id":76},[79,561,82],{"id":81},[15,563,564],{},[25,565,87],{},[89,567,568,570,572,575,577,579],{},[92,569,94],{},[92,571,97],{},[92,573,574],{},"Find TextHatch in your Recent Purchases",[92,576,103],{},[92,578,106],{},[92,580,109],{},[79,582,113],{"id":112},[15,584,585],{},"TextHatch exposes a wide array of parameters grouped logically to keep your properties panel clean.",[15,587,588],{},[25,589,590],{},"Text Settings",[123,592,593,599,605,609],{},[92,594,595,598],{},[25,596,597],{},"Text",": The string to be rendered.",[92,600,601,604],{},[25,602,603],{},"Font",": Use Framer's font picker to select the exact family, size, and weight.",[92,606,607,370],{},[25,608,369],{},[92,610,611,376],{},[25,612,375],{},[15,614,615],{},[25,616,381],{},[123,618,619,623,628],{},[92,620,621,389],{},[25,622,388],{},[92,624,625,627],{},[25,626,394],{},": How far apart the scribble strokes are.",[92,629,630,632],{},[25,631,400],{},": The thickness of each stroke.",[15,634,635],{},[25,636,412],{},[123,638,639],{},[92,640,641],{},"Control how messy the scribble looks by tweaking Angle Jitter, Offset Jitter, and Spacing Jitter. Set the animation speed to control how fast the scribble updates.",[79,643,167],{"id":166},[15,645,646,649],{},[25,647,648],{},"Best Font Styles"," — The hatching effect looks best on text with thicker strokes. Try using heavier font weights (Bold, Black) or larger font sizes so the scribble lines have plenty of room to draw.",[15,651,652,440,654,443,656,447],{},[25,653,439],{},[132,655,425],{},[132,657,446],{},[10,659,193],{"id":192},[15,661,662,199],{},[25,663,198],{},[10,665,203],{"id":202},[15,667,206],{},[10,669,210],{"id":209},[15,671,672],{},"TextHatch brings the coveted \"awwwwards-style\" WebGL shading effect directly into Framer typography without writing a single line of shader code.",{"title":218,"searchDepth":219,"depth":219,"links":674},[675,676,677,678,683,684,685],{"id":517,"depth":219,"text":518},{"id":20,"depth":219,"text":21},{"id":43,"depth":219,"text":44},{"id":76,"depth":219,"text":77,"children":679},[680,681,682],{"id":81,"depth":227,"text":82},{"id":112,"depth":227,"text":113},{"id":166,"depth":227,"text":167},{"id":192,"depth":219,"text":193},{"id":202,"depth":219,"text":203},{"id":209,"depth":219,"text":210},[597,234],"https://big-deck-108880.framer.app/",[491,689,493,494],"Fully Custom Fonts","/framerhub/img/components/text-hatch.jpg",{"variants":250},"/components/texthatch","207cb66e-5dca-4780-ad64-ae513140bdde","/framerhub/img/components/large/text-hatch.jpg",{"title":512,"description":218},"text-hatch","components/TextHatch","Apply a stunning, hand-drawn hatching shader effect to your typography.",[506,700,701,507,702],"Scribble","Typography","Three.js","ysXsmYvsChT4E_gwMl6Ca7-pWFV88pBjXDUNscMCd4c",{"id":705,"title":706,"body":707,"categories":901,"component_copy_url":903,"createdAt":489,"description":218,"download_url":237,"extension":238,"featured":239,"features":904,"hasGradient":239,"iframe":903,"image":906,"isFree":239,"isNew":248,"lemonsqueezy_variant_id":218,"meta":907,"navigation":248,"path":908,"polar_product_id":909,"previewImage":910,"price":254,"published":239,"robots":237,"seo":911,"slug":912,"stem":913,"tagline":914,"tags":915,"__hash__":917},"components/components/VideoHatch.md","VideoHatch",{"type":7,"value":708,"toc":888},[709,713,720,722,728,733,738,740,745,751,758,760,762,766,781,783,786,791,820,824,848,852,857,859,864,873,875,879,881,883,885],[10,710,712],{"id":711},"hand-drawn-video-playback","Hand-Drawn Video Playback",[15,714,715,716,719],{},"Add a dynamic, scribbled hatching effect to your videos with VideoHatch. Powered by native Three.js WebGL, this component uses ",[132,717,718],{},"VideoTexture"," to convert any standard MP4 into a beautifully shaded, hand-drawn animation right on the canvas with incredibly smooth performance.",[10,721,21],{"id":20},[15,723,724,727],{},[25,725,726],{},"Original Color Sampling","\nThe hatching shader samples the exact colors from the underlying video pixels, recreating your video entirely out of colored scribble strokes. Alternatively, turn off Original Color to tint the entire sketch with a single custom color.",[15,729,730,732],{},[25,731,283],{},"\nSet the effect to run continuously or smoothly animate in on hover using Framer Motion springs. The video continues to play underneath, but the scribble mask dynamically transitions in and out.",[15,734,735,737],{},[25,736,295],{},"\nFine-tune the angle, spacing, width, jitter, speed, and softness to achieve the exact stylistic sketch look you need.",[10,739,44],{"id":43},[15,741,742,744],{},[25,743,49],{}," — Make your showreel or project thumbnails stand out by presenting them as living sketches.",[15,746,747,750],{},[25,748,749],{},"Hero Backgrounds"," — Use a muted, monochromatic hatching effect on a background video to add subtle, organic texture without distracting from your foreground content.",[15,752,753],{},[66,754],{"alt":755,"className":756,"src":757},"VideoHatch Preview",[70,71,72],"/framerhub/img/components/control/video-hatch.jpg",[10,759,77],{"id":76},[79,761,82],{"id":81},[15,763,764],{},[25,765,87],{},[89,767,768,770,772,775,777,779],{},[92,769,94],{},[92,771,97],{},[92,773,774],{},"Find VideoHatch in your Recent Purchases",[92,776,103],{},[92,778,106],{},[92,780,109],{},[79,782,113],{"id":112},[15,784,785],{},"VideoHatch exposes a wide array of parameters grouped logically to keep your properties panel clean.",[15,787,788],{},[25,789,790],{},"Video Settings",[123,792,793,799,805,811,815],{},[92,794,795,798],{},[25,796,797],{},"Source",": Toggle between pasting a URL or Uploading a local video file.",[92,800,801,804],{},[25,802,803],{},"Playback Controls",": Toggle AutoPlay, Loop, and Mute.",[92,806,807,810],{},[25,808,809],{},"Video Fit",": Control how the video scales within the component bounds (Fill, Fit, Stretch).",[92,812,813,370],{},[25,814,369],{},[92,816,817,819],{},[25,818,375],{},": Auto-detects device capabilities to ensure optimal framerates. Video textures are heavy, so leaving this on Auto is recommended.",[15,821,822],{},[25,823,381],{},[123,825,826,836,840,844],{},[92,827,828,831,832,835],{},[25,829,830],{},"Original Color",": Enable this to sample colors directly from the video. Disable it to tint the strokes with a single solid ",[132,833,834],{},"Color",".",[92,837,838,389],{},[25,839,388],{},[92,841,842,627],{},[25,843,394],{},[92,845,846,632],{},[25,847,400],{},[15,849,850],{},[25,851,412],{},[123,853,854],{},[92,855,856],{},"Control how messy the scribble looks by tweaking Angle Jitter, Offset Jitter, and Spacing Jitter. Set the animation speed to control how fast the scribble updates over time.",[79,858,167],{"id":166},[15,860,861,863],{},[25,862,172],{}," — Video textures are the most demanding type of texture in WebGL. To ensure 60fps on mobile devices, compress your video files and keep the resolution reasonable (e.g., 720p or 1080p max).",[15,865,866,440,868,443,870,872],{},[25,867,439],{},[132,869,425],{},[132,871,446],{}," property to lock in a specific, perfect scribble iteration. The video will still play underneath, but the strokes will remain fixed in place.",[10,874,193],{"id":192},[15,876,877,199],{},[25,878,198],{},[10,880,203],{"id":202},[15,882,206],{},[10,884,210],{"id":209},[15,886,887],{},"VideoHatch brings the coveted \"awwwwards-style\" WebGL shading effect directly into Framer video playback without writing a single line of shader code.",{"title":218,"searchDepth":219,"depth":219,"links":889},[890,891,892,893,898,899,900],{"id":711,"depth":219,"text":712},{"id":20,"depth":219,"text":21},{"id":43,"depth":219,"text":44},{"id":76,"depth":219,"text":77,"children":894},[895,896,897],{"id":81,"depth":227,"text":82},{"id":112,"depth":227,"text":113},{"id":166,"depth":227,"text":167},{"id":192,"depth":219,"text":193},{"id":202,"depth":219,"text":203},{"id":209,"depth":219,"text":210},[902,234],"Video","https://regular-flow-567222.framer.app/",[491,905,726,493,494],"Real-time Video Textures","/framerhub/img/components/video-hatch.jpg",{"variants":250},"/components/videohatch","2e47809b-7cbe-48e8-ba64-a9deea140ea8","/framerhub/img/components/large/video-hatch.jpg",{"title":706,"description":218},"video-hatch","components/VideoHatch","Apply a real-time, hand-drawn hatching shader effect to any video.",[506,700,916,507,702],"Video Filter","ER72T5pKGgGV4I-xfrKFdjJzlD7YrRPoJznhEggSapM",1781534771333]