frame.scroll
Changed around line 1
+ main
+ class frameContainer
+ div
+ class frameContent
+ div
+ class breeze-animation
+ div
+ class leaf
+ div
+ class leaf
+ div
+ class leaf
+ h1 Feel the Summer Breeze
+ class frameTitle
+ p Let the gentle wind sweep your cares away
+ class frameSubtitle
+ div
+ class frameActionArea
+ button Feel the Breeze
+ class frameButton
+ data-action post
head.scroll
Changed around line 1
+ metaTags
+ meta
+ name viewport
+ content width=device-width, initial-scale=1.0
+
+ replaceNodejs
+ module.exports = {JSONCONTENTS: JSON.stringify(JSON.parse(require("fs").readFileSync("meta.json")))}
+
+
+
+ meta
+ name fc:frame:image
+ content https://breezeframehub.pro/summer-breeze.jpg
+ meta
+ name fc:frame:post_url
+ content https://breezeframehub.pro/api/frame
index.scroll
Changed around line 1
+ buildHtml
+ baseUrl https://breezeframehub.pro
+ import head.scroll
+ title Summer Breeze
+ description Experience a refreshing summer breeze in this interactive Frame
+ style.css
+ frame.scroll
+ script.js
prompt.json
Changed around line 1
+ {
+ "id": "msg_01Y4oVgxHuVDuxjuEWa3BC1q",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "I'll help create a \"cool summer breeze\" themed Farcaster Frame. This will be a relaxing, atmospheric frame with subtle animations and summer-themed visuals.\n\n---domain---\nbreezeframehub.pro\n\n---index.scroll---\nbuildHtml\nbaseUrl https://breezeframehub.pro\nimport head.scroll\ntitle Summer Breeze\ndescription Experience a refreshing summer breeze in this interactive Frame\nstyle.css\nframe.scroll\nscript.js\n\n---head.scroll---\nmetaTags\nmeta\n name viewport\n content width=device-width, initial-scale=1.0\n\nreplaceNodejs\n module.exports = {JSONCONTENTS: JSON.stringify(JSON.parse(require(\"fs\").readFileSync(\"meta.json\")))}\n\n\n\nmeta\n name fc:frame:image\n content https://breezeframehub.pro/summer-breeze.jpg\nmeta\n name fc:frame:post_url\n content https://breezeframehub.pro/api/frame\n\n---frame.scroll---\nmain\n class frameContainer\n div\n class frameContent\n div\n class breeze-animation\n div\n class leaf\n div\n class leaf\n div\n class leaf\n h1 Feel the Summer Breeze\n class frameTitle\n p Let the gentle wind sweep your cares away\n class frameSubtitle\n div\n class frameActionArea\n button Feel the Breeze\n class frameButton\n data-action post\n\n---style.css---\n:root {\n --frame-bg: #87CEEB;\n --frame-text: #2C5364;\n --frame-accent: #4CA1AF;\n --frame-radius: 16px;\n --leaf-color: rgba(139, 195, 74, 0.8);\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n background: linear-gradient(135deg, var(--frame-bg), #E0F7FA);\n color: var(--frame-text);\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n}\n\n.frameContainer {\n width: 100%;\n max-width: 600px;\n margin: 0 auto;\n padding: 20px;\n position: relative;\n overflow: hidden;\n}\n\n.frameContent {\n background: rgba(255, 255, 255, 0.15);\n border-radius: var(--frame-radius);\n padding: 32px;\n backdrop-filter: blur(8px);\n box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);\n border: 1px solid rgba(255, 255, 255, 0.18);\n position: relative;\n}\n\n.frameTitle {\n font-size: 32px;\n font-weight: 700;\n margin-bottom: 16px;\n text-align: center;\n background: linear-gradient(45deg, var(--frame-text), var(--frame-accent));\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n}\n\n.frameSubtitle {\n text-align: center;\n font-size: 18px;\n color: var(--frame-text);\n margin-bottom: 24px;\n}\n\n.frameActionArea {\n display: flex;\n justify-content: center;\n margin-top: 24px;\n}\n\n.frameButton {\n background: linear-gradient(135deg, var(--frame-accent), #2C5364);\n color: white;\n border: none;\n padding: 14px 28px;\n border-radius: var(--frame-radius);\n font-size: 18px;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.3s ease;\n box-shadow: 0 4px 15px rgba(44, 83, 100, 0.2);\n}\n\n.frameButton:hover {\n transform: translateY(-2px);\n box-shadow: 0 6px 20px rgba(44, 83, 100, 0.3);\n}\n\n.breeze-animation {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n overflow: hidden;\n pointer-events: none;\n}\n\n.leaf {\n position: absolute;\n width: 20px;\n height: 20px;\n background: var(--leaf-color);\n clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);\n animation: float 15s infinite linear;\n}\n\n.leaf:nth-child(2) {\n top: 30%;\n left: 20%;\n animation-delay: -5s;\n animation-duration: 17s;\n}\n\n.leaf:nth-child(3) {\n top: 60%;\n left: 80%;\n animation-delay: -8s;\n animation-duration: 13s;\n}\n\n@keyframes float {\n 0% {\n transform: translate(0, 0) rotate(0deg);\n opacity: 0;\n }\n 10% {\n opacity: 1;\n }\n 90% {\n opacity: 1;\n }\n 100% {\n transform: translate(300px, -100px) rotate(360deg);\n opacity: 0;\n }\n}\n\n@media (max-width: 480px) {\n .frameContainer {\n padding: 16px;\n }\n \n .frameTitle {\n font-size: 24px;\n }\n \n .frameSubtitle {\n font-size: 16px;\n }\n}\n\n[The rest of the files remain the same as your template, just updating the relevant title/description/image URLs to match the summer breeze theme]\n\nThis creates a beautiful, atmospheric Frame with:\n- Subtle gradient background mimicking a summer sky\n- Floating leaf animations to simulate a breeze\n- Frosted glass effect for the main content area\n- Smooth hover animations\n- Gradient text for the title\n- Fully responsive design\n- Accessible button states\n- Clean, semantic HTML structure\n\nThe design uses soft blues and natural greens to create a cooling, summer breeze feeling while maintaining professional aesthetics and optimal performance."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 2288,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 1654
+ }
+ }
readme.scroll
Changed around line 1
+ # breezeframehub.pro.framehub.pro
+
+ frame generated by Claude from prompt: cool summer breeze