{"id":22202691,"url":"https://github.com/namchee/tetikus","last_synced_at":"2025-06-23T04:37:18.436Z","repository":{"id":42710522,"uuid":"283934440","full_name":"Namchee/tetikus","owner":"Namchee","description":"A small custom cursor component for Vue 3 ✌️","archived":false,"fork":false,"pushed_at":"2022-12-11T18:22:21.000Z","size":1206,"stargazers_count":12,"open_issues_count":13,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-11-14T08:35:48.210Z","etag":null,"topics":["cursor","custom-cursor","javascript","vue","vuejs","vuejs3"],"latest_commit_sha":null,"homepage":"","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Namchee.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-07-31T03:37:50.000Z","updated_at":"2023-12-07T17:48:15.000Z","dependencies_parsed_at":"2023-01-27T04:30:37.911Z","dependency_job_id":null,"html_url":"https://github.com/Namchee/tetikus","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Namchee%2Ftetikus","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Namchee%2Ftetikus/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Namchee%2Ftetikus/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Namchee%2Ftetikus/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Namchee","download_url":"https://codeload.github.com/Namchee/tetikus/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":227762892,"owners_count":17816098,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cursor","custom-cursor","javascript","vue","vuejs","vuejs3"],"created_at":"2024-12-02T16:36:43.493Z","updated_at":"2024-12-02T16:36:44.316Z","avatar_url":"https://github.com/Namchee.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Tetikus\n\n[![Code Style: Google](https://img.shields.io/badge/code%20style-google-blueviolet.svg)](https://github.com/google/gts) [![Vue 3](https://img.shields.io/badge/vue-3.x-brightgreen.svg)](https://github.com/vuejs/vue-next) [![NPM Package Version](https://img.shields.io/npm/v/@namchee/tetikus)](https://www.npmjs.com/package/@namchee/tetikus) [![Bundle Size](https://img.shields.io/bundlephobia/minzip/@namchee/tetikus)](https://bundlephobia.com/result?p=@namchee/tetikus@0.2.0)\n\nTetikus is a custom cursor component made for Vue 3 🖱️.\n\n\u003e ⚠️ **WARNING**: This component **DOES NOT WORK** with Vue 2! Consider upgrading to Vue 3 as it's already been officially released.\n\n\u003e ⚠️ **WARNING**: This library **DOES NOT** work on older browsers that doesn't support `esnext`, the reason is stated [here](https://github.com/vuejs/vue-next)\n\n## Table of Contents\n\n- [Features](#Features)\n- [Installation](#Installation)\n- [Usage](#Usage)\n- [Props](#Props)\n- [Slots](#Slots)\n- [Events](#Events)\n- [Directives](#Directives)\n- [Options](#Component-Options)\n- [Objects](#Objects)\n- [Development](#Development)\n- [License](#License)\n\n## Features\n\n- Easily customizable, you're not locked with basic circle shape and most\nevents are emitted properly\n- Relatively performant, uses native browser technologies\n- Relatively small, the minified build is only 6.3KB gzipped 📦\n- Made with [Typescript](https://www.typescriptlang.org/), no more guessing games 🤔\n- Depends on nothing, all features are implemented with pure CSS, JS, and Vue ✌️.\n\n## Installation\n\nSimply execute this script from your terminal\n\n`npm install @namchee/tetikus --save`\n\nAfter that, you can add it to your Vue 3 application by using the `.use()` like:\n\n```js\nimport { createApp } from 'vue';\nimport Root from './Root.vue';\nimport Tetikus from '@namchee/tetikus';\nimport '@namchee/tetikus/dist/tetikus.css';\n\nconst app = createApp(Root);\napp.use(Tetikus);\n```\n\n## Usage\n\nJust use the component in your root file.\nYou can use the directives on any element in your app.\n\n```js\n// Root.vue\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003ctetikus /\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n// ...rest of your code\n\n// Somewhere.vue\n\u003ctemplate\u003e\n  \u003cdiv v-thover=\"{ scale: 0.8 }\"\u003e\n    // ...\n  \u003c/div\u003e\n\u003c/template\u003e\n\n// If you're not using the global installation method,\n// make sure to install the components and directives correctly\n```\n\n## Props\n\nProp Name | Type | Default | Description\n--------- | ---- | ------- | -----------\n`showDefaultCursor` | `boolean` | `false` | Determines if the native cursor should be shown alongside `tetikus` component. Useful for accessability purposes.\n`throttleSpeed` | `number` (integer) | 1 | Number of `mousemove` event that should be fired per 1000 milliseconds. The higher the number, the choppier the cursor movement will be. Useful to boost performance.\n`borderWidth` | `number` (px) | 2 | Border width of default cursor shape in pixels.\n`color` | `string` | `transparent` | Background color of default cursor shape. Accept any CSS color value.\n`borderColor` | `string` | `#121212` | Border color of default cursor shape. Accept any CSS color value.\n`size` | `number` (px) | 36 | Size of default cursor shape in pixels\n`invertColor` | `boolean` | `false` | Determines if the default cursor shape should apply `mix-blend-mode: difference`\n`buttonMap` | `Array` | `['left']` | List of mouse button that should trigger `tetikus-mouse-down` event. Possible values are `left`, `right`, `middle`\n`clickBehavior` | `TransformProps` | `{}` | Determines transforms that should be applied to default cursor when a click event is registered\n`showOnTouch` | `boolean` | `false` | Determines if the cursor should be shown on 'touch'-devices. ⚠️ __Unless you know what are you doing, leave this on `false`__ ⚠️\n`opacity` | `number` (between 0.0 - 1.0) | 1 | Opacity of default cursor.\n`hideOnOut` | `boolean` | `false` | Determines if the custom cursor should be hidden when the cursor leaves the viewport\n`contentPosition` | `string` | `center` | Determines the position of `contents` slot relative to the cursor. Possible values are `center`, `bottom`, `right`\n`lerp` | `number` | `1` | [Linear Interpolation Value](https://codepen.io/ma77os/pen/KGIEh)\n`options` | `Object` | `{}` | All of other options in one single object. Will gracefully fallback if some values are not provided.\n\n## Slots\n\nName | Description\n---- | -----------\n(default slot) | Determines the cursor shape to be used. The default shape is a perfect circle ⚠️ __Currently, using this slot will render any previously defined behaviors invalid. Any transition MUST be handled by yours truly__ ⚠️\n`contents` | Content to be displayed with the cursor\n\n## Events\n\nName | Params | Description\n---- | ------ | -----------\n`tetikus-window-leave` | \u0026nbsp; | Fired when the cursor leaves the viewport\n`tetikus-window-enter` | \u0026nbsp; | Fired when the cursor enters the viewport\n`tetikus-mouse-move` | `(event: MouseEvent)` | Fired when the cursor moves on the viewport\n`tetikus-mouse-down` | `(event: MouseEvent)` | Fired when any previously registered mouse buttons are clicked by the user\n`tetikus-mouse-up` | `(event: MouseEvent)` | Fired when any previously registered mouse buttons are lifted\n`tetikus-element-in` | `(behavior: HoverBehavior)` | Fired when the cursor hovers over any element that has `tetikus` hover directives\n`tetikus-element-out` | `(behavior: HoverBehavior)` |Fired when the cursor exits from the bounding box of any element that has `tetikus` hover directives\n\n## Directives\n\nName | Value | Description\n---- | ----- | -----------\n`thover` (can be customized from options) | `TransformProps` | Determines transform to be applied when the cursor hovers this element\n\n## Component Options\n\nThese values will set default values for `tetikus` component\n\nName | Type |Default| Description\n--------- | ---- | ------|-----------\n`directiveName` | `string` | `thover` | Name for the hover directive.\n`transitionSpeed` | `number` (ms) | 200 | Animation speed for CSS transition.\n`easing` | `string` | `ease-out` | Easing function for CSS transition. Accept anything than can be represented using `cubic-bezier`\n`delay` | `number` (ms) | 0 | Delay for CSS transition.\n\n## Objects\n\nName | Property | Type | Description\n---- | -------- | ---- | -----------\n`TransformOpts` | `value` | `T` | Value for the transformation.\n\u0026nbsp; | `duration` (optional) | `number` (ms) | Transition duration. If the value is omitted, default value will be used\n\u0026nbsp; | `delay` (optional) | `number` (ms) | Delay for CSS transition.\n\u0026nbsp; | `easing` (optional) | `string` | Easing function for CSS transition. Accept anything than can be represented using `cubic-bezier`\n`TransformProps` | `scale` (optional) | `TransformOpts\u003cnumber\u003e`, `number` | Determines the scale of cursor to be applied on transition.\n\u0026nbsp; | `color` (optional) | `TransformOpts\u003cstring\u003e`, `string` | Determines the background color of cursor to be applied on transition.\n\u0026nbsp; | `borderWidth` (optional) | `TransformOpts\u003cnumber\u003e`, `number` | Determines the border width of cursor to be applied on transition.\n\u0026nbsp; | `borderColor` (optional) | `TransformOpts\u003cstring\u003e`, `string` | Determines the border color of cursor to be applied on transition. Accepts any CSS color string.\n\u0026nbsp; | `opacity` (optional) | `TransformOpts\u003cnumber\u003e`, `number` (between 0.0 - 1.0) | Determines the opacity of cursor to be applied on transition.\n\u0026nbsp; | `id` (optional) | `string`, `string[]` | Specify instances which should transform on hover event. Useful when you have multiple `tetikus` instances. Won't work at all on click events, you must register different behaviors directly into the instances.\n`HoverBehavior` | `domElement` | `HTMLElement` | The HTML element that triggers `tetikus-element-in` and `tetikus-element-out` events.\n\u0026nbsp; | `transformProps` | `TransformProps` | Transformation to be applied on the cursor element.\n\n\u003e Note: When any property of `TransformProps` is defined without `TransformOpts`, the transition settings (duration, easing, delay) for that property will be applied with default values.\n\n## Development\n\n\u003e Make sure that your have NodeJS and `npm` installed in your computer!\n\n1. Clone this repository\n2. Navigate to the project directory\n3. Install all required dependency by executing `npm install` from your terminal\n4. [Link the project with the playground](https://medium.com/dailyjs/how-to-use-npm-link-7375b6219557)\n5. Execute `npm run build:watch` from your terminal\n6. Happy developing!\n\n## License\n\nThis project is licensed under [MIT License](LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnamchee%2Ftetikus","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnamchee%2Ftetikus","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnamchee%2Ftetikus/lists"}