Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>API Documentation | Loki.AI</title> | |
| <link rel="icon" href="/favicon.ico" type="image/x-icon"> | |
| <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet"> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/themes/prism-tomorrow.min.css" rel="stylesheet" /> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/prism.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/components/prism-json.min.js"></script> | |
| <style> | |
| :root { | |
| --bg-primary: #000000; | |
| --bg-secondary: #1c1c1e; | |
| --text-primary: #ffffff; | |
| --text-secondary: #86868b; | |
| --accent: #0071e3; | |
| --border: #333336; | |
| --card-bg: #1c1c1e; | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| cursor: none; | |
| } | |
| body { | |
| background-color: var(--bg-primary); | |
| color: var(--text-primary); | |
| font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif; | |
| line-height: 1.5; | |
| } | |
| /* Customize scrollbar for WebKit browsers (Chrome, Safari, Edge) */ | |
| body::-webkit-scrollbar { | |
| width: 12px; /* Set the width of the scrollbar */ | |
| } | |
| body::-webkit-scrollbar-thumb { | |
| background-color: #1a1a1a; /* Scrollbar color */ | |
| border-radius: 10px; /* Round edges */ | |
| transition: background-color 200ms ease; /* Smooth transition for background color */ | |
| } | |
| body::-webkit-scrollbar-track { | |
| background: none; /* Track color */ | |
| border-radius: 10px; /* Match rounding */ | |
| } | |
| body::-webkit-scrollbar-thumb:hover { | |
| width: 20px; | |
| background-color: #2a2a2a; /* Change color on hover */ | |
| } | |
| .container { | |
| max-width: 800px; | |
| margin: 0 auto; | |
| padding: 2rem; | |
| } | |
| /* Header styles */ | |
| header { | |
| padding: 8rem 0; | |
| text-align: center; | |
| background: var(--bg-secondary); | |
| border-radius: 12px; | |
| margin-bottom: 4rem; | |
| border: 1px solid var(--border); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| /* Before pseudo-element for hover effect */ | |
| header::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), | |
| rgba(59, 130, 246, 0.1) 0%, | |
| transparent 50%); | |
| pointer-events: none; | |
| opacity: 0; | |
| transition: opacity 0.3s ease; | |
| } | |
| header:hover::before { | |
| opacity: 1; | |
| } | |
| /* Scroll Down indicator styles */ | |
| .scroll-indicator { | |
| position: absolute; | |
| bottom: 20px; /* Place it just below the header padding */ | |
| left: 50%; | |
| transform: translateX(-50%); | |
| opacity: 0; | |
| font-size: 12px; | |
| color: #8f8f8f; | |
| transition: opacity 0.3s ease, transform 0.3s ease; | |
| } | |
| /* Arrow styling */ | |
| .arrow { | |
| font-size: 12px; | |
| transition: transform 0.3s ease; | |
| } | |
| /* On hover, make the text appear and move up */ | |
| header:hover .scroll-indicator { | |
| opacity: 1; | |
| transform: translate(-50%, -10px); /* Move it up slightly */ | |
| } | |
| header:hover .scroll-indicator .arrow { | |
| transform: translateY(10px); /* Bounce the arrow a little */ | |
| } | |
| h1 { | |
| font-size: 5.5rem; | |
| font-weight: 700; | |
| letter-spacing: -0.03em; | |
| margin-bottom: 1rem; | |
| background: linear-gradient(135deg, #fff 0%, #888 100%); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| header p { | |
| color: var(--text-secondary); | |
| font-size: 1.2rem; | |
| } | |
| .section { | |
| background: var(--card-bg); | |
| border-radius: 20px; | |
| padding: 2rem; | |
| margin-bottom: 2rem; | |
| border: 1px solid var(--border); | |
| } | |
| h2 { | |
| font-size: 1.8rem; | |
| margin-bottom: 1.5rem; | |
| color: var(--text-primary); | |
| } | |
| h3 { | |
| font-size: 1.2rem; | |
| margin: 1.5rem 0 0.75rem; | |
| color: var(--text-primary); | |
| } | |
| .endpoint { | |
| background: var(--bg-primary); | |
| padding: 1rem; | |
| border-radius: 12px; | |
| font-family: 'JetBrains Mono', monospace; | |
| margin: 0.5rem 0; | |
| border: 1px solid var(--border); | |
| overflow: hidden; | |
| } | |
| .btn { | |
| display: inline-block; | |
| background: var(--accent); | |
| color: white; | |
| padding: 0.8rem 1.5rem; | |
| border-radius: 24px; | |
| text-decoration: none; | |
| font-weight: 500; | |
| transition: all 0.2s ease; | |
| border: none; | |
| cursor: pointer; | |
| margin: 0.5rem 0; | |
| } | |
| .btn:hover { | |
| background: #0077ED; | |
| transform: translateY(-1px); | |
| } | |
| .models-list { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); | |
| gap: 1rem; | |
| margin-top: 1rem; | |
| } | |
| .model-item { | |
| background: var(--bg-primary); | |
| padding: 1rem; | |
| border-radius: 12px; | |
| text-align: center; | |
| border: 1px solid var(--border); | |
| transition: all 0.2s ease; | |
| } | |
| .model-item:hover { | |
| border-color: var(--accent); | |
| transform: translateY(-2px); | |
| } | |
| .model-item.glow { | |
| font-weight: 700; | |
| position: relative; | |
| border: 2px solid transparent; /* Initial border with no color */ | |
| background-clip: padding-box; /* Ensure background doesn’t interfere with border */ | |
| animation: slideBorder 3s ease-in-out infinite; /* Smooth transition with ease-in-out */ | |
| border-radius: 5px; /* Optional: rounded corners */ | |
| } | |
| @keyframes slideBorder { | |
| 0% { | |
| border-color: rgba(255, 215, 0, 0.2); /* Soft gold */ | |
| } | |
| 50% { | |
| border-color: rgba(255, 215, 0, 0.8); /* Brighter gold */ | |
| } | |
| 100% { | |
| border-color: rgba(255, 215, 0, 0.2); /* Soft gold */ | |
| } | |
| } | |
| pre { | |
| border-radius: 12px; | |
| margin: 1rem 0; | |
| background: var(--bg-primary) ; | |
| border: 1px solid var(--border); | |
| } | |
| code { | |
| font-family: 'JetBrains Mono', monospace; | |
| } | |
| .contact-section { | |
| text-align: center; | |
| padding: 3rem 2rem; | |
| background: var(--card-bg); | |
| border-radius: 20px; | |
| border: 1px solid var(--border); | |
| } | |
| footer { | |
| text-align: center; | |
| padding: 2rem; | |
| color: var(--text-secondary); | |
| } | |
| @media (max-width: 768px) { | |
| .container { | |
| padding: 1rem; | |
| } | |
| h1 { | |
| font-size: 2.5rem; | |
| } | |
| .section { | |
| padding: 1.5rem; | |
| } | |
| } | |
| .cursor { | |
| width: 20px; | |
| height: 20px; | |
| border: 2px solid var(--accent); | |
| border-radius: 50%; | |
| position: fixed; | |
| pointer-events: none; | |
| z-index: 999; | |
| transition: all 0.1s ease; | |
| transition-property: width, height, border; | |
| } | |
| .cursor-dot { | |
| width: 4px; | |
| height: 4px; | |
| background: var(--accent); | |
| border-radius: 50%; | |
| position: fixed; | |
| pointer-events: none; | |
| z-index: 999; | |
| } | |
| .cursor-trail { | |
| width: 10px; | |
| height: 10px; | |
| background: rgba(59, 130, 246, 0.2); | |
| border-radius: 50%; | |
| position: fixed; | |
| pointer-events: none; | |
| z-index: 998; | |
| transition: 0.1s; | |
| } | |
| .notification { | |
| position: fixed; | |
| top: 20px; | |
| right: -300px; /* Initially off-screen to the right */ | |
| padding: 10px 20px; | |
| background-color: #2ecc71; /* Green background color */ | |
| color: #fff; | |
| border-radius: 5px; | |
| opacity: 0; | |
| transition: all 0.5s ease-in-out; /* Transition for all properties */ | |
| } | |
| .notification.show { | |
| opacity: 1; | |
| right: 20px; /* Move to the desired position */ | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="cursor"></div> | |
| <div class="cursor-dot"></div> | |
| <div class="cursor-trail"></div> | |
| <div class="container"> | |
| <header> | |
| <h1>Loki.AI API</h1> | |
| <p>Powerful AI Integration at Your Fingertips For Free</p> | |
| <p style="margin-top: 10px;">Made With ❤️ by | |
| <a href="https://github.com/ParthSadaria" style="text-decoration: none; color: inherit; font-weight: bold; transition: 500ms ease;" | |
| onmouseover="this.style.textShadow='0 0 15px #FFFFFF';" | |
| onmouseout="this.style.textShadow='none';"> | |
| Parth Sadaria | |
| </a> | |
| </p> | |
| <div class="scroll-indicator"> | |
| <span>Scroll Down For More Info<br><span class="arrow">v</span></span> | |
| </div> | |
| </header> | |
| <!-- <marquee>🥳🔥 NEW!! IMAGE GENERATION ENDPOINT :)</marquee> --> | |
| <!-- <marquee>🔥BACK UP AND RUNNING WOHOOO🔥</marquee> --> | |
| <marquee>MOST MODELS FIXED ;) gpt-4o-mini crashed 😭</marquee> | |
| <!--<marquee>🔥MANY MODELS ARE DOWN🔥 FIXING THE ISSUE AS SOON AS POSSIBLE :)</marquee> --> | |
| <section class="section"> | |
| <h2>Quick Start Guide</h2> | |
| <h3>NEW!!!-Playground (Beta) 🥳🥳</h3> | |
| <div class="endpoint">https://parthsadaria-lokiai.hf.space/playground</div> | |
| <h3>Base URL</h3> | |
| <div class="endpoint">https://parthsadaria-lokiai.hf.space</div> | |
| <h3>NEW!!! Image Generation URL 🥳🥳 (Powered by <a href="https://www.pollinations.ai" style="text-decoration: none; color: inherit;">Pollinations.ai</a>)</h3> | |
| <div class="endpoint">https://parthsadaria-lokiai.hf.space/images/generations?prompt=sky%20northern%20lights</div> | |
| <small> | |
| <b>Parameters:</b> | |
| <ul> | |
| <li><b>prompt:</b> (required) Text description of the image.</li> | |
| <li><b>model:</b> (optional) Model to use (default: "flux").</li> | |
| <li><b>seed:</b> (optional) Random seed for reproducibility.</li> | |
| <li><b>width:</b> (optional) Image width in pixels.</li> | |
| <li><b>height:</b> (optional) Image height in pixels.</li> | |
| </ul> | |
| </small> | |
| <h3>Chat Completion URL</h3> | |
| <div class="endpoint">https://parthsadaria-lokiai.hf.space/chat/completions</div> | |
| <h3>Searchgpt URL</h3> | |
| <div class="endpoint">https://parthsadaria-lokiai.hf.space/searchgpt?q=todays news</div> | |
| <small> | |
| <b>Note:</b> Use <code>&stream=true</code> to enable streaming responses. | |
| </small> | |
| <h5>Get requests only | Supports stream :) | set &stream=true</h5> | |
| <h3>Usage Checker :) (if you are curious)</h3> | |
| <div class="endpoint">https://parthsadaria-lokiai.hf.space/usage/page</div> | |
| <h3>Models Endpoint</h3> | |
| <h5>Both Models Image and Chat are mentioned here</h5> | |
| <div class="endpoint">https://parthsadaria-lokiai.hf.space/models</div> | |
| <h3>Authentication</h3> | |
| <h6>ITS FREE :) NO NEED FOR ANY AUTH WOHOOOOO!! 🥳</h6> | |
| </section> | |
| <section class="section"> | |
| <h2>Request Format</h2> | |
| <pre><code class="language-json">{ | |
| "model": "gpt-4o", | |
| "messages": [ | |
| { | |
| "role": "user", | |
| "content": "Hello, AI!" | |
| } | |
| ], | |
| "stream": False #specify it | |
| }</code></pre> | |
| <h3>Response Format</h3> | |
| <pre><code class="language-json">{{ | |
| "id": "chatcmpl-89DmxGJl4oqEultjlLBnGfdkV7Euk", | |
| "model": "gpt-4o", | |
| "object": "chat.completion", | |
| "created": 1731674826, | |
| "choices": [ | |
| { | |
| "index": 0, | |
| "message": { | |
| "role": "assistant", | |
| "content": "Hello! How can I assist you today?" | |
| }, | |
| "finish_reason": "stop" | |
| } | |
| ], | |
| "usage": { | |
| "prompt_tokens": 11, | |
| "completion_tokens": 9, | |
| "total_tokens": 20 | |
| } | |
| } | |
| }</code></pre> | |
| </section> | |
| <section class="section"> | |
| <h2>Example Usage</h2> | |
| <pre style="font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif; font-size: small; padding: 10px 10px; color: rgb(201, 209, 217); background-color: rgb(13, 17, 23); font-weight: 400; " | |
| onmouseover="this.querySelector('button').style.transform='translateX(0)'; this.querySelector('button').style.display='';" | |
| onmouseout="this.querySelector('button').style.transform='translateX(100%) ';this.querySelector('button').style.display='none';"> | |
| <span style="color: rgb(255, 123, 114); font-weight: 400;">import</span> openai <button | |
| style="display: none; transition: transform 200ms ease, display 0s ease 200ms; position: absolute; right: 26%; color: white; background-color: black; padding: 7px 7px; border: 2px solid #1c1c1e; border-radius: 15px; font-family:'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif; " | |
| onclick="copyText(code);" | |
| >Copy</button> | |
| <span style="color: rgb(139, 148, 158); font-weight: 400;"># hampe to he hi no :p (not needed)</span> | |
| api_key = <span style="color: rgb(165, 214, 255); font-weight: 400;">''</span> | |
| <span style="color: rgb(139, 148, 158); font-weight: 400;"># Use the custom API endpoint</span> | |
| openai.api_base = <span style="color: rgb(165, 214, 255); font-weight: 400;">"https://parthsadaria-lokiai.hf.space"</span> | |
| openai.api_key = api_key | |
| <span style="color: rgb(255, 123, 114); font-weight: 400;">def</span> <span style="color: rgb(210, 168, 255); font-weight: 400;">chat_with_gpt</span>(): | |
| <span style="color: rgb(255, 123, 114); font-weight: 400;">try</span>: | |
| response = openai.ChatCompletion.create( | |
| model=<span style="color: rgb(165, 214, 255); font-weight: 400;">"gpt-4o"</span>, | |
| messages=[{<span style="color: rgb(165, 214, 255); font-weight: 400;">"role"</span>: <span style="color: rgb(165, 214, 255); font-weight: 400;">"user"</span>, <span style="color: rgb(165, 214, 255); font-weight: 400;">"content"</span>: <span style="color: rgb(165, 214, 255); font-weight: 400;">"hi homie"</span>}], | |
| stream=<span style="color: rgb(121, 192, 255); font-weight: 400;">False</span> | |
| ) | |
| <span style="color: rgb(255, 166, 87); font-weight: 400;">print</span>(response[<span style="color: rgb(165, 214, 255); font-weight: 400;">'choices'</span>][<span style="color: rgb(121, 192, 255); font-weight: 400;">0</span>][<span style="color: rgb(165, 214, 255); font-weight: 400;">'message'</span>][<span style="color: rgb(165, 214, 255); font-weight: 400;">'content'</span>]) | |
| <span style="color: rgb(255, 123, 114); font-weight: 400;">except</span> Exception <span style="color: rgb(255, 123, 114); font-weight: 400;">as</span> e: | |
| <span style="color: rgb(255, 166, 87); font-weight: 400;">print</span>(<span style="color: rgb(165, 214, 255); font-weight: 400;">f"Error: <span style="color: rgb(201, 209, 217); font-weight: 400;">{e}</span>"</span>) | |
| chat_with_gpt() | |
| </pre> | |
| </section> | |
| <section class="section"> | |
| <h2>Available Models</h2> | |
| <div class="notification" id="notification">Text copied!</div> | |
| <p>More info at <span style="text-decoration: underline; cursor: pointer;" onclick="window.location.href='https://parthsadaria-lokiai.hf.space/models'">https://parthsadaria-lokiai.hf.space/models</span></p> | |
| <div class="models-list"> | |
| <!-- Models with "stable & fast" --> | |
| <div class="model-item glow">gpt-4o<br><strong>stable & fast</strong></div> | |
| <div class="model-item glow">gpt-4o-mini <br><strong>stable & fast</strong></div> | |
| <div class="model-item glow">claude-3-haiku<br><strong>stable & fast</strong></div> | |
| <div class="model-item glow">llama-3.1-405b<br><strong>stable & fast</strong></div> | |
| <div class="model-item glow">llama-3.1-70b<br><strong>stable & fast</strong></div> | |
| <div class="model-item glow">llama-3.1-8b<br><strong>stable & fast</strong></div> | |
| <div class="model-item glow">gemini-1.5-flash<br><strong>stable & fast</strong></div> | |
| <div class="model-item glow">mixtral-8x7b<br><strong>stable & fast</strong></div> | |
| <div class="model-item glow">command-r<br><strong>stable & fast</strong></div> | |
| <div class="model-item glow">gemini-pro<br><strong>stable & fast</strong></div> | |
| <div class="model-item glow">gpt-3.5-turbo<br><strong>stable & fast</strong></div> | |
| <div class="model-item glow">command<br><strong>stable & fast</strong></div> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="contact-section" style="text-align: center; display: flex; flex-direction: column; align-items: center;"> | |
| <h2>Contact Me 👋</h2> | |
| <p style="color: var(--text-secondary); margin-bottom: 1.5rem;">Contact me directly for Loki.AI integration! Report Bugs and issues 🐛</p> | |
| <div style="display: flex; gap: 1rem; justify-content: center;"> | |
| <a href="https://github.com/Parthsadaria/FreeGPT-API" target="_blank" class="btn" style="display: flex; align-items: center; gap: 0.5rem;"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> | |
| <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"/> | |
| </svg> | |
| GitHub 💻 | |
| </a> | |
| <a href="https://t.me/parth_sadaria" target="_blank" class="btn" style="display: flex; align-items: center; gap: 0.5rem;"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> | |
| <path d="M22 3L2 10l7 3.5L19 7l-7 8 3 5L22 3z"/> | |
| </svg> | |
| Telegram 📱 | |
| </a> | |
| </div> | |
| </section> | |
| <footer> | |
| <h2 id="warning-banner" style="text-align: center; margin: 2rem 0; padding: 1rem; background: rgba(255, 247, 237, 0.8); border-radius: 8px; border: 1px solid #FFB74D; color: #B45309; font-size: 1rem; line-height: 1.6;"> | |
| ⚠️ Note: This service uses third-party AI models. While we aim for the best experience, please verify any important information. This API is provided free of charge - please be considerate and don't abuse it! 🤗 Let's keep it running smoothly for everyone! ✨ | |
| </h2> | |
| <p>Built with ❤️ by Parth Sadaria</p> | |
| </footer> | |
| </div> | |
| <script> | |
| var code=`import openai | |
| # hampe to he hi no :p (not needed) | |
| api_key = '' | |
| # Use the custom API endpoint | |
| openai.api_base = "https://parthsadaria-lokiai.hf.space" | |
| openai.api_key = api_key | |
| def chat_with_gpt(): | |
| try: | |
| response = openai.ChatCompletion.create( | |
| model="gpt-4o", | |
| messages=[{"role": "user", "content": "hi homie"}], | |
| stream=False | |
| ) | |
| print(response['choices'][0]['message']['content']) | |
| except Exception as e: \ | |
| print(f"Error: {e}") | |
| chat_with_gpt()`; | |
| function copyText(textToCopy) { | |
| navigator.clipboard.writeText(textToCopy) | |
| .then(() => { | |
| document.getElementById("notification").classList.add("show"); | |
| // Hide the notification after 2 seconds | |
| setTimeout(() => { | |
| document.getElementById("notification").classList.remove("show"); | |
| }, 2000); | |
| }) | |
| .catch(err => console.error('Failed to copy text:', err)); | |
| } | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const cursor = document.querySelector('.cursor'); | |
| const cursorDot = document.querySelector('.cursor-dot'); | |
| const cursorTrail = document.querySelector('.cursor-trail'); | |
| let mouseX = 0; | |
| let mouseY = 0; | |
| let cursorX = 0; | |
| let cursorY = 0; | |
| let trailX = 0; | |
| let trailY = 0; | |
| // Function to update sizes dynamically | |
| function getSizes() { | |
| return { | |
| cursorSize: parseInt(getComputedStyle(cursor).width), | |
| dotSize: parseInt(getComputedStyle(cursorDot).width), | |
| trailSize: parseInt(getComputedStyle(cursorTrail).width) | |
| }; | |
| } | |
| document.addEventListener('mousemove', (e) => { | |
| mouseX = e.clientX; | |
| mouseY = e.clientY; | |
| // Update header gradient | |
| const header = document.querySelector('header'); | |
| if (header) { | |
| const rect = header.getBoundingClientRect(); | |
| const x = ((e.clientX - rect.left) / rect.width) * 100; | |
| const y = ((e.clientY - rect.top) / rect.height) * 100; | |
| header.style.setProperty('--x', `${x}%`); | |
| header.style.setProperty('--y', `${y}%`); | |
| } | |
| // Update glow effects | |
| document.querySelectorAll('[data-glow]').forEach(element => { | |
| const rect = element.getBoundingClientRect(); | |
| const x = ((e.clientX - rect.left) / rect.width) * 100; | |
| const y = ((e.clientY - rect.top) / rect.height) * 100; | |
| element.style.setProperty('--x', `${x}%`); | |
| element.style.setProperty('--y', `${y}%`); | |
| }); | |
| }); | |
| // Smooth cursor animation | |
| function animate() { | |
| const { cursorSize, dotSize, trailSize } = getSizes(); // Get sizes each frame | |
| // Calculate movement for cursor and trail | |
| const dxCursor = mouseX - cursorX; | |
| const dyCursor = mouseY - cursorY; | |
| cursorX += dxCursor * 0.15; // Faster follow | |
| cursorY += dyCursor * 0.15; | |
| // Trail follows cursor with a slight delay | |
| const dxTrail = cursorX - trailX; | |
| const dyTrail = cursorY - trailY; | |
| trailX += dxTrail * 0.1; | |
| trailY += dyTrail * 0.1; | |
| // Apply transformations based on dynamic sizes | |
| cursor.style.transform = `translate(${cursorX - cursorSize / 2}px, ${cursorY - cursorSize / 2}px)`; | |
| cursorDot.style.transform = `translate(${mouseX - dotSize / 2}px, ${mouseY - dotSize / 2}px)`; | |
| cursorTrail.style.transform = `translate(${trailX - trailSize / 2}px, ${trailY - trailSize / 2}px)`; | |
| requestAnimationFrame(animate); | |
| } | |
| animate(); | |
| // Cursor interactions with smooth transitions | |
| document.querySelectorAll('a, button, .section').forEach(element => { | |
| element.addEventListener('mouseenter', () => { | |
| cursor.style.transition = 'width 0.2s ease, height 0.2s ease'; | |
| cursor.style.width = '30px'; | |
| cursor.style.height = '30px'; | |
| cursor.style.backgroundColor = 'rgba(59, 130, 246, 1)'; | |
| }); | |
| element.addEventListener('mouseleave', () => { | |
| cursor.style.transition = 'width 0.2s ease, height 0.2s ease'; | |
| cursor.style.width = '20px'; | |
| cursor.style.height = '20px'; | |
| cursor.style.backgroundColor = 'transparent'; | |
| }); | |
| }); | |
| // Prevent cursor from disappearing | |
| document.addEventListener('mouseout', () => { | |
| cursor.style.opacity = '0'; | |
| cursorDot.style.opacity = '0'; | |
| cursorTrail.style.opacity = '0'; | |
| }); | |
| document.addEventListener('mouseover', () => { | |
| cursor.style.opacity = '1'; | |
| cursorDot.style.opacity = '1'; | |
| cursorTrail.style.opacity = '1'; | |
| }); | |
| // Initialize Prism | |
| Prism.highlightAll(); | |
| }); | |
| </script> | |
| </body> | |
| </html> |