Pack de cursores

Penny

Añadir a la extensión

Looking for a fun and playful cursor to spice up your browsing experience? Check out the Penny cursor from the Games Cursor Collection! This cute cursor features a shiny penny with a smiley face, making it perfect for gamers and anyone who loves a touch of whimsy. Plus, the Games Cursor Collection offers a wide variety of other fun cursors to choose from, so you're sure to find something that fits your style and personality. Try out the Penny cursor today and add some personality to your browsing!

Cursor

Descarga el archivo o copia el código para tu web, React, JavaScript o Roblox.

Descargar cursor para Roblox

CSSJavaScriptReactRoblox

Pega este CSS en tu hoja de estilos. Las coordenadas del hotspot ya están incluidas.

.custom-cursor {
  cursor: url('https://cute-cursor.com/cdn/packs/10593/arrow.svg') 6 12, auto;
}

Pega este JavaScript para aplicar el cursor con el hotspot correcto.

const CURSOR_URL = 'https://cute-cursor.com/cdn/packs/10593/arrow.svg';
const HOTSPOT_X = 6;
const HOTSPOT_Y = 12;
const CURSOR_FALLBACK = 'auto';

const cursorValue = `url('${CURSOR_URL}') ${HOTSPOT_X} ${HOTSPOT_Y}, ${CURSOR_FALLBACK}`;

// Apply to the whole page
document.body.style.cursor = cursorValue;

// Or apply to a specific element
// const target = document.querySelector('.my-element');
// if (target) target.style.cursor = cursorValue;

Copia este componente React y envuelve tu contenido con él.

import React from 'react';

const CURSOR_URL = 'https://cute-cursor.com/cdn/packs/10593/arrow.svg';
const HOTSPOT_X = 6;
const HOTSPOT_Y = 12;
const CURSOR_FALLBACK = 'auto';

export default function CustomCursor({ children, className = '', as: Tag = 'div', style = {}, ...props }) {
  const cursorStyle = {
    cursor: `url('${CURSOR_URL}') ${HOTSPOT_X} ${HOTSPOT_Y}, ${CURSOR_FALLBACK}`,
    ...style,
  };

  return (
    <Tag className={className} style={cursorStyle} {...props}>
      {children}
    </Tag>
  );
}

// Usage:
// <CustomCursor>Your content</CustomCursor>

Sube la imagen a Roblox, reemplaza YOUR_ASSET_ID y pega este LocalScript.

-- Roblox custom cursor
-- Image URL: https://cute-cursor.com/cdn/packs/10593/arrow.svg
-- Hotspot: 6, 12
-- Size: 128x128
-- 1. Upload the image to Roblox and copy rbxassetid
-- 2. Replace YOUR_ASSET_ID below
-- 3. Put this LocalScript in StarterPlayer > StarterPlayerScripts

local UserInputService = game:GetService("UserInputService")
local RunService = game:GetService("RunService")
local Players = game:GetService("Players")

local player = Players.LocalPlayer
local playerGui = player:WaitForChild("PlayerGui")

local HOTSPOT_X = 6
local HOTSPOT_Y = 12
local CURSOR_WIDTH = 128
local CURSOR_HEIGHT = 128

local screenGui = Instance.new("ScreenGui")
screenGui.Name = "CustomCursorGui"
screenGui.ResetOnSpawn = false
screenGui.IgnoreGuiInset = true
screenGui.DisplayOrder = 999999
screenGui.Parent = playerGui

local cursor = Instance.new("ImageLabel")
cursor.Name = "CustomCursor"
cursor.BackgroundTransparency = 1
cursor.Size = UDim2.fromOffset(CURSOR_WIDTH, CURSOR_HEIGHT)
cursor.Image = "rbxassetid://YOUR_ASSET_ID"
cursor.ZIndex = 999999
cursor.Parent = screenGui

UserInputService.MouseIconEnabled = false

RunService.RenderStepped:Connect(function()
    local mouseLocation = UserInputService:GetMouseLocation()
    cursor.Position = UDim2.fromOffset(mouseLocation.X - HOTSPOT_X, mouseLocation.Y - HOTSPOT_Y)
end)

Puntero